In this blog, we will delve into the concept of file uploads, which is essential for any web application built using JavaScript. Specifically, in the MERN stack, I have used the multer package to store files from the frontend to the backend without any compression.
Using Multer
Multer is an npm package used for handling file uploads (multipart/form-data). It is a middleware that integrates seamlessly with Express.js applications.
Steps for File Upload Using Multer
1. Install Multer Package:
First, install the multer package via npm:
npm install multer
2. Upload Button:
Instead of forms, I have handled the submit request through states in React.js:
<div>
<input type="file" onChange={(event) => setImage(event.target.files[0])} />
</div>
Handled through forms:
<form onSubmit={handleSubmit} enctype="multipart/form-data">
<input type="file" />
</form>
3. Handle Submit Function:
Here is the handleSubmit function in React.js:
const [image, setImage] = useState(null);
const handleSubmit = async (event) => {
event.preventDefault();
try {
const formData = new FormData();
// image is the state which has image details
formData.append('file', image);
var name;
await axios.post("http://localhost:4100/upload", formData, {
withCredentials: true,
})
.then((response) => {
toast.success("Image uploaded successfully");
name = response.data;
});
} catch (error) {
console.log(error);
}
};
Backend Part
4. Multer Setup:
Create a folder named 'uploads/' on the server-side. Add the following code to app.js. Refer to your project's folder structure for a complete MERN stack application setup.
// Import multer
const multer = require('multer');
const path = require('path');
// Configure multer storage
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, 'uploads/');
},
filename: (req, file, cb) => {
cb(null, `${Date.now()}-${file.originalname}`);
}
});
const upload = multer({ storage: storage });
5. Upload API:
Note: The form data should have the key name 'file' in order to access the file inside the form data.
app.post('/upload', upload.single('file'), (req, res) => {
try {
res.json({ message: 'File uploaded successfully', name: req.file.filename });
} catch (error) {
console.log(error);
}
});
6. Serve Static Files
Once the files are uploaded to the backend, they should be accessible from the browser to render on the frontend. To serve static files, use the built-in middleware function in Express.js: express.static().
app.use('/uploads', express.static(path.join(__dirname, 'uploads')));
For example, if the link is "http://localhost:4100/uploads/example.jpg", in the /uploads API, it strips the file name alone and searches for it in the 'uploads' directory.
7. Optional: ES Modules
If you use CommonJS modules, the above code will work. If you are using ES modules, __dirname is not present by default. You need to create an equivalent for ES modules.
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
Feel free to reach out if you have any questions or need further assistance. 😊📁✨
Top comments (0)