So, I’m idly musing about an AJAX-based S3 file manager and it occurs to me: I don’t know how to do file uploads via AJAX PUT requests. Is there any way to get access to a local file selected in an input element in a form? That’d sure make a nice alternative to pasting data into a big textarea.
-
About Me
Hi there! My name is Leslie Michael Orchard. I'm a serially enthusiastic, caffeine-dependent {web,mad,computer} scientist and {tech,scifi} writer working for the Mozilla Corporation and living near Ann Arbor / Detroit in Michigan.
-
Buy my books
10 Comments
I’ve yet to find a way to automate an http file upload within the browser. You can’t write to the builtin file upload input element’s filename. Possibly a Flash helper would be of use – see http://www.aflax.org for instance.
btw – I’ve sent some emails to your pobox addr lately with no ack. Either I’m a bit stinky or you’re not getting them or a bit of both.
I don’t think that you can do that right now, but read-only access to the file pointed to by a file upload element sounds like a good thing to propose to the WHATWG people for inclusion in their Web Applications spec, if it isn’t already there.
As long as it’s read-only and you can’t actually put a filename into that box from script I don’t really see any security flaw to that.
gmail is AJAXing up attachments already. I don’t really know how they’re pulling it off.
i’m not sure gmail is ajaxing attachments, i think they’re using a clever combination of iframes and dom manipulation of the input boxes, with perhaps a javascript timer auto-triggered onsubmit().
just guessing there, but i think you can see it if you have a “view rendered source” plugin for your browser…
No way to do it in a browser using the current technologies – without changing security restrictions, etc. I did implement an “AJAX style” uploader using ActiveX to browse for a file, base64 encode it and then post it to the server using the XHR object – this was before “AJAX”, but not brain surgery, of course you did have to let IE trust the site to allow the ActiveX stuff access to your hard drive – could’ve signed it I guess, but too much trouble for an Intranet app. GMail is just use an auto submit when you choose a file; in IE they are using a little bit of JS to auto popup the dialog box so you don’t have to have a browse button visable. The AFLAX stuff looks interesting, though.
Gmail does not use ajax to upload files. This link shows how we can upload files the way gmail does:
http://blog.360.yahoo.com/blog-qCsFWG45eqF9lZ05AZldsUC.?p=58
I just hit the wall with the same problem.
My current idea is the following:
- Open a popunder (not to make it annoyingly visible)
- set this window as receiver to the form
- trigger a submit by javascript parallel to the Ajax request
- after upload the popunder can call a jS function in the opener page that talks to the server and receives the uploaded pic for example
- then the popunder closes itself
Could this be a solution?
ellinas:
Most AJAX file upload solutions work almost exactly as you describe, however they use an invisible iFrame instead of a brand new window.
For example, the upload_progress plug-in for Ruby on Rails uses this method to provide upload progress in real time.
The invisible IFrame works great. I have a script that has suited me fine. You can see it at http://www.seemysites.net/projFolder/uploader – it’s completely free, too.
Nope, the iframe approach won’t work for Amazon S3 – which is what this post is really looking for. I’m looking for a 100% client-side solution that uses Amazon’s S3 api. So, no form post uploads, no server-side PHP helpers, just browser-to-S3 HTTP PUT. I don’t think it’s presently possible.