Unable to upload file from react to laravel using react hook form and ajax

Question

Up to this point a file can be viewed on input:

export async function store(input) {
    console.log("input", input);
    return httpClient.post(`${apiEndpoint}`, input);
}

On above console.log, it shows data as:

But, on the serverside laravel, if I print_r($request->all()) it shows data as:

My http client looks like this:

import axios from "axios";

const apiURL = process.env.MIX_SPA_URL;

axios.defaults.headers.common["Content-Type"] = "application/json";
axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";

axios.defaults.withCredentials = true;

let client = axios.create({
    baseURL: apiURL,
});

axios.interceptors.response.use(null, (error) => {
    const expectedError =
        error.response &&
        error.response.status >= 400 &&
        error.response.status < 500;

    if (!expectedError) {
        console.log("error from httpClient >>", error);
    }

    return Promise.reject(error);
});

function setJwt(token) {
    client.defaults.headers.common["Authorization"] = "Bearer " + token;
}

const httpClient = {
    get: client.get,
    post: client.post,
    put: client.put,
    delete: client.delete,
    setJwt,
};

export default httpClient;

Also, in case if you want to look how I have created input file using react-hook-form as:

<input
    className={`form-control w-full ${
        errors["cover_image"] ? "border-red-500" : ""
    }`}
    type="file"
    {...register("cover_image")}
/>

Why are the images not being sent to the server?

In case of laravel, I am using laravel sanctum in combination with fortify. And, the middleware added for this route are auth:sanctum and verified.

Also, I have tried by adding headers as: "Content-Type": "multipart/form-data",

export async function store(input) {
    console.log("input", input);
    return httpClient.post(`${apiEndpoint}`, input, {
        headers: {
            "Content-Type": "multipart/form-data",
        },
    });
}

But, with this header, not a single data got send to the server. Here, is the screenshot:

any help guys??

Aayush Dahal
– Aayush Dahal

2022-02-07 16:19:39 +00:00
Commented Feb 7, 2022 at 16:19 — Aayush Dahal
– Aayush Dahal, Commented Feb 7, 2022 at 16:19

Kaveh Karami · Accepted Answer · 2022-02-10 17:13:22Z

1

+50

I think you must put your file in formData and then pass it as your post request data

export async function store(input) {
    const formData = new FormData();
    formData.append("cover_image", input.cover_image[0]);
    formData.append("blockchain", input.blockchain);
    formData.append("description", input.description);
    formData.append("name", input.name);

    return await httpClient.post(`${apiEndpoint}`, formData, {
        headers: {
            "Content-Type": "multipart/form-data",
        },
    });
}

edited Feb 10, 2022 at 17:13

answered Feb 10, 2022 at 17:07

Kaveh Karami

3471 gold badge4 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aayush Dahal Over a year ago

Thank you it does work, but could you please explain little bit like how it works only with FormData, and also, what if I want to upload more than one images? Is just removing [0] should be fine or should I do Some thing else?

Kaveh Karami Over a year ago

info about formData, for uploading multiple images you need to use the loop statement. something like this: ``` for(let file of files) { formData.append("photos[]", file); ``` @AayushDahal

Collectives™ on Stack Overflow

Unable to upload file from react to laravel using react hook form and ajax

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related