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.

Join the Conversation

38 Comments

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

    1. Programming this has been a long time ago, so I don’t really remember but:

      network failure: Use the demo to upload a large file, then interrupt (unplug-replug) your network connection and see what happens. If it doesn’t work you will have to implement a timeout and try to reconnect yourself.

      session out: You have to deal with that in you application yourself. I suggest to use a JSON webtoken https://jwt.io/ . This Uploader does not require a session.

      Sorry, for not being able to help more.

  1. can’t you make to tutorial for me using CodeIgniter? or just a PHP framework, thanks

      1. 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

  2. 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..?

    1. 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

    2. 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’);
      }

  3. 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

    1. 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.

      1. 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

  4. 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.

    1. The method save() of the PHP class checks for the content-length, which should be set automatically by the browser when posting, see line 66 https://github.com/speich/fileUploader/blob/master/speich.net/fileUploader/Upload.php#L66
      Use firebug’s Headers tab in the net panel to check if it is set.

      In your case for some reason the header content-length is not set by the browser. You might be able to set it explicitly before uploading with req.setRequestHeader(“Content-length”, file.size); in the js upload method on line 377 https://github.com/speich/fileUploader/blob/master/speich.net/fileUploader/Uploader.js#L377

      Hope that helps.
      Simon

    1. 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?

    1. @Simon
      hi,
      I have the same problem as you.
      when I drag a file in the box, the file is opened in the browser.
      can you explain in detail how you did it?
      thank you in advance.

      1. I’m not sure if I understand you. Are you saying A) the demo is not working for you or B) do you want to know how to prevent the file from being opened when dropped?

        A) shouldn’t happen anymore. It’s fixed or are you using Internet Explorer?
        B) You need to catch the browsers default event by calling e.preventDefault();

  5. 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

    1. 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.

  6. 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?

  7. Wow, very very cool. I would definitely use this. Are you planning to submit this for dojox ?

    1. 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.