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() {

}