Dropzonejs.com check first then upload
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi, I have Dropzone working. My problem is that I need to check something first before anything is uploaded.

if there are multiple files and one or more of those files is .mov or .mp4 (a movie) then stop don't upload anything and show an alert.

If the above condition is not true then proceed, as usual, upload one file or upload multiple image files. The one file can be .mov or .mp4

Here is my code

Dropzone.autoDiscover = false;
        timeout: 300000,
    init: function () {

        // Find if there are multiple uploads (more than one file)
        // if there are and atleast one file is a .mov or .mp4
        // alert("hey");
        // stop, don't upload any files.

        // something like:
        var upload = "";
        var count = files.length;
        if (count > 1) {
            for (var i = 0; i < count; i++) {
                var ext = file.name.split('.').pop();
                if ((ext == "mov" )|| (ext == "mp4" )
                    // stop, don't upload anything 
                    // alert (stop)
                    upload = "STOP"; // more than one file and there is a .mp4 or .mov
        }else {
            upload = "GO"; // only one file

        if (upload != "STOP") {
            // Run the below code
        // something like: END

        // if there is just one file to upload, this can be .mov or .mp4
        // or there are multiple files but they are not .mp4 or .mov files
        // Run this
        this.on("addedfile", function(file) {
            setTimeout(function() {
                var ext = file.name.split('.').pop();
                if ((ext != "jpg") && (ext != "png")) {
                    $(".dz-image img").attr("src", "/img/dropzone.png");
            }, 2000);

            // Get error
            this.on("uploadprogress", function(file, progress) {
                console.log("File progress", progress);
        }), this.on("success", function(file, response) {
            var ext = file.name.split('.').pop();
            if ((ext != "jpg") && (ext != "png")) {
                $(".dz-image img").attr("src", "/img/dropzone.png");

            if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
                if ((ext == "mov")||(ext == "mp4")) {
                    var myName = file.name.replace("."+ext,"");
                    window.location.href = "/upload/video.php?name="+myName;
                }else {
                    html: 'All your files have been uploaded :) <br /> You will now be directed to the home page.'
                    setTimeout(function() {
                        window.location.href = "/";
                }, 3000);
        // Run this end


Crowdsource coding tasks.

1 Solution

Winning solution


Hi @Jacknumpty. Your code has missing brackets so I had added them first :)

The complete script can be found here: https://paste.ofcode.org/39Ax4VW3NZfH78QeL6hnaQr

You can try it out on my live example: https://jolly-mestorf-c73fba.netlify.app/

Hi Vladimr, thank you. A couple of things. 1. .MP4 works but not .MOV https://www.dropbox.com/s/e2oqgq4nyylpt6t/small.mov?dl=0
  1. On this.processQueue(); the uploading files are now sent as an array, not one at a time. Is there a way to change that so they are sent one at a time? Thank you.
Jacknumpty 20 days ago
Hi @Jacknumpty. I've implemented the changes that you've requested. Thank you.
VladimirMikulic 20 days ago
Thank you, I'm going to award you the bounty. My problem is that it's still saying the image is array in my PHP do you know why this would be? It was working before. $tempFile = $FILES['file']['tmp_name']; $fileName = $FILES['file']['name'];
Jacknumpty 20 days ago
I just commented out // ALLOW MULTIPLE FILES UPLOAD Thanks Vladimir, you really help me out. Much appreciated.
Jacknumpty 20 days ago
I am glad that you are satisfied with the solution. I am not familiar with PHP so I can't help you there. Unfortunately, Dropzone processFile/s method sends the files as an array. I've developed a custom function to send each image individually. Here is the code: https://paste.ofcode.org/37UwMUeCSvwmr4rzv5bcDVV.
VladimirMikulic 19 days ago