dropzone upload only one file

Question

I am using dropzone.js for my drag-drop file upload solution. I want to upload only one file,if i upload second file the first one should be remove and second one should be uploaded. any idea how to do it..

here is my html

<form class="dropzone dz-clickable" action="upload.php" enctype='multipart/form-data'>
  <i class="fa fa-cloud-upload element"></i>
  <div style="color:gray;">Drag and drop or click to upload image</div>
  <input type="hidden" name="filenameEmail" class="filenameEmail" value="">
  <input type="hidden" name="side" value="front">
</form>

i changed dropzone.js

maxFiles: 1

it allow to upload only one file but i cant remove the previously uploaded file.please help me out.thanks in advance

score 102 · Answer 1 · edited Oct 16 '17 at 12:24

102

maxFiles: 1 is used to tell dropzone that there should be only one file. When there is more than 1 file the function maxfilesexceeded will be called, with the exceeding file as the first parameter.

here is a simple function to delete preview of first file and add the new one :)

maxFiles:1,
init: function() {
      this.on("maxfilesexceeded", function(file) {
            this.removeAllFiles();
            this.addFile(file);
      });
}

edited Oct 16 '17 at 12:24

Mawcel

1,967
15
22

answered Sep 25 '14 at 10:11

NeoNe

1,429
1
11
12

When I drag and drop, after the first one, the image preview of the files goes away and it's a gray preview. – Rachel Apr 13 '16 at 16:35
3

It is not perfect because it fires the `error` event. Bad when tracking errors. @darkbaby123 works for latest version. – Mike Casan Ballester Sep 05 '17 at 16:28
downvoted because @darkbaby123 answer works in a more generic cases (dragging files or selecting them) – rchavarria Nov 08 '19 at 13:06

score 32 · Answer 2 · answered Feb 22 '16 at 14:48

32

I used event maxfilesexceeded with method addFile and rans into infinite loop of event call. It should be the problem of using addFile because I didn't see it mentioned in both official site or GitHub wiki. Finally I solved with addedfile event. The Dropzone.js is the latest version when I write (4.3.0).

init: function() {
  this.on('addedfile', function(file) {
    if (this.files.length > 1) {
      this.removeFile(this.files[0]);
    }
  });
}

answered Feb 22 '16 at 14:48

darkbaby123

1,915
17
15

thank you for this! the answer @NeoNe is also good but when you drag a file it still uploading two files. I tried yours, it goes both ways :) – Alyssa Reyes Jun 30 '16 at 03:06
2

This one worked for me. @NeoNe fires the error event. Bad when tracking errors. – Mike Casan Ballester Sep 05 '17 at 16:26

score 19 · Answer 3 · answered Dec 05 '14 at 18:19

19

Limiting maxFiles to 1 still allow selecting multiple files in upload dialog. To disallow selecting multiple images in configuration specify following init function:

maxFiles:1,
init: function() {
    this.hiddenFileInput.removeAttribute('multiple');
}

answered Dec 05 '14 at 18:19

darklow

2,249
24
22

1

I tried this, but it didn't work for me. I have only one input, do I need to add another (hidden) input? – Andrew Fox Aug 08 '16 at 23:18
@AndrewFox Did you figured it out? It doesn't work for me either. – Milano Feb 02 '17 at 18:09
@MilanoSlesarik unfortunately not, I am still having this problem. – Andrew Fox Feb 07 '17 at 03:25

score 3 · Answer 4 · answered Jun 14 '18 at 17:54

 Dropzone.prototype.defaultOptions.init = function () {

                 this.hiddenFileInput.removeAttribute('multiple');
                 this.on("maxfilesexceeded", function (file) {
                     this.removeAllFiles();
                     this.addFile(file);
                 });
             };

this is wokrk for me.

score 0 · Answer 5 · answered Jun 30 '20 at 19:18

The combination of two solutions does the job for me in the init function:

        this.on("addedfile", function (file) {
            if (this.files.length > 1) {
                this.removeAllFiles()
                this.addFile(file);
            }
        });

score 0 · Answer 6 · answered May 05 '22 at 15:37

This work for me

const dropzoneInput = document.querySelectorAll('.dz-hidden-input')
for (const input of dropzoneInput) {
    if (input.getAttribute('multiple')) {
        input.removeAttribute('multiple')
    }
}

This what it does is validate if the dropzone input have attribute of multiple, if it have, remove id

Note: the class .dz-hidden-input can be different for you.

score -1 · Answer 7 · answered Feb 10 '17 at 16:41

None of these solutions worked for me.

The maxfilesexceeded event is called too late i.e. after an attempt to add the file.

Other solutions using this.removeFile(this.files[0]); resulted in a "Uncaught TypeError: Cannot read property 'removeChild' of null". or an infinite loop.

Solved by -

maxFiles: 2,
init: function () {

    this.on("addedfile", function (file) {
        if (this.files.length > 1) {
            this.files = this.files.slice(1, 2);                        
        }
    });

}

Works when using dz-clickable (file chooser btn) and drag and drop.

Be careful as `maxFiles: 2` allows multiple selections. It is a bad user experience and misleading on mobiles. See @darkbaby123 answer — Mike Casan Ballester, Sep 05 '17 at 16:36

dropzone upload only one file

7 Answers7

Linked