How to cancel an upload without showing error?

Question

I'm using Dropzone.js for uploading images. So far, this works.

Now I would like to offer the user the possibility to drag other files than images to the very same dropzone - but they should not be uploaded. Instead I just want to process them programmatically on the client-side.

How can I achieve this?

I know that there is the accept function which I can use to check whether I want to upload a file - but this does not help: If I reject a file, it marks the file as an error. I do not want this.

Basically, I needed a way to intercept an upload before it actually starts and be able to cancel it programmatically. Is this possible?

Answer 1

I think to achieve this you will have to disable autoprocessQueue so that YOU have the power of uploading the files whenever you want to.

Then we can manually code where we want to process the file. The sample code may look something like below ,you can tweak it as your needs .

     Dropzone.options.myAwesomeDropzone = {
      maxFiles: 1,
      addRemoveLinks: true,
      autoProcessQueue: false, //heres where you tell it not to upload by itself and wait for you to tell it to upload
      autoDiscover: false,
        accept: function(file, done) {
          console.log("uploaded");
          done();
        },

      init: function() {

        var myDropzone = this; 

        //gets called when max files is reached . In our case its 1 file
        //so it will get called whenever a single file is dragged inside
        this.on("maxfilesreached", function(file){

        //here we check if the image is an image file or not 
        //if : it is not we simple tell the user and remove it 
        //else : just process the uploaded file
           if(file.type != "image/jpeg" && file.type != "image/png") {
               alert("Only Image file allowed for uploading");
                this.removeFile(file); //remove the file
             }else{
                 myDropzone.processQueue(); //upload the image file
              }

        });

        //this will get called when max files exceeds . in our case its 1 file
        //so it will get called whenever someone tries to upload more than 1 file
        this.on("maxfilesexceeded", function(file){

           //you can check fir filetypes that you want to allow like we did it above  
           //Do whatever client side extra stuff you want to do with the file

        });


      } //end of init

   };

Try it and see if it works for you .