Category : file-upload

I want to make uploading form for plural files this is component’s HTML code <div class="file-input cursor" [class.pointer]="!disabled" appFileChooser (filesChange)="handleFiles($event)" accept="*" [multiple]="true" [disabled]="disabled" >upload </div> this is handleFiles function of component ts file handleFiles(files: File[]): void { const file = files[0]; console.log(files) this.uploadService.upload(file).subscribe(res => { console.log(res); this.image = res.url; }); } this is upload method ..

Read more

I’m writing a drop folder/file area in my Angular project, but for some reason the items array and files object (of a dropped file/folder) are always empty HTML: <div class="files" (drop)="dropFiles($event)"></div> Code in the component class: dropFiles(ev) { console.log(ev.dataTransfer); } Console.log output: dropEffect: "none" effectAllowed: "all" files: FileList {length: 0} items: DataTransferItemList {length: 0} types: ..

Read more

I am trying to upload two FormField objects along with form data to express. The part im stuck at is using the multer library in express to extract this data from the request. I can access the form data but not the FormField objects. in angular: requestBooking(formFields, aPics:Array<File>,bPics:Array<File>): { const aaPics = new FormData(); const ..

Read more

songService songCreate(song){ console.log(song); const formData: FormData = new FormData(); for (let i = 0; i < song.song.files.length; i++) { console.log(song.song.files[i]); formData.append(‘song’, song.song.files[i], song.song.files[i].name); } return this.http.post<any>(`${config.apiUrl}/songs`,formData,{ reportProgress: true, observe: ‘events’ }); } component this.songService.songCreate(data) .pipe(first()) .subscribe((event: HttpEvent<any>) => { console.log(event); switch (event.type) { case HttpEventType.Sent: console.log(‘Request has been made!’); break; case HttpEventType.ResponseHeader: console.log(‘Response header has ..

Read more

I’m struggling with this issue. I have a form where I create an item, and this item can have a thumbnail. In order to upload the image I used the ngx-mat-file-input library. And I create the upload as follows: component.html: <mat-form-field> <ngx-mat-file-input #photo formControlName="photo" placeholder="Image" (change)="onAddImage($event)"></ngx-mat-file-input> <button mat-icon-button matSuffix *ngIf="!photo.empty" (click)="photo.clear($event); "> <mat-icon matSuffix>clear</mat-icon> </button> ..

Read more