CODEWITHSUNDEEP
file-uploadjquery-pluginsdropzone.js
richhallstoke
richhallstoke

Reputation: 1601

Parallel uploads for multiple images using DropzoneJS

At present I have a working DropzoneJS implementation where a user can select multiple images and upload them. There is a parameter parallelUploads which seems in practice to determine how many images can be uploaded at once, for example when the Select Files dialog is opened if the user selects 10 files, but parallelUploads:5 then only the first 5 images will upload successfully and the remaining 5 will be ignored, and those 5 images are sent via a single HTTP POST request.

What I would like to be able to do is configure it so that there is no limit to how many images are uploaded, but that they are uploaded in batches. For example, if a user selects 30 images, I would like them to all be uploaded successfully, either with 1 image per HTTP POST request or with a defined number per HTTP POST such as 5. If I set parallelUploads:30 then the server requires a vast amount of memory to try and do server-side processing on 30 images in one go and this doesn't seem to be a great solution.

How can I configure it to launch a separate HTTP POST request per image or for just a defined number of images at once without capping the number of images being uploaded in one action by the user?

<link rel="stylesheet" type="text/css" href="dropzone.css" media="all" />
<script type="text/javascript" src="dropzone.min.js"></script>

<div id="pnlPhotoThumbnails"></div>
<div class="clearfix">
  <form id="frmUpload" method="post" enctype="multipart/form-data"
        action="photo-upload.json" class="dropzone">
    <input type="file" name="photo" id="photo" />
  </form>
</div>

<style type="text/css">
#frmUpload input[type=file]{display:block;height:0;width:0;}
</style>

<script type="text/javascript">
function RefreshPhotos(){ $('pnlPhotoThumbnails').load('photo-thumbnails.php'); }
$(function(){
  $('frmUpload').dropzone({
    acceptedFiles: '.jpg',
    parallelUploads: 5,
    init:function(){
      var hDropzone = this;
      this.on('success', function(){ RefreshPhotos(); hDropzone.removeAllFiles(); });
    }
  });
});
</script>

Note: Above is an example code similar to the implementation I have, though I've edited it somewhat to make the question general rather than specific to my project, and hopefully with sufficient code to give an idea of how it works so bear in mind its not complete and functional from just this snippet! photo-upload.json would be a server-side script to process the file upload and return a JSON succcess/error response, photo-thumbnails.php would return HTML with <img/> tags for each of the photo thumbnails.

Upvotes: 2

Views: 2403

Answers (1)

richhallstoke
richhallstoke

Reputation: 1601

It turns out the following configuration will solve this, when in this specific case it will allow up to 100 files to be uploaded in one user action, but with an individual HTTP POST request for each image upload.

As of DropzoneJS version 4.0, it does not appear possible (correct me if I'm wrong) to set the number of files allowed to be uploaded in one go to unlimited, or to define a number of images to batch together, they are either all uploaded together or all uploaded separately:

parallelUploads: 100,
uploadMultiple: false

Upvotes: 1

Related Questions