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.