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.

Community
  • 1
  • 1
Endophage
  • 19,217
  • 9
  • 54
  • 85
  • Have you tried this one? http://aquantum-demo.appspot.com/file-upload – Vladimir Aug 29 '11 at 15:07
  • @Vladimir Thank you, that would work but it's not HTML5, it's a very elaborate hidden iframe implementation. – Endophage Aug 29 '11 at 15:11
  • @xdazz Chrome, added that to Q – Endophage Aug 29 '11 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). – Vladimir Aug 29 '11 at 15:14
  • It supports drag & drop and multiple file upload if that's what you need – Vladimir Aug 29 '11 at 15:15
  • It's not a free or a tutorial, but I was looking into this before. I bought this and used / learned from it. http://codecanyon.net/item/uploadrr-html5-file-uploader/162017 – Clint C. Aug 29 '11 at 15:17
  • @Vladimir I'll take another look. I see in the features that it says it uses AJAX and fallsback. I missed that when I looked before, just saw they bundled the jQuery iframe transport plugin... – Endophage Aug 29 '11 at 16:24
  • @Vladimir would you like to make your suggestion an official answer? I haven't had time to implement it fully yet, but I downloaded the code and examples and some tinkering indicates it will work well for me. – Endophage Aug 29 '11 at 21:37

2 Answers2

4

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

Vladimir
  • 808
  • 5
  • 13
  • 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. – Endophage Aug 30 '11 at 16:01
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

Treffynnon
  • 20,415
  • 5
  • 59
  • 95
  • doesn't appear to support drag 'n drop of files from OS into browser which is an important HTML5 component... – Endophage Aug 29 '11 at 16:22
  • they say it does, but their demo fails to handle it correctly – Endophage Aug 29 '11 at 16:27
  • 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 http://www.plupload.com/example_all_runtimes.php (scroll down to HTML5) and I dragged a JPG file onto it. – Treffynnon Aug 29 '11 at 20:57
  • 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. – Endophage Aug 29 '11 at 21:35
  • Maybe this ticket alludes to the same problem: https://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. – Treffynnon Aug 29 '11 at 21:42