1

Please could you share a simple file upload sample that conveys the basics of such functionality when using Angular 2?

The research I did (am doing) keeps bubbling up older versions of Angular. At this point all I'm trying to do is load a small image file into a property, or local storage, and have it displayed on the webpage.

I imagine it implies the use of HttpClient however as I'm new to Angular 2 it's challenging to drum up the beginnings of how this works without leaning on a simple sample.

I'm trying this and it's not having the effect I was expecting. It feels like I'm missing an import. This portion is only trying to get the name of the file out, not the image rendered. It appears using [(ngModel)] is not an option, and I must resort to change event to get the selected file.

Component

@Component({
    selector:'home-page'
    ,templateUrl:'./home.page.html'
})
export class HomePageComponent{
    CurrentFile:File;
    public FileChangeEvent(fileInput:any){
        this.CurrentFile = fileInput.target.files[0];
    }
}

html

<div>
    <input type="file" (change)="FileChangeEvent($event)">
    <div *ngIf="CurrentFile">
        <p>{{CurrentFile.name}}</p>
    </div>
</div>
drmssst
  • 123
  • 2
  • 14
  • drmssst Angular is no longer called angularJS , its just angular .. the JS is reserved for angular 1.0x . – Alexander Solonik Nov 18 '17 at 17:55
  • Thanks...I didn't realise that. I'll see if I can change the title. – drmssst Nov 18 '17 at 18:03
  • I can't change the title, if a moderator can then please go ahead and change the AngularJS to Angular. Thx. – drmssst Nov 18 '17 at 18:09
  • I'm a little further now. I was able to extract the filename from the uploaded file. I'll update the question to reflect the code that achieves this. Now to next step of showing the image. – drmssst Nov 19 '17 at 00:00

3 Answers3

0

Everything you need there to upload files in Angular 2:

https://github.com/valor-software/ng2-file-upload

Iteration
  • 494
  • 2
  • 7
  • 18
  • Thank you for the suggestion. It does quite a bit and there is a section of simple-demo. I'm looking for something like input of type file that connects to a component property, then have that be a property that can be displayed as an image. I'll try to edit my question or add more commentary to build context. – drmssst Nov 18 '17 at 22:34
0

After a rough go of it I got what I think can be considered bare basics. There is no attempt to handle things such as when no image is selected, aside from when the page loads and file is unknown.

Component

@Component({
    selector:'home-page'
    ,templateUrl:'./home.page.html'
})
export class HomePageComponent{
    CurrentFile:File;
    ImageSource:string;

    public FileChangeEvent(fileInput:any){
        this.CurrentFile = fileInput.target.files[0];

        let reader = new FileReader();
        reader.onload = () => {
                this.ImageSource = reader.result;
            };
        reader.readAsDataURL(this.CurrentFile);
    }
}

HTML

<div>
    <input type="file" (change)="FileChangeEvent($event)">
    <div *ngIf="CurrentFile">
        <img [src]="ImageSource">
    </div>
</div>
drmssst
  • 123
  • 2
  • 14
0

You can use this answer to upload the file to your server:

https://stackoverflow.com/a/40216616/5413117

You can then for example upload it to azure and show the image through the azure storage link.

If you want to get rid of using the file changed event, although it works, you can write a control value accessor for file inputs, explained here:

https://stackoverflow.com/a/41938495/5413117

S. Robijns
  • 1,529
  • 3
  • 14
  • 17
  • Those are great links. Thanks. I'll likely come back to these as I evolve to the next step in my solution. – drmssst Nov 22 '17 at 02:26