Uploading Images in Next.js (File Uploads, Filestack)
1. Introduction
Uploading images in Next.js is a common task when developing web applications. In this tutorial, we will explore two different approaches:
- Uploading files directly to your backend (with Next.js).
- Using Filestack, a service that simplifies file management in the cloud.
Prerequisites:
- Have the latest version of Next.js installed.
- Basic knowledge of React and Node.js.
- For the Filestack section, you will need a Filestack account.
2. Uploading Images Directly (File Uploads)
First, let's see how you can handle file uploads directly in Next.js without using external services.
Step 1: Create the upload form in Next.js
Create a form in your desired component to select and upload an image. Here, we use useState
to store the file and fetch
to send it to the backend.
import { useState } from 'react'; export default function UploadForm() { const [selectedFile, setSelectedFile] = useState(null); const handleFileChange = (event) => { setSelectedFile(event.target.files[0]); }; const handleSubmit = async (event) => { event.preventDefault(); const formData = new FormData(); formData.append('file', selectedFile); const response = await fetch('/api/upload', { method: 'POST', body: formData, }); if (response.ok) { console.log('File uploaded successfully'); } else { console.error('Error uploading file'); } }; return ( <form onSubmit={handleSubmit}> <input type="file" onChange={handleFileChange} /> <button type="submit">Upload</button> </form> ); }
Step 2: Create the API to handle the upload
Now, create an endpoint in Next.js to process the image in the backend. We will use Next.js' API routes to handle server-side operations.
Create a file in pages/api/upload.js
:
import fs from 'fs'; import path from 'path'; export const config = { api: { bodyParser: false, // Disable bodyParser to handle large files }, }; export default async function handler(req, res) { if (req.method === 'POST') { const chunks = []; req.on('data', (chunk) => { chunks.push(chunk); }); req.on('end', () => { const buffer = Buffer.concat(chunks); const filePath = path.resolve('.', 'uploads', 'image.png'); // Saves to the `uploads` folder fs.writeFileSync(filePath, buffer); res.status(200).json({ message: 'File uploaded successfully' }); }); } else { res.status(405).json({ message: 'Method not allowed' }); } }
Step 3: Create the upload folder
Make sure you have a folder called uploads
in the root of your project. You can create it manually:
mkdir uploads
With this, you can now select an image and upload it directly to your server.
3. Uploading Images with Filestack
Now, if you prefer using an external service like Filestack, which offers file hosting, CDN, and efficient image handling, here's how you can do it.
Step 1: Install Filestack
First, we need to install the Filestack package in your Next.js project.
npm install filestack-js
Step 2: Set up Filestack in the frontend
Next, let's set up the Filestack widget in a component so that users can select and upload images. This is straightforward, as Filestack provides a ready-to-use widget.
Here’s an example implementation:
import { useState } from 'react'; import * as filestack from 'filestack-js'; const client = filestack.init('YOUR_API_KEY'); // API Key export default function FilestackUpload() { const [imageUrl, setImageUrl] = useState(''); const handleUpload = async () => { const result = await client.picker({ onUploadDone: (res) => { setImageUrl(res.filesUploaded[0].url); console.log('File uploaded: ', res.filesUploaded[0].url); }, }).open(); }; return ( <div> <button onClick={handleUpload}>Upload Image with Filestack</button> {imageUrl && <img src={imageUrl} alt="Uploaded Image" />} </div> ); }
Step 3: Get your Filestack API Key
For Filestack to work, you need to create an account on Filestack and generate your API Key. Replace YOUR_API_KEY
in the code above with the one provided to you.
Step 4: Display the uploaded image
Once the user uploads an image, you can display it using the URL generated by Filestack:
{imageUrl && <img src={imageUrl} alt="Uploaded Image" />}
4. Conclusion
And that’s it! You now have two approaches to handle image uploads in a Next.js application:
- Direct upload to your backend.
- Upload using Filestack, which gives you a more advanced and scalable solution if you don't want to manage file storage yourself.