How to create a custom hook for handling image uploads in Next.js



Image not found!!

Creating a custom hook for handling image uploads in Next.js involves using state management, handling file input, and interacting with an API or storage service to upload the image. Here's a basic example using React hooks and the fetch API to interact with a server. In this example, I'll assume you are using the useState hook for managing state and useEffect for handling side effects.

  1. First, install any necessary packages:
bash
npm install axios # or any other library for making HTTP requests
  1. Create a custom hook, let's call it useImageUpload.js:
jsx
// useImageUpload.js
import { useState, useEffect } from 'react';

const useImageUpload = () => {
  const [image, setImage] = useState(null);
  const [imageUrl, setImageUrl] = useState(null);
  const [uploading, setUploading] = useState(false);
  const [error, setError] = useState(null);

  const uploadImage = async () => {
    try {
      // Simulate an API call to upload the image
      // Replace this with your actual API endpoint or storage service
      const response = await fetch('/api/upload', {
        method: 'POST',
        body: image,
      });

      if (!response.ok) {
        throw new Error('Image upload failed');
      }

      const data = await response.json();
      setImageUrl(data.imageUrl);
    } catch (error) {
      setError('Image upload failed');
    } finally {
      setUploading(false);
    }
  };

  const handleImageChange = (e) => {
    const selectedImage = e.target.files[0];
    setImage(selectedImage);
  };

  const handleUpload = () => {
    if (image) {
      setUploading(true);
      uploadImage();
    }
  };

  useEffect(() => {
    if (image) {
      handleUpload();
    }
  }, [image]);

  return {
    image,
    imageUrl,
    uploading,
    error,
    handleImageChange,
  };
};

export default useImageUpload;
  1. Use the custom hook in your Next.js component:
jsx
// YourComponent.js
import React from 'react';
import useImageUpload from '../path/to/useImageUpload';

const YourComponent = () => {
  const {
    image,
    imageUrl,
    uploading,
    error,
    handleImageChange,
  } = useImageUpload();

  return (
    <div>
      <input type="file" onChange={handleImageChange} />
      {uploading && <p>Uploading...</p>}
      {error && <p>{error}</p>}
      {imageUrl && <img src={imageUrl} alt="Uploaded" />}
    </div>
  );
};

export default YourComponent;

Make sure to replace the simulated API endpoint in uploadImage with your actual image upload endpoint or storage service. Additionally, you may need to handle authentication and other details based on your specific use case.

Category List