CODEWITHSUNDEEP
javascripthtmlangularinput
Aswin KV
Aswin KV

Reputation: 1750

How to show the preview of the input photo in page?

I have an img tag and an input type file,

Functionality

The functionality is i will input one jpg file using input type file, i need to show this image in the image tag.

How is it possible in angular 2 ?

My tries I tried to get the file path on change event of input button and assign it to the src of image file.

Tried to solve it using an external js file.

but both these tries are failure, whats the solution for this.

Code

HTML

   <img [src]="imagePath" width="100px">
   <input type="file" multiple (change)="onUpload(input)" #input >

Component.ts

import { Component, OnInit, NgModule } from '@angular/core';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
})
export class FormComponent implements OnInit {
//DECLARATION
  imagePath:string;

  constructor() { 
    this.onInitial();
    }

  ngOnInit() {}

  onInitial(){
    this.imagePath="../../assets/images/1.jpg"
  }
  onUpload(event){
    console.log(event);
  }

}

What the code i need to write inside the onUpload() to assign the path of the input image to the variable imagePath.

Please help me.

Upvotes: 1

Views: 1062

Answers (2)

Aswin KV
Aswin KV

Reputation: 1750

At last i got the answer my self,

https://github.com/ribizli/ng2-imageupload

this will work for you. It may help you for this issue.

Upvotes: 0

guest271314
guest271314

Reputation: 1

Have not tried Angular2. Though you should be able to set img src to Blob URL of first File object of input.files FileList.

At chromium, chrome you can get webkitRelativePath from File object, though the property is "non-standard" and possibly could be set to an empty string; that is, should not be relied on for the relative path to the selected file at user filesystem.

File.webkitRelativePath

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

File

The webkitRelativePath attribute of the File interface must return the relative path of the file, or the empty string if not specified.

4.10.5.1.18. File Upload state (type=file)

EXAMPLE 16 For historical reasons, the value IDL attribute prefixes the file name with the string "C:\fakepath\". Some legacy user agents actually included the full path (which was a security vulnerability). As a result of this, obtaining the file name from the value IDL attribute in a backwards-compatible way is non-trivial.

See also How FileReader.readAsText in HTML5 File API works?

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <img src="" width="100px" alt="preview">
  <input type="file" multiple onchange="onUpload(this)" id="input" accepts="image/*" />
  <br><label for="input"></label>
  <script>
    let url;
    function onUpload(element) {
      console.log(element)
      let file = element.files[0];
      if (url) {
        URL.revokeObjectURL(url);
      }
      url = URL.createObjectURL(file);
      if ("webkitRelativePath" in file 
          && file.webkitRelativePath !== "") {
        element.labels[0].innerHTML = file.webkitRelativePath;
      } else {
        element.labels[0].innerHTML = element.value;
      }
      element.previousElementSibling.src = url;
      element.value = null;     
    }
  </script>
</body>

</html>

Upvotes: 2

Related Questions