How to Use Multiple File Upload in Dropzone

for most of the articles/tutorials i could’ve found, everyone is using the single file upload which if we want to upload a 100 file, it will make 100 requests to the server but why do that when we can upload those 100 in only one request ? or better yet divide those 100 into smaller chunks so the server doesnt timeout ?

and with some try & error i found the best way to get this to work as i expected, so for a start lets see what the final code will look like then will discuss what each method/option means.

$("#upload-form").dropzone({
    uploadMultiple: true,
    parallelUploads: 10,
    maxFiles: null,
    processingmultiple() {},
    sending() {},
    totaluploadprogress(uploadProgress) {},
    successmultiple(files, res) {},
    errormultiple(file, res, xhr) {},
    queuecomplete() {}
})

uploadMultiple: true

to inform Dz that we are going to send multiple files at the same request

parallelUploads: 10

  • with single file upload it does nothing, using the prev example of the 100 file you are still going to send 100 requests no matter what.

  • but with multi upload, it does magic because if we sent those 100 file in one request

    • server will timeout incase you are doing some processing on each received file ex.“image optimization”.
    • ajax will timeout because its waiting for the server to send back the response.
    • totaluploadprogress() will fire only once.

however now Dz is dividing those 100 by 10, so you get 10 requests with 10 files each which is good because you avoided the prev issues plus

  • the user gets to see that the uploading is actually working and nothing has went wrong through the backend response for each group.

read More

maxFiles: null

it limits the amount of the uploaded files and it works the same whether you uploaded single or multiple files.

so if we set it to lets say 20 it means we are going to only upload 20 files out of those 100.

read More

sending()

use it to track if we are still sending files to server or not

let stillSending = false

$("#upload-form").dropzone({
    // ...
    sending() {
        stillSending = true
    },
})

processingmultiple()

it fires once the upload start which you can use to show the progress bar, ex.

processingmultiple() {
    $('.progress-bar').show()
},

totaluploadprogress()

update the progress bar with the uploading progress, ex.

totaluploadprogress(uploadProgress) {
    $('.progress-bar').css('width', uploadProgress + '%')
},

successmultiple()

fires once each request has finished processing by the backend then receive the backend response and display it.

for example using laravel

  • while processing the files array, save the response of each file to an array
$result = [];

foreach ($request->file as $one) {
    // save the file
    if (done saving) {
        $result[] = [
            'success' => true,
            'message' => 'all good',
        ];
    } else {
        $result[] = [
            'success' => false,
            'message' => 'something went wrong',
        ];
    }
}

// send this array as response
return response()->json(['data'=>$result]);
  • then on the frontend, process the response one by one
successmultiple(files, res) {
    res.data.map(function(item) {
        if (item.success) {
            // all good
        } else {
            // something went wrong
        }
    })

    // we have finished processing this group of files
    stillSending = false
},

errormultiple()

fires if Dz faced an issue while processing the file(s) or if maxFiles was set to anything other than null,
also the good news about this event that it won’t require any extra work from your side as it will fire on each file so you can use it like

errormultiple(file, res, xhr) {
    // because file could be an array or single
    // so we check to avoid errors
    file = Array.isArray(file) ? file[0] : file

    console.log(file.name, res)
},

queuecomplete()

fires after everything is done “be aware that it might fire more than once” which we can use to hide the progress bar ex.

queuecomplete() {
    // make sure the server has finished processing the last group of uploads
    if (!stillSending) {
        $('.progress-bar').hide(function() {
            $('.progress-bar').css('width', 0)
        })
    }
}

which you can also do under totaluploadprogress() but now

  • the user think that everything is done which is not
  • the server haven’t finished processing the last set of files yet
  • successmultiple() haven’t fired yet regarding this last request.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.