Ajax file upload - javascript

I want to upload a file using Ajax and php. I have a form with <input type="file"> tag. I want when user browses a file and clicks on submit, the file to be uploaded without a refresh. How should I do this ? It does't matter if refresh occur but i want to upload file with help of ajax.

Use a hidden iframe and set your form's target to that iframe's name. This way, when the form is submitted, only the iframe will be refreshed.
Have an event handler registered for the iframe's load event to parse the response.
More details on my blog post: http://blog.manki.in/2011/08/ajax-fie-upload.html

I did it with this jquery plugin. It pretty much mimics standard jquery ajax functionality, but also allows you to send data using iframe. No flash involved, pure javascript.
http://malsup.com/jquery/form/
Here is a file upload example
http://malsup.com/jquery/form/#file-upload

This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere.
check this:
http://valums.com/ajax-upload/

Take a look at SWFUpload, it should do what you want.

Here some I found http://blog.insicdesigns.com/2010/02/10-best-ajax-file-uploader-for-your-web-application/
and also jquery upload
plugins

Related

Trigger file upload via Javascript only

I want to write a browser add-on that automatically upload file on the page. So this will be done in pure Javascript.
This is what I have / know:
input#someId of the file upload input
File name and location in the computer
I am trying to "hardcode" in the console for now as a "Proof of Concept" but I cannot get it to work.
I have tried these two methods:
inputElement.click() as inputElement is the querySelector of that input.
Use initMouseEvent from what's the equivalent of jquery's 'trigger' method without jquery? but gave me error Uncaught TypeError: Cannot read property 'dispatchEvent' of null
So my questions are:
How to trigger click input of file upload element?
Better: how to process the upload completely? Basically pass the filename+location for upload to start (like when user clicks OK to open the file from the dialog)
UPDATE 1:
I was reading this http://www.thecssninja.com/javascript/fileapi
Maybe uploading file from File System is not possible. How about these alternatives:
We can grab a file from url (http)
The file is just image and in Javascript memory (base64)
Anyone of the above should be OK if they can be automatically upload and bypass the dialog box and search the file via local File System. I am thinking what if the image DOM or even canvas can be just dragged?
As people commented, you cannot do that. For security reasons, you have absolutely no access to programmatic fill an file input. Think about it, some dude could add a simple script to steal files from your computer and you wouldn't even know!
As far as I know, can't be done.

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.

How to open a browser to show the content of a file?

I trying to open a txt document in a enyo application for mobile and I didn't found anything, so can I open that file on the mobile browser or inside the application using javascript or other way?
Thanks!
You should be able to use Ajax to request the file and the place the response into the content of an instance of a Control. i.e.:
{name: "textfile"}
...
this.$.textfile.setContent(inResponse.data);
If you wanted to have HTML in it then you'll need to set the allowHtml property to true.
Check out https://github.com/enyojs/enyo/wiki/Consuming-Web-Services for more info on Ajax. And, yes, you use Ajax to request local (on device) files, too.

cffile alternative, I need to upload without form submit

So I want to upload a file to the server using ajax, so the form is not submitted. Cffile requres the filefield attribute, but as there is no form object passed to coldfusion that doesn't work. I can store the value entered by the user as a variable in javascript, and pass that variable to cf. How can I use this variable to upload my file? Thanks.
EDIT
Solved by submitting to iframe.
You can use the cffileupload tag (embeds a flash widget for uploading) , or take advantage of XMLHttpRequest level 2 (browser support) via the method explained here.
Are you uploading images?
You could try uploading to a canvas tag client side using javascript.
Then ajax post the base64 png encoded contents of the canvas.
Further reading and examples:
How to upload/POST multiple canvas elements
How to convert image into base64 string using javascript
Resizing an image in an HTML5 canvas
Resize image before upload, but upload synchronously (not ajax). Is it possible?
http://coding.pressbin.com/84/File-API-Resize-photo-before-upload/
Submit the form to a hidden iframe and handle your form upload as you normally would.

Javascript or jQuery: Download and redirect

Currently some guys programmed this in a HTML page:
<script>
location='http://example.com/downloadable.zip';
</script>
They want to redirect the user to another page once the file has started downloading. I can only modify this page but not the destination page.
What would be a good and clean javascript solution for making a user download the file and once he had accepted (or rejected) it, redirect him to another location? The solution may be jQuery code
NOTE: The downloading and redirection must be done automatically when accessing the page
Perhaps setup a link that calls a function. The function would in turn then send the download link, and then redirect.
This is just a guess based upon your description, as I don't know the full general setup, but it's what I would do going on what I know.
This seems like a hack. Have you tried an HTML meta tag with refresh? Also, you can add a link if the download fails.

Categories