In this tutorial, I’ve built a free image hosting website using React as the front-end tool and vsftpd as the backend storage. The website is hosted on an AWS EC2 instance. Spring boot REST endpoint supports bulk upload of multiple images and passes a list of image URLs back in JSON response.
An image hosting service helps to store images online and save local storage space. It provides a reliable backup and easy image sharing by URL that can be used by other websites. Moreover, the images will be available anytime so that one can share the link more easily with clients or friends.
- React front-end
The web page is a single page application that contains an upload button. React, in this case, will be the prototyping tool to quickly write the upload button component and render the returned image URL. The upload button has a rich 3D press animation when hovered. It passes the images to /image/upload.do REST endpoint, which uses MultipartFile array. The number limit is the max allowed number of images in one upload.
The upload success callback function will add the JSON image URLs to React local state which triggers the page view update.
A delete cross will show on top of rendered images if mouse hovers and an onClick() callback deletes the image.
2. Spring Boot and Vsftpd
The spring boot rest controller receives Multipart files and uploads to vsftpd server. The vsftpd server is installed in the same EC2 instance. The image URLs are parsed as JSON string in response.
A UUID is assigned to each uploaded image to avoid name collision.
Nginx directly serves the images as a static resource in the FTP files folder so one can visit the URL in the web browser as http://img.ferretninja.com/0ca03b32-5302-4b32-862e-a40940259655.png. With the FTP storage, the admin of the website can also send images through FTP and serve the image using the original filename as https://img.ferretninja.com/ferret_670.jpg
3. Resources
The React GitHub repository link is https://github.com/christmasferret/ferret-image-frontend
The back-end Spring Boot GitHub repository link is https://github.com/christmasferret/ferret-image-hosting-public
