Stock files in an Array using onFileSelected in ng2-file-upload #1128

New Issue

2019-11-13T11:39:39Z

ER-GAIBI commented

2019-11-13 11:39:39 +00:00

(Migrated from github.com)

Hi everyone,

How can I stock multiple files in an array to send them in a request ?

in the inerface user I can select multiple files :

<input id="uploadDocument" type="file" name="filename" ng2FileSelect (onFileSelected)="onFileSelected($event)" [uploader]="uploader" multiple />

here is my TypeScript :

public uploader:FileUploader;
	public hasBaseDropZoneOver:boolean;
	public response:string;
	public filesToUpload: Array<File>;

	constructor(private dialog: MatDialog) {this.filesToUpload = [];}

	ngOnInit() {
		this.uploader = new FileUploader({
			url: URL,
			disableMultipart: true, // 'DisableMultipart' must be 'true' for formatDataFunction to be called.
			formatDataFunctionIsAsync: true,
			formatDataFunction: async (item) => {
				return new Promise( (resolve, reject) => {
					resolve({
						name: item._file.name,
						length: item._file.size,
						contentType: item._file.type,
						date: new Date()
					});
				});
			}

		});
		this.hasBaseDropZoneOver = false;
		this.response = '';

		this.uploader.response.subscribe( res => this.response = res );
	}

	public onFileSelected(fileInput: any) {
		this.filesToUpload.push(fileInput.target.files)
		for(var i =0; i < this.filesToUpload.length; i++){
			console.log(this.filesToUpload[i]);
			console.log(this.filesToUpload[i].name);
		}
	}

Hi everyone, **How can I stock multiple files in an array to send them in a request ?** in the inerface user I can select multiple files : `<input id="uploadDocument" type="file" name="filename" ng2FileSelect (onFileSelected)="onFileSelected($event)" [uploader]="uploader" multiple />` here is my TypeScript : ``` public uploader:FileUploader; public hasBaseDropZoneOver:boolean; public response:string; public filesToUpload: Array<File>; constructor(private dialog: MatDialog) {this.filesToUpload = [];} ngOnInit() { this.uploader = new FileUploader({ url: URL, disableMultipart: true, // 'DisableMultipart' must be 'true' for formatDataFunction to be called. formatDataFunctionIsAsync: true, formatDataFunction: async (item) => { return new Promise( (resolve, reject) => { resolve({ name: item._file.name, length: item._file.size, contentType: item._file.type, date: new Date() }); }); } }); this.hasBaseDropZoneOver = false; this.response = ''; this.uploader.response.subscribe( res => this.response = res ); } public onFileSelected(fileInput: any) { this.filesToUpload.push(fileInput.target.files) for(var i =0; i < this.filesToUpload.length; i++){ console.log(this.filesToUpload[i]); console.log(this.filesToUpload[i].name); } } ```

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#1128