We Keep Coding

How to post a file to a form using javascript automatically

I have some client-side JavaScript which will output a jpeg file based on HTML5 canvas manipulation, if the user performs an action such as clicking the "OK" button.
I would like the jpeg output to be automatically loaded into the "Upload Front Side" field in a form, as if the user uploaded the file from his or her own hard drive.
However, I can't seem to get it to work.
Here is the form:
<div class="property-wrapper">
<label for="upload-front">Upload Front Side</label>
<input id="upload" class="file" type="file" enctype="multipart/form-data" id="Front-Side" name="properties[Front Side]" onchange="readURL(this);" accept="image/*" />
</div>
<script>
document.getElementById('upload').value="http://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Turkish_Van_Cat.jpg/353px-Turkish_Van_Cat.jpg"
</script>

The problem is browsers have several restrictions on what can be done programatically with file upload due to security reasons, have a look at this answer.
The file upload functionality is potentially exploitable, and some browsers will for example not open the explorer box if for example the file upload input field is hidden with display:none.
Most browsers will not allow programatic clicks to a file upload element and require the user to click them instead, to prevent attacks where someone sends a link to a page that immediately steals content from the user's hard drive.
So the functionality you mention does not seem to be feasible due to common browser security restrictions. There are usually no error messages or warnings, it just doesn't work.
An alternative to using the file upload browser input component could be to encode the contents of the file in Base64 and send in the body of an ajax POST for example.

Are you asking how to upload to a server, via a form, the graphic image you extracted from the canvas of your page? This would be useful, I hope to see this answered.
I would start by enabling the user to download/export the image. This might be done with a blob. Ive done this for text data exports, works nicely.
Maybe there is a way to apply the same tricks, just feed the blob/buffer to the server.
Another path might be to "PUT" the file at the server.
Hope this helps.

I would ajax POST a base64 encoded string of the image and forget the whole file upload thingy. You can upload the canvas code directly and reconvert it server side if you need a preview or something or see what other outputs are available from your canvas/image converter code.
I am assuming you are uploading to same server so you would not have cross domain issue but otherwise you can setup your server to accept cross domain ajax request very easily.

rename file that user uploads javascript

I have the following html on a form:
<input type="file" name="uploadField" />
When users click on the browse button they can select any file but I want to rename the file using the value of another field on the form
I have a submit button. Can I do it here?

Can I do it here?
No, for security reasons you have no control of this on the client. You can rename the file on the server when it gets uploaded.

I know the question is old but if anyone is still struggling with similar problem, please try to use append() or set() method of the FormData.

for security reasons you cannot do such thing i.e. manipulate multipart file or file to be uploaded do that on server

Android javascript interaction - trying to upload file to CGI

Alright, so let me preface this by saying that I'm really unsure as to what I'm doing here and if it is at all possible.
I'm trying to build an android app that will interact with a pre-existing website. The site has a field to browse for a file, and a button upload it. Hitting upload opens a /upload.cgi which seems to do the uploading itself before redirecting to a results page.
Is it possible to use the underlying javascript to upload a file without having to use the pre-existing GUI that the website presents? I would like to just use my own interface, but have it interact with what the website has.
Thanks, and apologies for the vagueness.

You maybe able to get it working using the Java/JavaScript bridge to submit the form for you (using a WebView). But my guess is it would be more trouble than it's worth. And you should be able to do it directly in Java using a post.
Files in HTML forms are normally uploaded using a multipart form encoded post body. Something like this:
<form enctype="multipart/form-data" action="upload.cgi" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
Choose a file to upload: <input name="uploadedfile" type="file" /><br />
<input type="submit" value="Upload File" />
</form>
All you need to do is create the same post request that the form would generate. Here are a few links to get you started with creating multipart post request on Android.
How use multipart/form-data upload picture/image on Android
http://w3mentor.com/learn/java/android-development/android-http-services/example-of-multipart-post-using-android/
http://www.17od.com/2010/02/18/multipart-form-upload-on-android/
http://evgenyg.wordpress.com/2010/05/01/uploading-files-multipart-post-apache/
Here's a debugging tip if you get stuck: You can installed fiddler as a reverse proxy on the CGI server, then you can watch both requests (HTML and Java) as they happen to compare them for differences. http://www.fiddler2.com/fiddler/help/reverseproxy.asp just remove it for production.

