CODEWITHSUNDEEP
angular
Abhishek Singh
Abhishek Singh

Reputation: 910

Showing the pic before uploading angular 2

I am using ng2fileupload to upload the pic to the server the code is working the fine and the image is getting uploaded but I want to show the image before sending it to the server for uploading my code is given below

  <img src="" >

  <input type="file" placeholder="Upload file"  ng2FileSelect [uploader]="uploader">
  <button class="btn btn-success btn-s" role="submit" (click)="uploader.uploadAll()" [disabled]="passwordForm.valid">
      Update 
  </button>

I am not able to get the path of the image so I am not able to send it to src of img tag. Any help is appreciated.

Upvotes: 1

Views: 53

Answers (1)

theGleep
theGleep

Reputation: 1187

Here is a link to an article that shows you how to do just what you want to do. It just doesn't use Angular to do it. https://scotch.io/tutorials/use-the-html5-file-api-to-work-with-files-locally-in-the-browser.

Basically, you need to use the file api to convert the file into a data URL, and set the "src" to that url.

Upvotes: 1

Related Questions