Next.js 14: How to Add Upload Image from Local Directory

 In this article, we will explore how to integrate image uploading functionality from a local directory into a Next.js application. Uploading images is a common requirement in web development, especially when building content-rich platforms like blogs, portfolios, or e-commerce websites. Next.js provides a smooth way to handle this, leveraging its API routes and powerful file-handling capabilities. In this step-by-step guide, we will cover everything from creating the upload form to processing and storing the image files.

Why Image Uploading in Next.js Matters

Adding image uploading functionality in Next.js enhances user experience and brings dynamism to the app. Whether you're developing a blog, an e-commerce site, or a personal portfolio, the ability to upload and display images efficiently is crucial. Next.js's server-side features provide a seamless way to manage image uploads, ensuring faster processing times and smooth rendering for end-users.

Step 1: Setting Up the Project

To begin, ensure you have a Next.js project set up. If you don't have one yet, you can create a new project by running the following commands in your terminal:

npx create-next-app@latest my-image-upload-app

This will scaffold a new Next.js project. We are now ready to add the necessary components for image uploading.

Step 2: Create the Upload Component :

install browser image compression by this code :

npm i browser-image-compression

Step 3: Create the Upload Component

We need to create a simple form where users can upload images from their local directory. In Next.js, this can be done easily using a React component. create component folder and create UploderImage.jsx file and add the following code:

"use client";
import React, { useState } from "react";
import imageCompression from "browser-image-compression";

const UploaderImage = () => {
  const [imageUrl, setImageUrl] = useState("");
  const handelChangeImage = async (event) => {
    const input = event.target;
    if (input.files && input.files[0]) {
      const file = input.files[0];
      // compress your image
      const option = {
        maxSizeMB: 1,
        maxWidthOrHeight: 800,
        useWebWorker: true,
      };

      try {
        const compressFile = await imageCompression(file, option);
        const reader = new FileReader();
        reader.onload = () => {
          const imageUrl = reader.result;
          setImageUrl(imageUrl);
        };
        reader.readAsDataURL(compressFile);
      } catch (error) {
        console.log(error);
      }
    }
  };
  return (
    <>
      <div className="p-24">
        <h1 className="text-3xl text-gray-700 py-4">Upload Image</h1>
        <input
          type="file"
          id="image"
          name="image"
          accept="image/*"
          onChange={handelChangeImage}
          className="w-full text-gray-400 font-semibold text-sm bg-white border file:cursor-pointer cursor-pointer file:border-0 file:py-3 file:px-4 file:mr-4 file:bg-gray-100 file:hover:bg-gray-200 file:text-gray-500 rounded"
        />
      </div>
      {imageUrl && (
        <div className="py-16">
          <img src={imageUrl} alt="" className="w-[70%] rounded-md" />
        </div>
      )}
    </>
  );
};

export default UploaderImage;

step 4 : wrap this component into page.js

import UploaderImage from "./components/UploaderImage";

export default function Home() {
  return <div className="">
    <UploaderImage/>
  </div>;
}

Conclusion and Enhancements:

Congratulations! You have successfully added image upload functionality to your Next.js application. The process involves creating a simple form, handling file uploads via an API route, and serving the uploaded images from a public directory. There are several ways to enhance this functionality: Image validation: Add checks to ensure that only image files are uploaded (e.g., checking file types and sizes).Storage options: You can store the images in cloud storage services like AWS S3 or Google Cloud Storage for better scalability.Security: Implement security measures like limiting the file size and sanitizing file names to prevent malicious uploads.By following this guide, you can provide your users with a smooth image upload experience and integrate powerful file-handling capabilities into your Next.js application. If you want to read more information about how to boost traffic on your Website just visit --> The Insider's Views.