Topic: Select Only one file at time on File Input ( how to disable Multiselect in File input)

vazom pro asked 5 years ago


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 5 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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: 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