As someone who constantly deals with product photos, I found myself needing a straightforward solution to manage and upload images with ease. I wanted an application that could take an image, let me preview it, assign a part number as the filename, and then store it neatly on my desktop. This led me to create a simple Node.js application that does just that.
Project Code & Instructions: https://bitbucket.org/jsammarco2/partimageuploader/src/main/
The Inspiration
Managing product photos can be a tedious task, especially when it involves renaming files manually and organizing them in a consistent manner. I wanted to streamline this process, making it as user-friendly as possible. The idea was to build something lightweight, easy to deploy, and powerful enough to handle everyday needs.
How It Works
The application is built using Node.js, Express.js, Multer, and EJS. Here’s a quick rundown of how it all comes together:
- Uploading the Photo: The user is presented with a simple web form where they can select an image and input the corresponding part number. The form is straightforward, with the ability to preview the image before uploading.
- Assigning the Part Number: Once the user submits the form, the application takes the part number and uses it to name the file, ensuring that every image is easily identifiable later on.
- Saving the Image: The image is then saved in a designated folder on the desktop, making it easily accessible and organized.
The Simplicity of the Code
One of the key goals was to keep the code as simple as possible. Here’s a quick look at how the core of the application works:
- Express.js handles the web server, routing, and template rendering.
- Multer manages the file upload, storing the image temporarily in memory before saving it with the correct filename.
- EJS is used for rendering the HTML forms and handling the preview functionality.
The entire application is contained within a single app.js file, making it easy to deploy and maintain. Whether you’re a seasoned developer or someone just starting, the code is clean and easy to understand.
Extending the Application
To make the application more versatile, I included options for accessing it from the internet. You can either set up port forwarding on your router or use ngrok to expose the application securely.
For those who need to share the upload link, I’ve also added a feature to generate a QR code with a shortened URL, using https://free-url-shortener.rb.gy/. This makes it simple to distribute the link via print, email, or any other medium.
Check Out the Code
If you’re interested in seeing how this application works or want to modify it for your own use, I’ve made the source code available on Bitbucket. You can access it here: https://bitbucket.org/jsammarco2/partimageuploader/src/main/.
Final Thoughts
This application was built out of a need for simplicity and efficiency. It’s a small but powerful tool that solves a real problem for anyone dealing with product photos. If you find yourself in a similar situation, give it a try—it’s simple, effective, and easy to set up.
Thanks for reading, and I hope this tool makes your workflow just a little bit smoother!