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 //www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files

In this example, the user selects an HTML file. It is displayed in the .

function handleFileSelect[evt] {
    let files = evt.target.files; // FileList object

    // use the 1st file from the list
    let f = files[0];
    
    let reader = new FileReader[];

    // Closure to capture the file information.
    reader.onload = [function[theFile] {
        return function[e] {
          
          jQuery[ '#ms_word_filtered_html' ].val[ e.target.result ];
        };
      }][f];

      // Read in the image file as a data URL.
      reader.readAsText[f];
  }

  document.getElementById['upload'].addEventListener['change', handleFileSelect, false];

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?