How can i read a file uploaded using dropzone without sending it to a backend in React?

Question

I'm trying to create a React app that reads a DICOM (.dcm) file from the user's computer and show it on a visor.

I manage to successfully pick the file using react-dropzone but i don't know how to get the file path in order to read it.

Checking other similar questions i read "you can only read the file in frontend, all manipulations must be done in backend" so i dont think i need to send the file to backend but i haven't been able to find an answer that works for me.

Here's my wrapper for dropzone:

                <Dropzone multiple={false} onDrop={acceptedFiles => this.updateState(acceptedFiles)}>
                  {({ getRootProps, getInputProps }) => (
                    <section>
                      <div {...getRootProps()}>
                        <input {...getInputProps()} />
                        <p>
                          Drag 'n' drop some files here, or click to select
                          files
                        </p>
                      </div>
                    </section>
                  )}
                </Dropzone>

Here's the updateState(acceptedFiles) method:

  updateState(acceptedFiles) {
    this.setState({Files:acceptedFiles});
    // i use this state to control that i have read a file.
    this.setState({leido:true});
    console.log(this.state.Files);
    console.log(this.state.leido);
    this.state.Files.map(file => (
      console.log(file.path)
    ))
  };

this.state.Files becomes an array of one element, but the path is apparently the same as the file name. When i try to read a file i always get the same error on console:

GET http://localhost:3000/filename.format 404 (Not Found)

How can i get a proper path to read the file? It's not necesary to manipulate it in any way.

_“how to get the file path in order to read it”_ - that’s not how this works, you don’t get the client file system path, that is hidden from your script for security reasons. You need to use the [FileReader API](https://developer.mozilla.org/en-US/docs/Web/API/FileReader) to read the contents of such a local file the user selected — 04FS, May 13 '19 at 12:50

score -1 · Answer 1 · answered May 13 '19 at 13:15

-1

See this answer, or try the below code:

onDrop={async ([file]) => {
  let reader = new FileReader();
  reader.onload = function(e) {
    const contents = e.target.result;
    displayContents(contents);
  };
  reader.readAsText(file);
}}

answered May 13 '19 at 13:15

Tomer

1,521
1
15
26

How can i read a file uploaded using dropzone without sending it to a backend in React?

1 Answers1