CODEWITHSUNDEEP
reactjsimage
PrettyCoffee
PrettyCoffee

Reputation: 201

How can I dynamically use images outside of my reactjs project?

I am developing a client-only ReactJS application (only for local usage) where I need to save and load images by filepaths (URL and local file system).

The paths are stored in the local storage and images from URLs can be used. Anyway, local images cannot since ReactJS is using the project directory and I cannot escape it.

Is there the possibility to open files with absolute path from the local file system or can I/do I have to upload it in the project directory?

Upvotes: 0

Views: 31

Answers (1)

Luïs
Luïs

Reputation: 2833

Are you running this through a browser? If so Javascript on browsers does not yet have the ability to access local file systems. I haven't tried this but you could run Node locally and use ExpressJs for client-server communication.

As stated here:

you'll need two pieces:

  • A browser piece, which does the UI with the user.
  • A Node piece, which runs on the user's machine (and thus can access the file system) and which the browser piece uses to do the actual file operations. Probably the easiest way for the pieces to interact would be HTTP, which you can trivially support using ExpressJS.

So for instance, if the user wants to delete a file:

  • User clicks something to say "delete this file"
  • Browser JavaScript sends the command to the Node process over HTTP via ajax
  • Node process does the deletion and reports success/failure
  • Browser JavaScript displays the result

Upvotes: 1

Related Questions