How to store an image that has been uploaded.

Question

How do I store the image that will be uploaded to the input type file into a variable to then be previewed into the DOM? I'm using a MEAN stack if this helps with an answer.

            <form method="post">
                <label class="app-file-input button" flow-init>
                    <span>Upload</span>
                    <i class="icon-enter"></i>
                    <input type="file" flow-btn/>
                    <img flow-img="$flow.files[0]" />
                </label>
            </form>

I've read once the image has been uploaded it gets stored in a temp storage. How would I access that to then preview the image before uploading?

Cheers

you may need add `enctype="multipart/form-data"` to your form attributes — Antoine Pointeau, Dec 29 '15 at 11:59
perhaps [this question](http://stackoverflow.com/questions/22087076/how-to-make-a-simple-image-upload-using-javascript-html) will help you — Appelemac, Dec 29 '15 at 12:00

score 1 · Accepted Answer · edited May 23 '17 at 12:04

1

You need to do it the Angular way... If you are trying to implement your own solution you can use this simple code: https://stackoverflow.com/a/31952876/407245

However if I were you, I would use something like this https://github.com/danialfarid/ng-file-upload or https://github.com/nervgh/angular-file-upload

edited May 23 '17 at 12:04

Community

1
1

answered Dec 29 '15 at 13:11

Chris Cinelli

4,103
3
25
38

Why would you use something like that instead of writing it yourself out of interest? – MaxwellLynn Dec 29 '15 at 13:52

score 0 · Answer 2 · edited May 23 '17 at 10:28

0

This is whats i got for you :

Please take a look at the sample JS code below:

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}



 $(document ).on('change','#imgInp' , function(){ readURL(this); });

and the associated HTML:

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>

See DEMO

Referal

edited May 23 '17 at 10:28

Community

1
1

answered Dec 29 '15 at 12:14

Amar Singh

4,757
2
21
45

I've seen this answer in another post. I've tried to implement it but when I choose an image it doesn't update the dom. Not even a console.log error. I'm putting the script in my controller. Maybe there is something that is blocking it – MaxwellLynn Dec 29 '15 at 12:16
any ideas of why this might be – MaxwellLynn Dec 29 '15 at 12:17
on which browser you are trying ? – Amar Singh Dec 29 '15 at 12:20
Chrome latest. The Demo works may i add, but on my MEAN stack it doesn't work at all – MaxwellLynn Dec 29 '15 at 12:22
which stack ? i dint get it – Amar Singh Dec 29 '15 at 12:44
I'm now getting this error. Cannot read property 'files' of undefined. Any ideas? – MaxwellLynn Dec 29 '15 at 12:48
alert input value in readURL function and check if any value is being passed – Amar Singh Dec 29 '15 at 12:57
TRY `$(document ).on('change','#imgInp' , function(){ readURL(this); });` – Amar Singh Dec 29 '15 at 13:44
Thanks Yo Yo, The answer above has been more prudent in this occasion. Thank you for your help. – MaxwellLynn Dec 29 '15 at 14:26
@MaxwellLynn :if this helped than i wont mind if you upvote d answer – Amar Singh Dec 30 '15 at 16:07
Sorry Yo Yo, It was the other answer that helped me. Thank you for your help – MaxwellLynn Dec 31 '15 at 15:15

How to store an image that has been uploaded.

2 Answers2