CODEWITHSUNDEEP
angularangular5angular6
sathish kumar
sathish kumar

Reputation: 936

how to get the uploaded file url and name in ngx-input-file

How to get the file name after drag and drop the image in angular ngx-input-file.

Please look at the below example,

stackblitz

Here after select or drag and drop the image , how to get that dropped image name and path. I want that image url.

Upvotes: 3

Views: 4040

Answers (3)

error505
error505

Reputation: 1216

If you just want to get the first uploaded file Name and other properties then just do something like this:

HTML:

<input-file fileLimit="1" fileAccept="image/*" (change)="fileUpload($event)"></input-file>

Function:

fileUpload() {
    this.fileData = <File>this.InputFileComponent.files[0].file;
    if (this.fileData !== null) {
      ---call some other function---
   }    
}

You can also refere to the examle in their official Github Page.

Upvotes: 0

Abderrahim Soubai-Elidrisi
Abderrahim Soubai-Elidrisi

Reputation: 5202

Your HTML should be like this :

<input-file (change)="drop()"
    inputId="files"
    placeholder="My files"
    [(ngModel)]="file">
</input-file>

In Your ts file you define drop() function :

drop(): void {

    console.log( this.file);

}

Upvotes: -1

ProgrammerPer
ProgrammerPer

Reputation: 1191

You are able to retrieve file metadata. The InputFileComponent class exposes a files array as a public property. Each file in the array in turn has the following properties:

  • lastModified
  • lastModifiedDate
  • name
  • size
  • type
  • webkitRelativePath

I created a demo based on the link you gave, for you to play around with. Just run the demo, drop an image and then click on the text that says "Log files" and the data will show up in the console. Please adapt the code to suit your purposes.

HTML

<!-- app.component.html -->
<mat-toolbar color="primary">
    <div class="container">
        <a (click)="logFiles()"> Log files </a>
    </div>
</mat-toolbar>
<!-- etc. -->

TypeScript

// app.component.ts
import { Component, ViewChild } from '@angular/core';
import { InputFileComponent } from 'ngx-input-file';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})

export class AppComponent { 
   @ViewChild(InputFileComponent) 
   private InputFileComponent: InputFileComponent; 

   logFiles() { console.log(this.InputFileComponent.files); } 
}

Demo

StackBlitz

Upvotes: 3

Related Questions