Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

261
Views
Only last file is getting uploaded to AWS S3 when trying to upload multiple files to Amazon S3 with Dropzone.js

I am using Dropzone js to upload multiple files directly to AWS S3 bucket. My code works fine only when I upload a single media. But when I try to add multiple media, only the last one gets uploaded to Amazon S3 bucket. I added debug points on several callbacks or events like "uploadprogress", "totaluploadprogress", "complete", all the media files reach at each event but seems like not all are getting uploaded. No error in console as well.

Below is my dropzone config code in javascript:

var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
        parallelUploads: 10,
        previewTemplate: previewTemplate,
        autoQueue: true, // Make sure the files aren't queued until manually added
        previewsContainer: "#previews", // Define the container to display the previews
        clickable: "#upload-media-btn", // Define the element that should be used as click trigger to select files.
        url: '#',
        method: 'PUT',
        autoProcessQueue: false,
        maxFilesize: 99999,
        maxFiles: null,
        chunking: false,
        parallelChunkUploads: true,
        addRemoveLinks: false,
        uploadMultiple: true,
        preventDuplicates: true,
        dictCancelUpload: 'Cancel',
        accept: function (file, done) {
            done();
        },
        maxfilesexceeded: function (files) {
            // to replace file if one is already selected  -- works as file replace
            this.removeAllFiles(true);
            this.addFile(files);
        }
    });

function uploadMedia(files) {
        Dropzone.prototype.uploadFiles = function (files) {
            for (var j = 0; j < files.length; j++) {
                var file = files[j];

                console.log("Uploading media file: ", file.name)
                var albumName = "${user.userId}/input/post/";
                var newMediaNameForVideo = '';
                if (file.type.startsWith('image')) {
                    albumName += 'photo';
                    isVideo = false;
                } else if (file.type.startsWith('video')) {
                    albumName += 'video';
                    isVideo = true;
                }

                var fileDomName = getRandomFileName(file.name, file.size, isVideo);
                if (isVideo) {
                    mediaName = "VIDEO_"+fileDomName.replace("VIDEO_", "");
                    mediaNames.push(mediaName);
                    newMediaNameForVideo = mediaName.replace("VIDEO_", "");
                } else {
                    mediaName = fileDomName.replace("VIDEO_", "");
                    var newMediaName = mediaName + "|"+parseInt(file.width)+"|"+parseInt(file.height);
                    mediaNames.push(newMediaName);
                    newMediaNameForVideo = mediaName;
                }

                var albumPhotosKey = albumName + "/";
                var photoKey = albumPhotosKey + newMediaNameForVideo;
                // Use S3 ManagedUpload class as it supports multipart uploads
                s3Object = new AWS.S3.ManagedUpload({
                    params: {
                        Bucket: albumBucketName,
                        Key: photoKey,
                        Body: file,
                        ACL: "public-read"
                    }
                }).on('httpUploadProgress', function(progress) {
                    loaded[this.body.name] = progress.loaded;
                    var loadedTotal = 0;
                    for (var j in loaded) {
                        loadedTotal += loaded[j];
                    }
                    console.log(loadedTotal + ' === ' + sizeTotal);
                    console.log(((loadedTotal/sizeTotal)*100).toFixed(2)+" % uploaded");
                    //myDropzone.emit('totaluploadprogress', parseInt(loadedTotal/sizeTotal*100));

                    makeGlobalProgress(parseInt(loadedTotal/sizeTotal*100));

                });

               sendEvents(file)
            }
        };

    }

    function sendEvents(file) {
        let progress = i => myDropzone.emit('totaluploadprogress',  i.loaded * 100 / i.total);
        s3Object.send(err => err ? myDropzone.emit('error', file, err) : myDropzone.emit('completemultiple', file));
        s3Object.on('httpUploadProgress', progress);
    }

I am trying to upload media directly from my javascript code to AWS S3. Please help in resolving this issue. Basically when trying to upload multiple medias, only the last one is being uploaded and others are not reaching the AWS server at all.

over 4 years ago · Santiago Trujillo
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!