Question 261774 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to upload a file(image) with Nextjs

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?

Tags:

2

Answers


  1. 0

    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 :).

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search