React.js Upload Files to server

Question

I am trying to learn to React with Laravel 8 with Sanctum Authentication. I am trying to upload files to the server using React. I am using react-dropzone to drag and preview Images and Laravel8 Here's the react-dropzone code.

const { getRootProps, getInputProps } = useDropzone({
    accept: "image/*",
    onDrop: (acceptedFiles) => {
      setFiles(
        acceptedFiles.map((file) =>
          Object.assign(file, {
            preview: URL.createObjectURL(file),
          })
        )
      );
    },
  });

I am getting files and it's preview. Here's the upload code which I am using to upload to the server.

const data = new FormData();
files.map((file) => data.append("images", file));
apiClient.get("sanctum/csrf-cookie").then(() => {
      apiClient
        .post("api/upload/image/1", data, {
          headers,
        })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.dir(err);
          toast.error("Something Went Wrong");
        })
})

On Laravel I am trying to capture request by $request->all() but it returns images: {}

Answer 1

You need to capture it by file function or as an object property e.g. ->images instead of all.

More: https://laravel.com/docs/8.x/requests#files