How to access file upload selected file without changing page using javascript?

Question

I need to create a file upload field which I have below:

<div class="col-xs-4 col-md-4 form-group">
    <label for="file-upload" >File Upload</label>
    <input type="file" id="file-upload"/>
</div>

How do I access the contents of the selected file without going to another page or adding anything to the URL in Javascript?

Mohammad · Accepted Answer · 2016-04-30T14:59:49.640

3

Use this simple code

var inputFile = document.getElementById("file-upload");

inputFile.addEventListener("change", function(){
    var files = inputFile.files;
    console.log(files[0]);
    alert(files[0].name);
});

<input type="file" id="file-upload"/>

edited Apr 30 '16 at 14:59

answered Apr 30 '16 at 14:53

Mohammad

21,175
15
55
84

Yeahthat is what I have but how do I get the contents of the file I choose other than its name – Andrew O Neill Apr 30 '16 at 15:03
All content of file is in object that named files. see your console after selecting file. – Mohammad Apr 30 '16 at 15:09
where in the console will I see the text that is in the file? for instance am I able call files[0].text? – Andrew O Neill Apr 30 '16 at 15:15
After selecting file, content of selected file writed in console. To see browser console press F12 key then click on console tab on top of opened panel. – Mohammad Apr 30 '16 at 15:18
Yes I see the file in the console, how do I get the text from the file I have selected? – Andrew O Neill Apr 30 '16 at 15:22
for instance, I have a text file with "hello world" in it. I see the file details in the console. How do I get "hello world" from that file? – Andrew O Neill Apr 30 '16 at 15:37
Exuse me for my late. See http://stackoverflow.com/questions/27522979/read-a-local-textfile-using-javascript – Mohammad Apr 30 '16 at 15:41
That is awesome . Thank You so much – Andrew O Neill Apr 30 '16 at 15:48

How to access file upload selected file without changing page using javascript?

1 Answers1