How to replace a previously selected file?

Question

I'm using Dropzone with Angular through ngx-dropzone-wrapper.

I'm not using upload directly from Dropzone, I just let it collect the files and then I process them in my code.

I need to limit file count to 1. So I set config.maxFiles = 1. Indeed, now file open dialog allows to select single file only. But the problem is that Dropzone does not replace previous file! Instead, it adds the new file to its files collection with accepted=false (most probably, because maxFiles was reached) flag. That's not what I expected. I need config.maxFiles = 1 to remove the old file and add the new and accept it.

So, I should call removeAllFiles(true) to support my requirements. But I can't find any event handlers that are triggered right after user has chosen a file and before Dropzone attempts to process it.

So, how do I implement the following requirement:

• the user can select only one file at a time
• if the user made a mistake and wants to select another file, the new file should replace the previously selected one

?

Answer 1

you need to tell the dropzone to ditch the first image. You need the function of the maxfilesexceeded in your dropzone options.

 maxfilesexceeded: function (files) {
        this.removeAllFiles();
        this.addFile(files);
 },

it works internally, if your maxfiles is one, and you are adding a second one, the first one will be ditched because it exceded its limit