Retrieve Absolute File Path With Javascript

Question

Lets say you have a web application that uses NodeJS and ReactJS. Both are working on your local machine. NodeJS is accepting some files that are selected from ReactJS GUI with a simple file upload. Like this :

<input type="file" id="fileUploaderInput" ref="fileUploader"/>

You want to pass this file to your NodeJS so that it will perform some big data operations. However, since the Browsers does not have the access to client's File System, you can not take the absolute path of the file selected. Hence you can not inform your NodeJS server about the file. What should be the best approach for this?

I tried reading the file with react and then write it to a path where NodeJS already knows, but it does not seem to me as a best approach.

Why do you need the absolute file path to upload a file to server? — jenil christo
– jenil christo, Commented Mar 21, 2019 at 13:12
"Both are working on your local machine" If that’s always the case, why not build a desktop app with e.g. Electron? — idmean
– idmean, Commented Mar 21, 2019 at 13:13
@jenilchristo Hi, there is no listener in my NodeJS that waits for a file. And I could not decide if it should since my app will always work on local machine with NodeJS and ReactJS. I just need absolue path of the file that lies in somewhere that NodeJS can read with simple var fs = require('fs'); — I.K.
– I.K., Commented Mar 21, 2019 at 13:20
@idmean Hi, thank you, I looked it up and this may be a good solution for my case. But still curious if there exists a simple way to achieve this without losing browser support. — I.K.
– I.K., Commented Mar 21, 2019 at 13:22
if you do persist in web app, say your back-end framework (ExpressJS/AdonisJS/...) — Gaspar
– Gaspar, Commented Mar 21, 2019 at 14:31

Peter Lehnhardt · Accepted Answer · 2019-03-21 13:19:23Z

1

If your app will always be sitting on your local machine, a desktop app via electron will be a valid approach (as idmean noticed). There you can use the nodejs module fs to work with files even in the frontend, which is enabled via inter-process-communication to the backend. If otherwise the nodejs-server will be sitting in the internet in the future, uploading the file and saving it via the nodejs-server is probably the best approach.

answered Mar 21, 2019 at 13:19

Peter Lehnhardt

5,0431 gold badge21 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jenil christo · Accepted Answer · 2019-03-21 13:51:36Z

0

It is not posible for a browser to get the absolute url of a file uploaded.This would be a security violation .

So you cannot send the absolute file path and read it via fs in node. You can either pass the base64 from client and handle file upload in Node.js or use desktop alternative like Electron.

If your app always runs in local you can also make the download folder predefined say for example (C:/Downloads)in Node.js and always upload files from the same folder, sending the filename from client.So if you select a file with name a.jpg,your Node.js code in local can use the fs to read from path C:/Downloads/a.jpg

answered Mar 21, 2019 at 13:51

jenil christo

6948 silver badges16 bronze badges

Comments

Rahul Rana · Accepted Answer · 2019-03-21 14:05:54Z

0

It's quite simple. When you upload a file like

<input type="file" />

You get a file blob, you can send this blob to the server using rest API or parse data and then can pass this data to the server.

edited Mar 21, 2019 at 14:05

answered Mar 21, 2019 at 13:18

Rahul Rana

4652 silver badges8 bronze badges

1 Comment

I.K. Over a year ago

Can you expand your answer please? What does it mean "upload a file using tag"? An example would be great!

Collectives™ on Stack Overflow

Retrieve Absolute File Path With Javascript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related