Local path to file #368

New Issue

2016-08-25T13:44:28Z

askurdjel commented

2016-08-25 13:44:28 +00:00

(Migrated from github.com)

Hi there,

is there any property where is saved local path to file before upload, or any other way how I can get this path

thank you

Hi there, is there any property where is saved local path to file before upload, or any other way how I can get this path thank you

👍 2

IpaliboWhyte commented

2016-09-07 20:52:26 +00:00

(Migrated from github.com)

I'm not 100% sure that you can get the full local path at least not on chrome.

However, if you're just looking to show a preview of the selected image before you upload it you can simply use FileReader, example:

component.ts

  onImageChange(event) {
    var reader = new FileReader();
    var image = this.element.nativeElement.querySelector('#myImage');

    reader.onload = function(e: any) {
        var src = e.target.result;
        image.src = src;
    };
    reader.readAsDataURL(event.target.files[0]);
  }

view.html

<div>
  <input type="file" (change)="onImageChange($event)" ng2FileSelect [uploader]="uploader" />
</div>
<img id="myImage" [src]="p.image_url" alt=""> // you don't need [src] attr in this example

don't forget import { ElementRef } from '@angular/core'

Let me know if this helps :)

I'm not 100% sure that you can get the full local path at least not on chrome. However, if you're just looking to show a preview of the selected image before you upload it you can simply use FileReader, example: **component.ts** ``` onImageChange(event) { var reader = new FileReader(); var image = this.element.nativeElement.querySelector('#myImage'); reader.onload = function(e: any) { var src = e.target.result; image.src = src; }; reader.readAsDataURL(event.target.files[0]); } ``` **view.html** ``` <div> <input type="file" (change)="onImageChange($event)" ng2FileSelect [uploader]="uploader" /> </div> <img id="myImage" [src]="p.image_url" alt=""> // you don't need [src] attr in this example ``` don't forget `import { ElementRef } from '@angular/core'` Let me know if this helps :)

👍 1

findbl0k commented

2017-06-08 03:13:02 +00:00

(Migrated from github.com)

This code works great. To anyone copy and pasting this code, make sure to remove the p.image_url (set [src]="") or else you will get this pesky error in your console:

ERROR TypeError: Cannot read property 'image_url' of undefined

This code works great. To anyone copy and pasting this code, make sure to remove the p.image_url (set [src]="") or else you will get this pesky error in your console: `ERROR TypeError: Cannot read property 'image_url' of undefined`

holtzilya2008 commented

2018-04-22 13:37:15 +00:00

(Migrated from github.com)

Hi,

I also need the local path.
With IpaliboWhyte solution we can get only the base64 for images.
lets say I need to show the local path to the user to confirm upload:

<div>
    ...    
    <p>You have selected the file: {{localPathToFile}} </p>
    <button>Upload</button>
<div>

Hi, I also need the local path. With _IpaliboWhyte_ solution we can get only the base64 for images. lets say I need to show the local path to the user to confirm upload: ``` <div> ... <p>You have selected the file: {{localPathToFile}} </p> <button>Upload</button> <div> ```

👍 1

4ntibala commented

2018-12-10 14:44:17 +00:00

(Migrated from github.com)

https://stackoverflow.com/questions/15201071/how-to-get-full-path-of-selected-file-on-change-of-input-type-file-using-jav

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#368