How to get uploaded file in javascript

I want to upload a csv file and process the data inside that file. What is the best method to do so? I prefer not to use php script. I did the following steps. But this method only returns the file name instead of file path.So i didnt get the desired output.

function importPortfolioFunction( arg ) {
    var f = document.getElementById( 'importPfForm' );
    var fileName= f.datafile.value;   
}

So how can i get the data inside that file?

asked May 12, 2013 at 8:01

2

The example below is based on the html5rocks solution. It uses the browser's FileReader() function. Newer browsers only.

See http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files

In this example, the user selects an HTML file. It is displayed in the </code>.</p><pre><code><form enctype="multipart/form-data"> <input id="upload" type=file accept="text/html" name="files[]" size=30> </form> <textarea class="form-control" rows=35 cols=120 id="ms_word_filtered_html">

Vegas

7,1771 gold badge9 silver badges13 bronze badges

answered Sep 15, 2016 at 16:15

Andrew MurphyAndrew Murphy

1,2391 gold badge11 silver badges10 bronze badges

3

The example below shows the basic usage of the FileReader to read the contents of an uploaded file. Here is a working Plunker of this example.

function init() {
  document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);
}

function handleFileSelect(event) {
  const reader = new FileReader()
  reader.onload = handleFileLoad;
  reader.readAsText(event.target.files[0])
}

function handleFileLoad(event) {
  console.log(event);
  document.getElementById('fileContent').textContent = event.target.result;
}

answered Jun 24, 2019 at 13:29

Mark LagendijkMark Lagendijk

5,7432 gold badges32 silver badges22 bronze badges

1

There exist some new tools on the blob itself that you can use to read the files content as a promise that makes you not have to use the legacy FileReader

// What you need to listen for on the file input
function fileInputChange (evt) {
  for (let file of evt.target.files) {
    read(file)
  }
}

async function read(file) {
  // Read the file as text
  console.log(await file.text())
  // Read the file as ArrayBuffer to handle binary data
  console.log(new Uint8Array(await file.arrayBuffer()))
  // Abuse response to read json data
  console.log(await new Response(file).json())
  // Read large data chunk by chunk
  console.log(file.stream())
}

read(new File(['{"data": "abc"}'], 'sample.json'))

answered Jul 30, 2021 at 22:35

EndlessEndless

30.5k11 gold badges100 silver badges125 bronze badges

1

Try This

document.getElementById('myfile').addEventListener('change', function() {


          var GetFile = new FileReader();
        
           GetFile .onload=function(){
                
                // DO Somthing
          document.getElementById('output').value= GetFile.result;
        
        
        }
            
            GetFile.readAsText(this.files[0]);
        })

answered Jul 30, 2021 at 10:19

borma425borma425

1744 silver badges15 bronze badges

1

FileReaderJS can read the files for you. You get the file content inside onLoad(e) event handler as e.target.result.

answered Oct 11, 2018 at 9:25

SlawaSlawa

1,07713 silver badges21 bronze badges

How do I save an uploaded JavaScript file?

How js file upload works?

Can we upload file using JavaScript?

How do I find my uploaded files in HTML?