var myDropzone = new Dropzone("#product-image-drpzone", {
// Prevents Dropzone from uploading dropped files immediately
autoProcessQueue: false,
addRemoveLinks: true,
autoQueue: false,
acceptedFiles: '.jpg,.png,.jpeg,.gif',
url: 'https://api.cloudinary.com/v1_1/something/image/upload', //put it in the main url file once done
maxfilesexceeded: function (file) {
ToasterWrapper.errorMessage('You have uploaded more than 4 images!', false);
return;
},
init: function () {
// You might want to show the submit button only when
// files are dropped here:
myDropzone = this;
var imagesArr = [];
cloudinary.config({
cloud_name: '',
api_key: '737587394822762',
api_secret: ''
});
this.processQueue();
this.on("addedfile", function (file) {
var myDropzone = this;
$(".dz-progress").remove();
console.log(file);
cloudinary.uploader.upload(file, function (result) {
console.log(result)
imagesArr.push(result.public_id);
},
{ use_filename: true });
$('#btn-remove').click(function () {
myDropzone.removeAllFiles();
});
});
this.on("sending", function (file, xhr, data) {
console.log(file.path);
});
}
});
The this.on('sending')
doesn't get called as i want to find the file.path to be upload to cloudinary.
Please help
You are using
cloudinary
js library to upload your file anddropzone.js
's methods to listen events.This upload function doesn't register any event to
dropzone.js
so you can't listen to events likesending, success, complete
etc. Basically you are mixing 2 libraries. So if you want to usedropzone
and listen to events provided by it, use it alone. Here is how to upload usingdropzone
tocloudinary
-If you want live example https://plnkr.co/edit/Bm5x8jhBQNZkpz26oViw?p=preview
My guess is because
autoProcessQueue
set to false, then in order to upload a file you should callthis.processQueue();
after the file has been added to thedropzone
. As my understanding, only then theupload
starts.So quick fix for your code will be ( only the init function)