DEV Community

Ayebidun Ezekiel
Ayebidun Ezekiel

Posted on

File upload

What is the best method for handling image upload and preview

Top comments (3)

Collapse
 
curiousdev profile image
CuriousDev

Is this about how to pick a file in the web client or how to handle it with the server? It seems to be the first one, which can be done with the input element of HTML with type file. This elements also allows to handle the onChange event with a function in order to access the file content and then show it on the page by setting the "src" of an "img" element. But this surely is only one option, maybe React provides more.

Collapse
 
ezekiel8807 profile image
Ayebidun Ezekiel

Tried that. It not working, it's seems the path of the image on my directory is different from that of react

Directory: asset/img/a.png
React: localhost:3000/home/asset/img/a.png

Collapse
 
curiousdev profile image
CuriousDev

Without seeing your code, it is hard to describe anything helpful.
Please search for code examples and you surely will find something showing you how the input element allows you to show the "file window", which in order would make the picked file usable in the browser by HTML and JS.
Also Mozilla usually has very good documentation for Web Development.
Looking at your paths, I would say that, after picking with the "file window", you should not need to take care of the paths anymore. This is basically done for you by the browser. Next part would be to upload the received content to the server, which can be done with the usual Web Requests, e.g. with the so-called XMLHTTPRequest of JS.
Maybe you can provide code or a Github project, which would be even better.