How to upload a file(image) with Nextjs

Question

I am trying to:

1. Upload a picture to a Next.js app
2. Run it through cjwbw/real-esrgan:d0ee3d708c9b911f122a4ad90046c5d26a0293b99476d697f6bb7f2e251ce2d4
3. Then return the enhanced image

Does anybody know how to do that?

Answer 1

enter image description here

import React, { useState } from "react";
import {
  Button,
  Card,
  CardBody,
  Input,
  InputProps,
  Progress,
} from "@nextui-org/react";
import { IoCloseSharp } from "react-icons/io5";
import { TbUpload } from "react-icons/tb";
import StyledImage from "./StyledImage";

interface FileUploadProps extends InputProps {
  onFileUpload: (files: FileList) => void;
}

const FileUpload: React.FC<FileUploadProps> = ({ onFileUpload, ...props }) => {
  const [isDragging, setIsDragging] = useState(false);
  const [uploadProgress, setUploadProgress] = useState<number | null>(null);
  const [filePreviews, setFilePreviews] = useState<string[]>([]);

  const handleDragEnter = (e: React.DragEvent<HTMLInputElement>) => {
    e.preventDefault();
    setIsDragging(true);
  };

  const handleDragLeave = (e: React.DragEvent<HTMLInputElement>) => {
    e.preventDefault();
    setIsDragging(false);
  };

  const handleDrop = (e: React.DragEvent<HTMLInputElement>) => {
    e.preventDefault();
    setIsDragging(false);

    const files = e.dataTransfer.files;
    if (files.length > 0) {
      uploadFiles(files);
      previewFiles(files);
    }
  };

  const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (files && files.length > 0) {
      uploadFiles(files);
      previewFiles(files);
    }
  };

  const uploadFiles = (files: FileList) => {
    // Simulate file upload progress for each file
    Array.from(files).forEach((file, index) => {
      const totalSize = file.size;
      const chunkSize = 1024 * 1024; // 1MB chunks for demonstration
      let uploaded = 0;

      const uploadInterval = setInterval(() => {
        uploaded += chunkSize;
        const progress = (uploaded / totalSize) * 100;

        setUploadProgress(progress);

        if (progress >= 100) {
          clearInterval(uploadInterval);
          setTimeout(() => {
            setUploadProgress(null);
            onFileUpload(files);
          }, 500); // Delay for visual feedback
        }
      }, 500); // Simulated 500ms delay per chunk
    });
  };

  const previewFiles = (files: FileList) => {
    const previews: string[] = [];
    Array.from(files).forEach((file) => {
      const reader = new FileReader();
      reader.onload = () => {
        previews.push(reader.result as string);
        setFilePreviews([...previews]);
      };
      reader.readAsDataURL(file);
    });
  };

  const handleDeletePreview = (index: number) => {
    const updatedPreviews = [...filePreviews];
    updatedPreviews.splice(index, 1);
    setFilePreviews(updatedPreviews);
  };

  return (
    <Card>
      <CardBody>
        <div
          className={`relative border-2 border-dashed border-gray-400 p-4 text-center ${
            isDragging ? "bg-gray-100" : ""
          }`}
          onDragEnter={handleDragEnter}
          onDragOver={handleDragEnter}
          onDragLeave={handleDragLeave}
          onDrop={handleDrop}
        >
          <Input
            id="file-input"
            type="file"
            {...props}
            onChange={handleFileInputChange}
            className="hidden"
            multiple // Enable multiple file selection
          />
          <label
            htmlFor={props.id || "file-input"}
            className="cursor-pointer text-gray-500 w-full h-full flex flex-col items-center justify-center"
          >
            {/* Content inside label */}
            <p className="">Drag & drop your files here</p>
            <TbUpload className="text-6xl my-2" />
            <span className="">Browse for files</span>
          </label>
        </div>
        <div className="flex flex-row flex-wrap gap-4">
          {filePreviews.map((preview, index) => (
            <div key={index} className="mt-3 relative">
              <StyledImage
                src={preview}
                alt={`File Preview ${index + 1}`}
                className="w-[100px] h-[100px]"
                width={100}
                height={100}
              />
              <Button
                isIconOnly
                color="danger"
                size="sm"
                onClick={() => handleDeletePreview(index)}
                className="absolute top-0 right-0 p-2 text-white rounded-full z-10"
              >
                <IoCloseSharp className="text-5xl" />
              </Button>
            </div>
          ))}
        </div>
        {uploadProgress !== null && (
          <Progress
            value={uploadProgress}
            maxValue={100}
            className="mt-3"
            color="primary"
          />
        )}
      </CardBody>
    </Card>
  );
};

// Usage
const StyledFileUpload: React.FC = () => {
  const handleFileUpload = (files: FileList) => {
    // Handle the uploaded files here
    console.log("Uploaded files:", files);
  };

  return (
    <div className="w-full">
      <FileUpload onFileUpload={handleFileUpload} />
    </div>
  );
};

export default StyledFileUpload;

Answer 2

from what I am able to understand you are trying to use replicate model for high-resolution images.

To achieve the steps you mentioned you'll need to set up a server in your Next.js app to handle the image processing using Docker or if you want to use Node.js try going through these docs

we will first upload image from Next js application then set up a backend server using Node.js within your Next.js app. This server will handle image processing using the Docker image.

Then we will use the cjwbw/real-esrgan Docker image to process the uploaded image and enhance it.

Step 1: setup next js application and handle image upload.

// pages/index.js

import React, { useState } from 'react';
import axios from 'axios';

const ImageUploader = () => {
  const [selectedImage, setSelectedImage] = useState(null);

  const handleImageUpload = async (event) => {
    const file = event.target.files[0];
    const formData = new FormData();
    formData.append('image', file);

    try {
      const response = await axios.post('/api/enhance-image', formData);
      // Handle the enhanced image response here
      console.log('Enhanced image:', response.data);
      // Update state or display the enhanced image
    } catch (error) {
      console.error('Error enhancing image:', error);
    }
  };

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleImageUpload} />
    </div>
  );
};

export default ImageUploader;

Step 2: To process the image and return it as a response

// pages/api/enhance-image.js

import { execSync } from 'child_process';

export default async (req, res) => {
  const imagePath = req.body.image.path; // Assuming the image is uploaded to a temporary directory
  const enhancedImagePath = 'path/to/save/enhanced-image.jpg'; // Provide a path to save the enhanced image

  // Run the image enhancement using Docker
  execSync(
    `docker run -v ${imagePath}:/input -v ${enhancedImagePath}:/output cjwbw/real-esrgan:d0ee3d708c9b911f122a4ad90046c5d26a0293b99476d697f6bb7f2e251ce2d4`
  );

  // Return the path to the enhanced image
  res.status(200).json({ enhancedImagePath });
};

Hope this helps :).

Answer 3

Use a file input and send the output value to the esrgan api and retrieve the enhanced image from the api response

<input
  type="file"
  id="input"
  accept="image/*" />

Select the image using the input, and now you can send the selected image

const selectedImage = document.getElementById("input").files[0]

Or you can use a ref instead of the id by using the useRef react hook and assigning a ref to the input and get the file from the input ref

const inputRef = useRef(null)
<input
  type="file"
  ref={inputRef}
  accept="image/*" />
const selectedImage = inputRef.current.files[0]

....send the selected image to the api