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

Question

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.

question from:https://stackoverflow.com/questions/65923283/only-last-file-is-getting-uploaded-to-aws-s3-when-trying-to-upload-multiple-file

Answer 1

Waitting for answers