javascript - Image upload Reactjs with Laravel PHP

Question

I am using the following tool react-images-upload

import React, { useState } from "react";
import ImageUploader from "react-images-upload";

const App = () => {
  const [image, setImage] = useState();

  const handleSubmit = () => {
    console.log(image[0]);
    axios
      .post(
        "http://192.168.1.6:8001/api/upload",
        { image: image[0] },
        {
          headers: headers,
        }
      )
      .then((response) => {
        console.log(response);
      });
  };

  return (
    <div>
      <ImageUploader
        withIcon={true}
        singleImage={true}
        onChange={(p) => setImage(p.concat(p))}
        imgExtension={[".jpg", ".gif", ".png", ".jpeg"]}
        maxFileSize={4242880}
        withPreview={true}
        withIcon={true}
        className="text-center"
      />
      <button onClick={handleSubmit}>Upload</button>
    </div>
  );
};

export default App;

And in php code:-

public function upload(Request $request)
    {
         
         return response()->json($request->all());    
    }

In php the value of $request->all() is not showing the file sent in react request:-

What is the proper way to send the request with file/image to php backend ?

question from:https://stackoverflow.com/questions/66058969/image-upload-reactjs-with-laravel-php

Answer 1

Run With Below Command:

import React, { useState } from "react";
import ImageUploader from "react-images-upload";

const headers = {
  Accept: "application/json", "Content-Type": "multipart/form-data; boundary=---------------------------974767299852498929531610575",
}
const App = () => {
  const [image, setImage] = useState();

  const handleSubmit = () => {
    console.log(image[0]);
    axios
      .post(
        "http://192.168.1.6:8001/api/upload",
        { image: image[0] },
        {
          headers: headers,
        }
      )
      .then((response) => {
        console.log(response);
      });
  };

  return (
    <div>
      <ImageUploader
        withIcon={true}
        singleImage={true}
        onChange={(p) => setImage(p.concat(p))}
        imgExtension={[".jpg", ".gif", ".png", ".jpeg"]}
        maxFileSize={4242880}
        withPreview={true}
        withIcon={true}
        className="text-center"
      />
      <button onClick={handleSubmit}>Upload</button>
    </div>
  );
};

export default App;

You are actually missing Headers "multipart/form-data"