1

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.

Aswin KV
  • 1,710
  • 2
  • 12
  • 23

2 Answers2

2

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>
Community
  • 1
  • 1
guest271314
  • 1
  • 15
  • 104
  • 177
  • i had tried this But the element object doesn't have file array. Getting this error . https://gyazo.com/fe9d29efa7bea44db8445c6003a1f4a0 – Aswin KV Nov 04 '16 at 21:42
  • Nothing appears at link. `FileList` does not return an array. – guest271314 Nov 04 '16 at 21:47
  • Is `input` defined at `(change)="onUpload(input)"`? – guest271314 Nov 04 '16 at 21:53
  • i changed to (change)="onUpload(input)" Now if ("webkitRelativePath" in file) { console.log(file.webkitRelativePath); } this condition is true but while loging the file.webkitRelativePath it will show blank – Aswin KV Nov 04 '16 at 21:57
  • There is no guarantee that `.webkitRelativePath` with be other than an empty string `""`. `element.value` should return `C:\fakepath\relativePathHere.ext` to resource, not full path to resource at user filesystem. See [4.10.5.1.18. File Upload state (type=file)](https://w3c.github.io/html/sec-forms.html#file-upload-state-typefile) , [How FileReader.readAsText in HTML5 File API works?](http://stackoverflow.com/questions/40146768/how-filereader-readastext-in-html5-file-api-works/40146883#40146883) – guest271314 Nov 04 '16 at 22:00
  • I had consoled File then i get the result as https://i.gyazo.com/f6d77108348319abd4d433dc17791fdc.png Only get the file name no file path is there – Aswin KV Nov 04 '16 at 22:04
  • @AswinKV Yes. Full path to file at user filesystem should not be included. The there is no guarantee that `.webkitRelativePath` will be other than an empty string `""`. Have you read the links at previous comment? Use `element.value` to get the `fakepath` – guest271314 Nov 04 '16 at 22:18
0

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.

Aswin KV
  • 1,710
  • 2
  • 12
  • 23