Uploading a picture on a website through images displayed a modal in React.js

user_15158212 0
Viewed 293

I'm working in a react website where users can upload their profile picture from a modal which contains avatar images set by us. The users cannot upload via the generic way of selecting their own images from their desktop/phones due to privacy concerns.Like there would be any button sort of thing which when clicked a modal pops up and we get to select an image from there and upload it. I wanted some help for the code of this. Any article link/similar posts would be very helpful since I'm new to react and I can't find anything similar.

This is the image of the modal . enter image description here

reactjs frontend javascript
2 Answers

By initial browsing, I found this sandbox which did the activity similar to your need.

https://codesandbox.io/s/5vn3lvz2n4

Here they used react-photo-gallery, react-images dependencies, so your work gets simpler. By tweaking the styles you can achieve your desired styling. Change onClick function to select and set display picture.

user_148966550

Do you really need to upload the pictures every time? Keep them in a certain location, and get a backend table:

id - photo url

save the id of the picture user selects and parse it by the same id when displaying.

user_43850800
Related