How to upload files from dropzone to cloudinary

Question

  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

Answer 1

You are using cloudinary js library to upload your file and dropzone.js's methods to listen events.

cloudinary.uploader.upload(file, function (result) {
     console.log(result)
     imagesArr.push(result.public_id);
}

This upload function doesn't register any event to dropzone.js so you can't listen to events like sending, success, complete etc. Basically you are mixing 2 libraries. So if you want to use dropzone and listen to events provided by it, use it alone. Here is how to upload using dropzone to cloudinary -

var myDropzone = new Dropzone(document.getElementById('dropzone-area'), {
    uploadMultiple: false,
    acceptedFiles:'.jpg,.png,.jpeg,.gif',
    parallelUploads: 6,
    url: 'https://api.cloudinary.com/v1_1/cloud9/image/upload'
 });
 myDropzone.on('sending', function (file, xhr, formData) {
       alert("you added a file");
  });
 myDropzone.on('sending', function (file, xhr, formData) {
   console.log("Adding api key "+123456789123456);
   formData.append('api_key', 123456789123456);
   formData.append('timestamp', Date.now() / 1000 | 0);
   formData.append('upload_preset', 'presetname');
 });
 myDropzone.on('success', function (file, response) {
  console.log('Success! uploading file to Cloudinary. public id - '+response.public_id );
 });

If you want live example https://plnkr.co/edit/Bm5x8jhBQNZkpz26oViw?p=preview

Answer 2

My guess is because autoProcessQueue set to false, then in order to upload a file you should call this.processQueue(); after the file has been added to the dropzone. As my understanding, only then the upload starts.

So quick fix for your code will be ( only the init function)

 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(); // remove this from here

        var myDropzone = this;
        //add start uploading button to the u.i and hook for clicks on it
        $('#btn-start').click(function () {
               myDropzone.processQueue(); // only then start to upload
        });

        //this can be hooked without the need for waiting for the added file event
        $('#btn-remove').click(function () {
                myDropzone.removeAllFiles();
        }); 

        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 });



        });

        this.on("sending", function (file, xhr, data) {
            console.log(file.path);
        });

    }