Uploading Text File to Input in Html/JS

Question

I have an input type file in a form that I would like to be immediately read as a text file and used to update the value of a text input:

HTML:

<input type=file id='uploadfile' name='uploadfile' onchange="uploadCoordinates(this.form)">

JS:

function uploadCoordinates(form) {
       var file=form.uploadfile.value;
       var reader=new FileReader();
       reader.readAsText(file.value);
       form.coordinates.value=reader.result; 
}

Howveer, I get the following error: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMFileReader.readAsText]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: https://portal.nersc.gov/project/als/ShirleyXAS/ShirleyXAS.js :: uploadCoordinates :: line 142" data: no]

possible duplicate of Is it possible to upload a text file to input in HTML/JS? — Jukka K. Korpela
– Jukka K. Korpela, Commented Sep 27, 2013 at 5:01

cons0ul · Accepted Answer · 2012-03-23 00:03:46Z

1

try this there is error you are trying to read value.value

Correct code is

JS: function uploadCoordinates(form) {
       var file=form.uploadfile.value;
       var reader=new FileReader();
       reader.readAsText(file);
       form.coordinates.value=reader.result; }

answered Mar 23, 2012 at 0:03

cons0ul

792 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cannicide · Accepted Answer · 2016-11-01 21:37:30Z

A better way to do this by fixing the error is to further modify your code and @cons0ul's code.

var rPreviousText;
function uploadCoordinates(formVal) {
   var file = form.uploadfile;
   var reader = new FileReader();
   reader.readAsText(file.value);
   form.coordinates.value = reader.result;
   rPreviousText = reader.result;
   showReadersText(reader.result);
}
function showReadersText(val) {
   alert(val); //I recommend using something better than alert.
}

This is far more reliable than either codes and has a method of showing the reader text that is in their txt file. If you don't need the showReadersText(), just delete it and replace it with whatever code you need. Please not that FileReader is not browser-friendly in more than half of the major browsers. It works well in Chrome, Firefox, and IE (at least when I tested them).

Collectives™ on Stack Overflow

Uploading Text File to Input in Html/JS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related