Topic: File input doesn't correctly work when removing file
Hello,
I have an issue using the file input component. When I try to remove a file from the file list and then start the upload, the file is removed from the list but is still sent to the server with others selected files.
To remove the file, I created a method removeFile(). First, I've tried to remove the file from the file list doing this:
this.files.splice(index, 1).
The file is removed from the list but is still posted with others files. Then, I tried to call the onUploadOutput() method to remove the file and I've the same behavior as I described previously. Here is my code:
Finally, I searched from ngx-uploader documentation https://github.com/bleenco/ngx-uploader and I tried this:
removeFile(id: string): void { this.uploadInput.emit({ type: 'remove', id: id }); }
With this solution, the files are not removed from the list and sending file only works if I don't remove any file.
Please, I need some help... How could I remove files from the added files list?
Regards
Dear @ISDev
removeFile(id) method requires to pass a file ID as an argument. Not file index, but file ID. You can get the file id in this way: this.files[file-index].id.
For the test, I have added this.removeFile(this.files[0].id); line to the startUpload() method.
I have added two files and removed one file. The uploader has saved only 1 file in the uploads directory.
Please take a look at my code:
export class AppComponent {
formData: FormData;
files: UploadFile[];
uploadInput: EventEmitter<UploadInput>;
humanizeBytes: Function;
dragOver: boolean;
constructor() {
this.files = [];
this.uploadInput = new EventEmitter<UploadInput>();
this.humanizeBytes = humanizeBytes;
}
showFiles() {
let files = '';
for (let i = 0; i < this.files.length; i ++) {
files += this.files[i].name;
if (!(this.files.length - 1 === i)) {
files += ',';
}
}
return files;
}
startUpload(): void {
const event: UploadInput = {
type: 'uploadAll',
url: 'http://localhost:3001/api/upload',
method: 'POST',
data: { foo: 'bar' },
};
this.removeFile(this.files[0].id);
this.files = [];
this.uploadInput.emit(event);
}
cancelUpload(id: string): void {
this.uploadInput.emit({ type: 'cancel', id: id });
}
onUploadOutput(output: UploadOutput | any): void {
if (output.type === 'allAddedToQueue') {
} else if (output.type === 'addedToQueue') {
this.files.push(output.file); // add file to array when added
} else if (output.type === 'uploading') {
// update current data in files array for uploading file
const index = this.files.findIndex(file => file.id === output.file.id);
this.files[index] = output.file;
} else if (output.type === 'removed') {
// remove file from array when removed
this.files = this.files.filter((file: UploadFile) => file !== output.file);
} else if (output.type === 'dragOver') {
this.dragOver = true;
} else if (output.type === 'dragOut') {
} else if (output.type === 'drop') {
this.dragOver = false;
}
this.showFiles();
}
removeFile(id: string): void {
this.uploadInput.emit({ type: 'remove', id: id });
}
}
Best Regards,
Damian
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 6.2.3
- Device: Terra
- Browser: Chrome
- OS: Windows 10 Pro
- Provided sample code: No
- Provided link: No