how to get the path of an uploaded file in reactjs

Question

how to get the path of an uploaded file in reactjs. I use the file upload to upload a file

render() {
  return (
    <div>
      <input type="file" onChange={this.fileChangedHandler} />
      <button onClick={this.uploadHandler}>Upload!</button>
    </div>
  )
}

then bind the uploadHandler

this.uploadHandler = this.uploadHandler.bind(this)

and

uploadHandler = () => { 
  console.log("the selected file is : "+this.state.selectedFile.name)
}

Here I'm getting its name. I want to get the file path.

Is your file uploaded into server? If not, you cannot access file path, because there are no path to file uploaded onto the server — Azamat Zorkanov, Jul 19 '18 at 11:28
In this case, I guess it is not possible: https://stackoverflow.com/a/15201258/5709697 — Azamat Zorkanov, Jul 19 '18 at 11:35
You can't read files, directories in client side with javascript. You need to upload it first and read file path in server side then send response of file's path from server. — Tamer Durgun, Jul 19 '18 at 11:40
What is your use case? What do you want to do with the file path? — Tholle, Jul 19 '18 at 11:42
Thanks for let me know that i can only get the file path from the server and can't read files in client side.. I think that i can grab the file using the file path.. Thanks — Renjith Stephen, Jul 19 '18 at 11:55
@RenjithStephen You can use a [FileReader](https://developer.mozilla.org/en-US/docs/Web/API/FileReader) if you want to use the data directly in the browser. — Tholle, Jul 19 '18 at 12:14
Refer to this question https://stackoverflow.com/questions/55726630/how-to-display-file-name-with-javascript-after-upload — Ali Torki, Mar 18 '20 at 10:07

score 5 · Answer 1 · answered Nov 03 '18 at 16:05

If you want to upload an image without posting to a server, you can use base64.

reactjs:

   this.state = {
     imgUpload: '',
   }

...

  this.getBase64 = this.getBase64.bind(this)

...

  getBase64(e) {
    var file = e.target.files[0]
    let reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
      this.setState({
        imgUpload: reader.result
      })
    };
    reader.onerror = function (error) {
      console.log('Error: ', error);
    }
  }

...

  <div>
    <input type="file" className="input-file" name="imgUpload" accept='.png' onChange={this.getBase64} />
  </div>

Then you can use {this.state.imgUpload} to access the base64 string and can manipulate the image.

how to get the path of an uploaded file in reactjs

1 Answers1