how get filename the uploaded from array and save filename
angular 7
- import { Component, OnInit ,Output, EventEmitter, Injectable} from '@angular/core';
- import { HttpEventType, HttpClient } from '@angular/common/http';
- Injectable({
- providedIn: 'root'
- })
- @Component({
- selector: 'app-upload',
- templateUrl: './upload.component.html',
- styleUrls: ['./upload.component.scss']
- })
- export class UploadComponent implements OnInit {
- fileToUpload : File = null;
- imageUrl : string = "/assets/img/default-image.png";
- public progress: number;
- public message: string;
- @Output() public onUploadFinished = new EventEmitter();
- constructor(private http: HttpClient) { }
- ngOnInit() {
- }
- public imagepath :string;
- public uploadFile = (files) => {
- if (files.length === 0) {
- return;
- }
- let filesToUpload : File[] = files;
- const formData = new FormData();
- Array.from(filesToUpload).map((file, index) => {
- return formData.append('file'+index, file, file.name);
- var xs = file.name;
- });
- this.http.post('https://localhost:44318/api/Upload', formData, {reportProgress: true, observe: 'events'})
- .subscribe(event => {
- if (event.type === HttpEventType.UploadProgress)
- this.progress = Math.round(100 * event.loaded / event.total);
- else if (event.type === HttpEventType.Response) {
- this.message = 'Upload success.';
- this.onUploadFinished.emit(event.body);
- }
- });
- }
- }
- class="row" style="margin-bottom:15px;">class="col-md-3">
- "file" #file placeholder="Choose file" (change)="uploadFile(file.files)" style="display:none;" multiple>
- class="btn btn-success" (click)="file.click()">Upload File
class="col-md-4">- class="upload" *ngIf="progress > 0">
- {{progress}}%
- class="upload" *ngIf="message">
- {{message}}
this method work but can't get file name from input because file input create in run time

- //get filename the uploaded
- files: any[];
- onClickUploadDocument(event){
- console.log("clicked");
- var file = event.target.files;
- this.files = []; // clear the array before pushing your values into it.
- // console.log(file);
- for (let i = 0; i < file.length; i++) {
- let fileInfo = file[i];
- // console.log(fileInfo);
- this.files.push(fileInfo);
- }
- }
- "file" id="uploadFile" style="display: none" (change)='onClickUploadDocument($event)' multiple>
- ="uploadFile" class="btn btn-primary">Upload Documents
"4" class="grid" >
"let file of files ;let i = index"> {{i}} - "text" name="id" #id="ngModel" [(ngModel)]=file.name>

bishoe nbPosted Nov 7, 2019, 2:53 AM
Ronika JencyPosted Nov 7, 2019, 12:31 AM