Topic: Select Only one file at time on File Input ( how to disable Multiselect in File input)
Hi there,
Currently the file input allows uploading of multiple files. However i want my users to select only one file. See my code below: However when I select multiple files it still sends multiple files to my end point. Even though I have made Uploadefile[] to Uploadedfile.
export class PhotoEditorComponent implements OnInit {
user: UserDto;
Url: string;
formData: FormData;
files: UploadFile;
uploadInput: EventEmitter<UploadInput>;
humanizeBytes: Function;
dragOver: boolean;
constructor(private userService: UserService, private sharedService: SharedService, private toastrService: ToastrService) {
this.loadUser();
this.uploadInput = new EventEmitter<UploadInput>();
this.humanizeBytes = humanizeBytes;
this.Url = environment.appUrl + 'user/' + this.sharedService.userId + '/photo';
}
loadUser() {
this.userService.currentMessage.subscribe((cuser: UserDto) => this.user = cuser);
}
showFiles() {
if (this.files) {
return this.files.name;
}
return '';
}
startUpload(): void {
const event: UploadInput = {
type: 'uploadAll',
url: this.Url,
method: 'PUT',
data: { foo: 'bar' },
headers: {'Authorization' : 'Bearer ' + localStorage.getItem('token') }
};
this.files = undefined;
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 = undefined;
this.files = 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 = null;
} else if (output.type === 'done') {
const statusCode = output.file.responseStatus;
if (statusCode === 200) {
this.user = output.file.response as UserDto;
this.userService.SetCurrentUser(this.user);
this.toastrService.success('Your photo image was successfully uploaded');
} else if (statusCode === 400) {
this.toastrService.error('Invalid file format');
} else {
this.toastrService.error('Your photo image was not uploaded');
}
} else if (output.type === 'dragOver') {
this.dragOver = true;
} else if (output.type === 'dragOut') {
} else if (output.type === 'drop') {
this.dragOver = false;
}
this.showFiles();
}
ngOnInit() {
}
Damian Gemza staff answered 6 years ago
Dear @vazom
In our File Uploader there's no option to send only one file. But I have checked the ngx-uploader repository (on this uploader is based our uploader), and there I have read about setting the 'file' key in startUpload() event const.
Please try to set file: this.files[0], and then manually clear every other files than this.files[0].
Here you can read more about this: LINK.
Best Regards,
Damian
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 6.3.0
- Device: Del laptop
- Browser: chrome
- OS: Windows 10
- Provided sample code: Yes
- Provided link: No