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

?

Marra

Where can I put this function. maxfilesexceeded: function (files) { this.removeAllFiles(); this.addFile(files); }, I am a beginner and I don't know exactly where. Thanks – Elute

@Elute I did it like this: <div [dropzone]="config" (maxFilesReached)="maxFilesReached($event)" class="dropzone-top-layer"></div> and then have a function in my Angular component: public maxFilesReached(event: any): void { this.dropzone.dropzone().removeAllFiles(true); } – Marra

thanks for your response. But it doesn't work. It remove only the file but not add the newest. Can you send the whole code? – Elute

@Elute you'll have to replace the file manually. In dropzone config, add this method accept: this.localAcceptHandler . Inside that function, I manually add file to my own collection ` this.files = [file];` . I have the variable public files: any = []; And later I use my files instead of this.dropzone.dropzone().files. To be honest, Dropzone has also some other unpleasant quirks (difficult to show progress while loading file blobs in memory, buggy integration with MatDialog showing twice for no reason) and I won't use it in my next project. – Marra

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

Marindamarinduque

Thanks, will try it. One doubt - at this point all the files (except the first one) will have accepted = false, so I guess I'll have to filter the files collection to take the second file only (because the first one was the old that I want to ignore now). – Marra

Yes, you are right about that. You need to filter the file by the accepted parameter so the first one does not be send to save. I think if you control the files when the first file is ditched you will send the last one you dropped in the d area. – Marindamarinduque

Where can I put this function. I am a beginner and I don't know exactly where. Thanks – Elute

@Elute if you are using jquery, in your dropzone options you can add the function like this. $dropzoneArea = new Dropzone('div#dropzoneDrop', { // url: '/file/post', addRemoveLinks: true, //thumbnailWidth: "100", //thumbnailHeight: "100", uploadMultiple: true, autoProcessQueue: false, parallelUploads: 4, maxFilesize: 4, maxFiles: 4, maxfilesexceeded: function (files) { this.removeAllFiles(); this.addFile(files); } }); – Marindamarinduque

Thank you. Unfortunately I'm not using Jquery – Elute

What are you using? – Marindamarinduque

This is an infinite loop – Irreverent