Dojo Demo: Multiple file uploading with pause/resume

Update 09.2013: You can also use the file picker (file input) now.

I implemented a demo of a file uploader with dojo and PHP that lets you upload multiple files at once with drag and drop. The upload of each file can be paused/resumed thanks to the slice method of the new Blob interface.

Download: The php and js code is available for download on github.com.
More info: How to resume a paused or broken file upload

Features:

  • drag and drop your files directly from the desktop or use the file picker
  • overall progress bar showing the total progress of all individual uploads
  • pause/resume your upload
  • display different icons for each file’s mime type
  • unique icons are created for images (jpg, gif, png) using canvas and the new File API
  • abort your upload at any time or retry to upload after an error
  • displays nice HTTP error messages for each upload
  • status of bars (uploading, failed, waiting and done) are displayed in different colors

Requirements:

  • at least Firefox 3.6 or Chrome 7. pause/resume is supported only by Firefox 4.

Screenshot showing the progress bars’ different states of uploading files.

34 thoughts on “Dojo Demo: Multiple file uploading with pause/resume

      • Ohh thank you very much however i would like to know how do i trigger the same process like when i drag, you know the dialog page with the progress bars. I did the same thing that you have done but i could not find the way to trigger that process… I am trying all day but nothing happen

  1. i try your file uploader demo. its work. then i try to pause. but its failed to resume it say
    “505 Internal Server Error: ob_end_clean(): failed to delete buffer. No buffer to deleteCannot modify header information – headers already sent by (output started at /mnt/sites/speich.net/web/library/speich.net/fileUploader/upload-controller.php:23)Function eregi() is deprecated” , any suggestion..?

    • Hi eri

      My provider recently moved to php 5.3. Seems like my script uses the function eregi() which is depricated, although can’t remember using that anywhere. Will have a look into it tonight.

      Simon

    • Demo works again. The first error occurred because I didn’t call ob_start() first. The second I don’t really know, because as I suspected I don’t call the depricated eregi anywhere. Seems like my hosting server calls that, when using register_shutdown_function(), so I just made that call conditionally by wrapped it in

      if ($_SERVER['HTTP_HOST'] !== ‘www.speich.net’) { // for some unknown reason this calls eregi() on my server which is deprecated and generates error
      register_shutdown_function(‘handleShutdown’);
      }

  2. Hi,

    I tried to use your script to upload 400MB file. But it fails to write the file to the server.
    It is ok on 30MB but not on larger files.

    Here is the error when uploading 400MB file.
    Uploading done, writing file to server.
    500 Internal Server error:
    abort retry

    I checked the code and it looks like the error appears if the
    $headers['X-File-Size'] and $headers['X-File-Name']
    are not set.

    I think $headers = getallheaders(); is not working.
    Any idea?

    Regards,
    Lucky

    • The default configuration of a PHP installation doesn’t normally let you upload such big files. Have you set the following php.ini directives:

      • memory_limit (if set)
      • post_max_size
      • upload_max_filesize

      Uploading is also affected by max_execution_time and max_input_time and by the apache’s timeout directive.

      • Hi Simon,

        Yes. Here are the following changes I made.
        And when checking phpinfo() it successfully changed the default value.

        php_flag file_uploads On
        php_value post_max_size 1000M
        php_value upload_max_filesize 1000M
        php_value memory_limit 1000M
        php_value output_buffering on
        php_value max_execution_time 259200
        php_value max_input_time 259200
        php_value session.cookie_lifetime 0
        php_value session.gc_maxlifetime 259200
        php_value default_socket_timeout 259200

  3. Hey.
    Thanks for the script.The problem is that the script didn’t find the uploads folder. Not sure why. I then changed it to the right path in the upload-controller.php, and that error message is gone. Instead I now get a “411 Length Required: Header ‘Content-Length’ not set.” error. I couldn’t fix it yet. Any help would be welcome.

    • ok…
      now in this files: upload.php and upload-controller.php
      i have set $demoMode = false;
      when i try upload a file, i have a message:Done. File saved on server.
      but i don’t find this file in my server at /speich.net/fileUploader/uploads/.
      any help please?

  4. Hi, I am very impressed with your DND uploader. Can you use a file mask to restrict the types of files that can be uploaded?

    Thanks Ben

    • Yes, that’s possible. Each file comes with an attribute type representing its mime type, which you can use to filter what should be uploaded. I use this to create the icons on the fly, see method setIcon() starting on line 59 in ProgressBar.js.

  5. Hi Simon,
    You should submit it to dojox definately.
    You would need to sign a CLA which just needs to be approved. Then you can submit it to trunk.

    CLA: http://dojofoundation.org/about/cla

    I haven’t looked at your code, but I might use it for a project. What do you do for IE support? Obviously IE doesn’t support DnD, but do you have plans to add dojo.ieIE() support to use a different dialog instead?

    • Hi Todd
      What would it take to do so?

      In an any case you are free to use it. Maybe you didn’t see the download link, but you can get the code on the demo page.

      I was thinking of putting it on Github, but I will have to figure out how that works first.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>