Breaking News: Grepper is joining You.com. Read the official announcement!

next js photo upload feald for form

Aggressive Antelope answered on June 25, 2023 Popularity 6/10 Helpfulness 2/10

answer next js photo upload feald for form

next js photo upload feald for form

Comment

import React, { useState } from 'react';

const Home = () => {
  const [file, setFile] = useState(null);
  const [photo, setPhoto] = useState(null);

  const handleFileChange = (e) => {
    setFile(e.target.files[0]);
  };

  const handlePhotoChange = (e) => {
    setPhoto(e.target.files[0]);
  };

  const handleSubmit = async () => {
    try {
      const formData = new FormData();
      formData.append('file', file);
      formData.append('photo', photo);

      const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData
      });

      if (response.ok) {
        console.log('File uploaded successfully!');
      } else {
        console.error('File upload failed.');
      }
    } catch (error) {
      console.error('File upload failed:', error);
    }
  };

  return (
    <div>
      <h1>File Upload Example</h1>
      <form>
        <div>
          <label htmlFor="file">File:</label>
          <input type="file" id="file" onChange={handleFileChange} />
        </div>
        <div>
          <label htmlFor="photo">Photo:</label>
          <input type="file" id="photo" onChange={handlePhotoChange} />
        </div>
        <button type="button" onClick={handleSubmit}>Upload</button>
      </form>
    </div>
  );
};

export default Home;

Popularity 6/10 Helpfulness 2/10 Language javascript

Source: chat.openai.com

Tags: javascript next photo-upload

Link to this answer
Share Copy Link

Contributed on Jun 25 2023

Aggressive Antelope

0 Answers Avg Quality 2/10

next js photo upload feald for form

Contents

More Related Answers

next js photo upload feald for form

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.