loading an image through javascript

is there a way to load the full binary of an image in javascript?
what i want to do is to allow the user to preview an image before uploading it.
ie the user selects an image on his local drive (C:\image.jpg) , view it, and decides to upload or cancel.
i tried to set the source to the image path, but it didn't work since it is outside the webapplication project folder.
any help?

thx for your posts, but i ended up creating a temp folder on the server that stores the uploaded image using ajax. and when the user saves the data, the image is moved to another location, and the temp folder is deleted.

You can do something like this:
<img id="preview" src="" style="display:none;" />
<form>
....
<input type="file" id="file" />
....
</form>
<script type="text/javascript">
var file = document.getElementById("file");
var img = document.getElementById("preview");
file.onchange = function(){
img.src = file.value;
img.style.display = 'block';
};
</script>

There is no easy way, what You could do:
Preload image with some ajax file uploader to temp area and then let user decide
Use some third party written solution (f.ex. some flash component)
Here there is also similar question:
is it possible to preview local images before uploading them via a form?

You need server cooperation to access the image binary data. You won't be able to use the "Upload Form" to access the file info without uploading it to a server.
You could however do something like tell the user to paste the source binary data of the image in a textarea or something, then you can use JavaScript to load that binary data and display the actual image.

This is available in some browsers via the HTML5 file access API. Here is the Firefox documentation for file access.

As answered several times, you can't do this with plain HTML/JavaScript due to security restrictions. You need to send the image anyway. You can however handle this using a Java Applet since it runs entirely at the client machine and offers more control than HTML/JS. There are several free and ready-to-use ones. JumpLoader looks good and some major sites also uses it. With Flash it should also be possible, but I am not sure which ones offers this functionality. Check/tryout some Flash Multi File Uploaders.

Plupload works with Ruby on Rails?

I tried following the example at:
http://www.plupload.com/example_custom.php
But in the request, file is not sent to the method of the controller, only the name.
Maybe I need to set in the configuration of Plupload, something like 'multipart = true'
Any idea?

The question was ages ago. But will answer for other people looking for a solution.
The solution for this is adding "multipart : true" on your pluploadQueue({}) function. That would send the file as multipart. For multiple files, it will send/POST the request multiple times. Then you can handle that on your controller.
Hope this helps.
Jas

I have no experience with Plupload I don't think you should have to explicitly deal with multipart uploads in the plugin configuration. (That is a file uploader library after all.) Don't get me wrong but do you have the multipart attribute set to true in the html markup?

W3C states this for file upload...
<FORM action="http://server.com/cgi/handle"
enctype="multipart/form-data"
method="post">
<P>
What is your name? <INPUT type="text" name="submit-name"><BR>
What files are you sending? <INPUT type="file" name="files"><BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</FORM>

Can we see some more code. There's a lot that could be going wrong.
Also, can you use debugger after the form submission and post a params output here?
J
P.s. By the way, tried to make this a comment but no go...

A few "any" ideas... :-p
Is there any chance the file you try to upload gets filtered by some security feature in Rails, the rails-proxying server (apache?), or even some software on clientside?
Did you try different browsers, to verify it's not a clientside problem? (sniffing your network connection could be another way to verify that the file actually gets sent to the server)
If you happen to be using rack, then there is some middleware that can take care of file uploads for you. Not what you wanted, but perhaps useful as a temporary workaround while waiting in case you'd discover you have to wait for some bugfixing in rails or plupload.
Permissions on the folder where uploaded files are supposed to go? Or do they go in memory first, and write to disk later? Maybe the plupload library uses temporary files somewhere and the permissions aren't working out there.