2
Answers

how get filename the uploaded from array and save filename

bishoe nb

bishoe nb
5y
5.9k
1
 how get filename the uploaded from array and save filename
 
angular 7
  1. import { Component, OnInit ,Output, EventEmitter, Injectable} from '@angular/core';  
  2. import { HttpEventType, HttpClient } from '@angular/common/http';  
  3.   
  4. Injectable({  
  5.   providedIn: 'root'  
  6. })  
  7.   
  8. @Component({  
  9.   selector: 'app-upload',  
  10.   templateUrl: './upload.component.html',  
  11.   styleUrls: ['./upload.component.scss']  
  12. })  
  13. export class UploadComponent implements OnInit {  
  14.   fileToUpload : File = null;  
  15.   imageUrl : string = "/assets/img/default-image.png";  
  16.   
  17.   public progress: number;  
  18.   public message: string;  
  19.   @Output() public onUploadFinished = new EventEmitter();  
  20.    constructor(private http: HttpClient) { }  
  21.    
  22.   ngOnInit() {  
  23.   }  
  24.   public imagepath :string;  
  25.   
  26.   public uploadFile = (files) => {  
  27.     if (files.length === 0) {  
  28.       return;  
  29.         
  30.     }  
  31.      
  32.     let filesToUpload : File[] = files;  
  33.     const formData = new FormData();  
  34.         
  35.     Array.from(filesToUpload).map((file, index) => {  
  36.       
  37.       return formData.append('file'+index, file, file.name);  
  38.       var xs = file.name;  
  39.   
  40.       
  41.     });  
  42.    
  43.        
  44.   
  45.     this.http.post('https://localhost:44318/api/Upload', formData, {reportProgress: true, observe: 'events'})  
  46.       .subscribe(event => {  
  47.         if (event.type === HttpEventType.UploadProgress)  
  48.           this.progress = Math.round(100 * event.loaded / event.total);  
  49.         else if (event.type === HttpEventType.Response) {  
  50.           this.message = 'Upload success.';  
  51.           this.onUploadFinished.emit(event.body);  
  52.         }  
  53.       });  
  54.   }  
  55.    
  56.   
  57.     
  58. }  
  1. <div class="row" style="margin-bottom:15px;">    
  2.   <div class="col-md-3">    
  3.  <input type="file" #file placeholder="Choose file" (change)="uploadFile(file.files)" style="display:none;" multiple>      
  4.     
  5.     <button t  type="button" class="btn btn-success" (click)="file.click()">Upload File</button>    
  6.   </div>    
  7.   <div class="col-md-4">    
  8.     <span class="upload" *ngIf="progress > 0">    
  9.       {{progress}}%    
  10.     </span>    
  11.     <span class="upload" *ngIf="message">    
  12.       {{message}}    
  13.     </span>    
  14.   </div>    
  15. </div>  
this method work but can't get file name from input because file input create in run time
 
 
  1. //get filename the uploaded    
  2.  files: any[];    
  3.      
  4.  onClickUploadDocument(event){    
  5.      console.log("clicked");    
  6.      var file = event.target.files;    
  7.      this.files = []; // clear the array before pushing your values into it.    
  8.    
  9.    //  console.log(file);    
  10.      for (let i = 0; i < file.length; i++) {    
  11.        let fileInfo = file[i];    
  12.      //  console.log(fileInfo);    
  13.        this.files.push(fileInfo);    
  14.   }
  15.  }    
  1. <input type="file" id="uploadFile" style="display: none" (change)='onClickUploadDocument($event)' multiple>  
  2. <label for="uploadFile" class="btn btn-primary">Upload Documents</label>  
  3. <table cellpadding="4" class="grid" >  
  4. <tbody>  
  5. <tr *ngFor="let file of files ;let i = index">  
  6. <td> {{i}}</td>  
  7. <input type="text" name="id" #id="ngModel" [(ngModel)]=file.name>  
  8.   
  9. </tr>  
  10. </tbody>  
  11. </table> 
Answers (2)
Next Recommended Forum