0

I'm new to react, my objective is to upload file and should get the filepath i.e., if i upload file from D drive then the path should be "D:\files\hi.pdf" but here neither i could upload the file nor i could get the path. I have gone through the link How to resolve the C:\fakepath? I tried to apply in my code but didn't worked out.

Here is the code:

 <>
        <div className="fileInput">
          <Input
            type="text"
            placeholder="File 1"
            id="file-path"
            readonly
            name="fileName"
            value={this.state.fileName}
          />
          <Input
            type="file"
            id="file-id"
            name="file"
            onChange={this.FileUpload}
          />
          <Button icon="paperclip" />
        </div>
        <Button onClick={this.handleSubmit}>Submit</Button>
      </>

Here is the full code

Can anyone please help me in uploading and getting path while uploading file?

Arunya
  • 281
  • 2
  • 11
  • Not sure why would you need a client file path? Any specific use case ? – Panther May 08 '20 at 07:58
  • As said in the question you linked: this is a security implementation of browsers. You should not be allowed to know an origin filesystem path of an uploaded file. – keul May 08 '20 at 08:06
  • @Panther - Hi, Yes i want client file path because i'm using sendgrid for sending emails. sendgrid mail helper attachment using in backend - it is taking path. So that's why we need client file path – Arunya May 08 '20 at 08:08
  • @keul - As given in the link, even though i'm not getting atleast fakefilepath also. if we upload from our client file path then it is converting into fakepath due to security reason. Even i couldn't see atleast fakepath also. i want to get atleast fakepath while uploading the file – Arunya May 08 '20 at 08:11
  • document.getElementById("file-id").files[0].name; – gakeko betsi May 08 '20 at 08:13
  • document.getElementById("file-id").files[0].path – gakeko betsi May 08 '20 at 08:13
  • i think the path should be on the server not the user. Hope sendgrid is running on the server and you are uploading the file. The server can never access the users machine. The file content will be uploaded in the request and you should store it temp on the server and may be provide that path to the sendgrid. – Panther May 08 '20 at 08:15
  • @gakekobetsi - Hi, Could you please preview the candbox, i have given the above code but don't know why it is not working even it is not allowing to choose file also – Arunya May 08 '20 at 08:15
  • @Panther - i tried with formData but still it is not working... in Swagger it is taking client path. – Arunya May 08 '20 at 08:17
  • not sure what you have tried.. as there is no server code shared here.. you need to save the file that you receive from the request and use that path – Panther May 08 '20 at 08:43
  • @Panther - Didn't get you.. my objective is to upload the file, and want to get the file path while uploading instead of name of the file. Server needs our client path – Arunya May 08 '20 at 08:45
  • yes.. That is right.. Client gets the file content and sends it to the server. The content received is converted to a file and is saved by the server to a path. This saved path is sent to your lib / send grid. Hope you are pretty new to UI/Uploading files.. – Panther May 08 '20 at 08:48
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/213397/discussion-between-arunya-and-panther). – Arunya May 08 '20 at 08:50

0 Answers0