5

I'm looking to make a file uploader with a progress bar in HTML5. I've tried using a number of tutorials found elsewhere including on SO. This SO answer (the accepted one) seems to get the closest to what I want but I can't work out the PHP end, also both the $_FILES and $_POST arrays appear to be empty.

Before people start saying it's not possible with hidden iframes etc... It should be possible with HTML5.

jQuery is available if required, but my impression is that jQuery does not currently support a lot of HTML5 functionality.

Update:

I'm only worrying about Chrome right now.

Improve this question
8
  • Have you tried this one? aquantum-demo.appspot.com/file-upload Commented Aug 29, 2011 at 15:07
  • @Vladimir Thank you, that would work but it's not HTML5, it's a very elaborate hidden iframe implementation. Commented Aug 29, 2011 at 15:11
  • @xdazz Chrome, added that to Q Commented Aug 29, 2011 at 15:12
  • I'm not sure what do you mean by it's not HTML5. This one is not using iframe (for most modern browsers at least). Commented Aug 29, 2011 at 15:14
  • It supports drag & drop and multiple file upload if that's what you need Commented Aug 29, 2011 at 15:15

2 Answers 2

Reset to default
4

I think this might work for you http://aquantum-demo.appspot.com/file-upload

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you. Took me a while to get this running in the customized format I needed it but I didn't have to modify the core, just tweak the config options until I got the desired behaviour. Works very well now.
0

I think the best project I have seen to handle file uploads is from the makers of TinyMCE, Moxiecode with Plupload. It will work with HTML5, but also falls back to Browser Plus, Gears, Flash or Silverlight. It is GPLv2 licenced.

You can see some of their examples here: http://www.plupload.com/example_queuewidget.php

Improve this answer

5 Comments

doesn't appear to support drag 'n drop of files from OS into browser which is an important HTML5 component...
they say it does, but their demo fails to handle it correctly
Does Chrome itself have the capability to perform that action? The HTML5 drag and drop works just fine for me in Firefox, but Chrome attempts to open the file, which it can't so it adds it to the download queue instead. See plupload.com/example_all_runtimes.php (scroll down to HTML5) and I dragged a JPG file onto it.
Chrome does have the capabilities, that particular framework however does not handle it correctly in Chrome. I experienced that same result you did. However, the jQuery plugin suggested by Vladimir in the comments on the Q does work correctly in Chrome.
Maybe this ticket alludes to the same problem: github.com/moxiecode/plupload/issues/311 The demo does not have the drop_element defined so perhaps if you were to define it then you would have a working Chrome + HTML5 file upload tool.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.