Help with image upload bad request

Questions and Answers
1

Im simply trying to upload an image from the frontend, nothing much.
This is what I get.

Response { type: "cors", url: "http://localhost:1337/upload", redirected: false, status: 400, ok: false, statusText: "Bad Request", headers: Headers, body: ReadableStream, bodyUsed: false }
​body: ReadableStream { locked: false }
​bodyUsed: false
​headers: Headers {  }
​ok: false
​redirected: false
​status: 400
​statusText: "Bad Request"
​type: "cors"
​url: "http://localhost:1337/upload"
​<prototype>: ResponsePrototype { clone: clone(), arrayBuffer: arrayBuffer(), blob: blob(), … }
ImageUpload.jsx:24:12


import { API_URL } from '@config/index';
import { useState } from 'react';
import Image from 'next/image';

const ImageUpload = function (evtId, imageUploaded) {
  const [image, setImage] = useState(null);
  const [src, setSrc] = useState(null);
  const handleFileChange = (e) => {
    setImage(e.target.files[0]);
    setSrc(URL.createObjectURL(e.target.files[0]));
  };
  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('files', image);
    formData.append('ref', 'Events');
    formData.append('refId', evtId);
    formData.append('field', 'image');

    const res = await fetch(`${API_URL}/upload`, {
      method: 'POST',
      form: formData,
    });
    console.log(res);

    if (res.ok) {
      imageUploaded();
    }
  };
  return (
    <div>
      {image && (
      <div className="my-4 relative h-80">
        <Image
          src={src}
          layout="fill"
          objectFit="cover"
        />
      </div>
      ) }
      <h1>Upload Event Image</h1>
      <form
        onSubmit={handleSubmit}
      >
        <input
          type="file"
          onChange={handleFileChange}
        />
        <input
          className="text-white py-3 w-full rounded m-2 hover:bg-[red] hover:cursor-pointer"
          type="submit"
          value="Upload"
        />
      </form>

    </div>
  );
};

export default ImageUpload;
2

This is how I fixed it for Strapi v4

const onSubmitHandler = async (e) => {
e.preventDefault();
const formData = new FormData();

	formData.append('files', image);
	formData.append('ref', 'api::event.event');
	formData.append('refId', evtId);
	formData.append('field', 'image');

	const res = await fetch(`${API_URL}/api/upload`, {
		method: 'POST',
		body: formData,
	});

	if (res.ok) {
		imageUploaded();
	} else {
		console.log(res);
	}
};