Website Product Image Uploader

I need a straightforward photo-upload component built for my website so merchants can add product images with zero hassle. After clicking “Add Image,” the user should be able to drag-and-drop or browse for a file, see an instant thumbnail preview, and then press “Save” to store the picture on the server. JPEG and PNG support is enough for now, but the code should be clean enough to extend to other formats later. Please make sure the upload handles basic validation (file type, size limit) and gives clear error messages if something goes wrong. A simple progress bar is a plus because many of the files will be high-resolution. Tech stack is flexible—Vanilla JavaScript or a lightweight React component on the front end will both work, as long as the back end endpoint (PHP/Laravel or Node) receives the image, renames it safely, and returns the final URL so I can display it in the product catalog. Deliverable: the complete, tested code for the front-end uploader and a matching back-end route that saves the file to the /uploads/products directory (or an S3 bucket if you prefer). A short README that shows how to drop it into my existing site will close out the job.

Project ID: 40452491