How to cancel/abort upload in Dropzone.js if condition is not fulfilled?

Question

I'm using Dropzone.js to upload files. Now I want to check a filed is filled or not, and if it isn't then cancel the upload.

My HTML code:

<input type="text" name="title" id="title" placeholder="Type the title of the album">
<form action="file-upload.cgi" enctype="multipart/form-data" class="dropzone" id="dropzoneform"></form>

My jQuery code:

Dropzone.autoDiscover = false;
$('.dropzone').dropzone({
    acceptedFiles: 'image/jpeg',
    init: function() {
        this.on('sending', function() {
            if ( $('#title').val().length > 0 ) {
                // just start automatically the uploading
            } else {
                // need a code to cancel the uploading
            }
        });
    }
});

How can I cancel the uploading when the #title's length is 0?

Franchescafranchise

Do you have a receiver function that is triggered after upload-completion of the file? If yes, you could check for file-emptiness in that function and perform the necessary action? – Flageolet

you could call .removeAllFiles(). ref:github.com/enyo/dropzone/wiki/Remove-all-files-with-one-button – Crosspatch

@dreamwiever yep, I found this code, but I can't implement it into my. What's the trick? – Franchescafranchise

what do you mean by can't? – Outofdate

Answer 1

What about this

Dropzone.autoDiscover = false;
$('.dropzone').dropzone({
    acceptedFiles: 'image/jpeg',
    init: function() {
        var that = this;
        that.on('sending', function(file) {
            if ( $('#title').val().length <= 0 ) {
                that.removeFile(file);
            }
        });
    }
});

Outofdate

this doesn't or cancel/abort like the question asks – Firefly

While this doesn't exactly answer the question, it did have what I needed. Thanks! – Fung

For me, it did cancel and abort the upload. I copied exactly the "init" part – Licorice

use return false after removeFile(file); – Delanie

How to cancel/abort without removing the file though? – Aguedaaguero

Answer 2

The accepted answer works if you want to remove the file completely; however, if you want to give the user the option to try and submit the same file again without having to re-add it to dropzone, you need to change a few things about how files are processed.

First, you need to set the autoQueue property to false when you initialize your dropzone:

$('.dropzone').dropzone({
    autoQueue: false,
    /* The rest of your configuration options */
});

This prevents Dropzone from automatically trying to upload every file right after it's added by the user. This means that now you have to actually enqueue the files yourself programmatically, using the following function:

 var yourDropzone = $('.dropzone');
 yourDropzone.on("addedfile", function(file) {
     if (/* some condition is met by your file */) {
         yourDropzone.enqueueFile(file);
     }
 }

This way, whenever the user selects a file for uploading, we can check if some arbitrary condition is met. Only when this is true, we enqueue the file for uploading to the server.

The advantage of this approach is that now we can actually choose when the file gets uploaded, rather than trying to remove it from the queue while Dropzone is trying to send the enqueued files.

This also allows for other fancier features; for instance, adding a button for each file that lets the user choose when to try and upload it.

Fleisher

I had to put this event listener inside the dropzone's "init" property and use this.on("addedfile") instead. For some reason referencing the dropzone after it was created and then listening for the addedfile event wasn't working. – Ithunn

In addition to this, I also had to add $('.dz-image-preview').remove() to remove the preview div from from the preview template after the test condition didn't pass. – Algin

If you get the error This file can't be queued because it has already been processed or was rejected. use the option enqueueForUpload: false and the function yourDropzone.processFile(file) – Bearskin

If you use 'vue-dropzone' and get the error This file can't be queued because it has already been processed or was rejected try this.$nextTick(()=> {this.$refs.dropzoneComponent.dropzone.enqueueFile(file);}); . It helped me – Lintel

@MateutAlin enqueueForUpload is not currently a valid option – Lithometeor

Answer 3

If the solution of the accepted answer throw this error :

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

Try

myDropzone.on("addedfile", function(file) {
if (/* some condition is NOT met by your file */) {
    myDropzone.removeFile(file);
}});

It's a mix between accepted answer and Protossoario's answer. Without queuing the file. The accepted answer is actually throwing this js error in my config.

Udometer

Answer 4

You can also catch the event "addedfile" when you declare your dropzone, this happens before sending anything.
Example :

jQuery("#media-uploader").dropzone({
    url: your_posting_url,
    acceptedFiles: 'image/jpeg',
    addedfile:function (file) {
        if( your condition ){
            // okay !
        } else {
            // not okay !
            this.removeFile(file);
        }
    },
    ... etc ...
});

Tarrant