I'm working on a small project meant for my friends and me to share images, and I'm torn between two approaches for handling user-uploaded pictures. First, there's the option of having my React frontend upload the images directly to the hosting service, which sounds efficient but raises security concerns about keeping my API key safe. I've considered prompting for a password during the upload process to get the key from the server, but I'm not sure that's secure enough.
The second option is to send the images to my backend first and then upload them from there, which would protect my API key better. I'm also curious about using socket.io for this, although I wonder if that's the best method for image uploads. Plus, I'd like to compress images before sending them to save bandwidth, and I think that might be easier on the backend. I've seen that Cloudinary has a free tier and supports pre-signed URLs, which seems like an appealing option too. I'd love to hear your thoughts on which approach would be best for my situation!
1 Answer
You should upload images to a dedicated server first, scan them for viruses, and then send them to the hosting site. This keeps your API key safe and isolates user data. Paying attention to security is more important than the number of network calls, especially since your project could end up on the open web.
I'm thinking of using x02.me because it seems straightforward, but Cloudinary sounds promising too since it supports pre-signed URLs. For backend uploads, would a 1MB image be manageable? I'm also curious about image compression options on the frontend to avoid big uploads.