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() {},
    totaluploadprogress(uploadProgress) {},
    successmultiple(files, res) {},
    errormultiple(files, 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

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.

On a side note, on your server ex.“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]);
  • 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
        }
    })
},

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 you side as it will fire on each file so you can use it like

errormultiple(files, res, xhr) {
    console.log(res)
},

queuecomplete()

fires after everything is done, which we can use to hide the progress bar ex.

queuecomplete() {
    $('.progress-bar').hide(function() {
        $('.progress-bar').css('width', 0)
    })
}

however you can also do the same under totaluploadprogress() ex.

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

    if (uploadProgress == 100) {
        $('.progress-bar').hide(function() {
            $('.progress-bar').css('width', 0)
        })
    }
}

but it won’t work as you think because with the multi file upload, the uploadProgress become 100 once Dz has sent the last request, so now

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

but when using queuecomplete() to hide the progress bar, now we avoided all of that +

  • the progress bar remained visible until the backend has finished all its work & sent the response.
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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s