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.