Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

karu's avatar
Level 1

Image upload from vue to laravel api returns empty

I am trying to upload an image from vue frontend to laravel api but it returns either empty array or just empty.

<template>
    <form @submit.prevent="handleSubmit">
        <!-- Profile Image -->
        <ion-col size="6">
            <ion-label>Profile Image</ion-label>
            <ion-input type="file" accept="image/*" @change="onFileChange"></ion-input>
        </ion-col>
        <ion-button type="submit">Submit</ion-button>
    </form>
</template>

<script setup>
import { IonCol, IonLabel, IonInput, IonButton } from '@ionic/vue';
import { BASE_URL } from '../../src/helpers/config.js';
import axios from 'axios';
import { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';
import { useAuthStore } from '../../src/stores/useAuthStore.js';

let store = useAuthStore();
let selectedFile = '';

const onFileChange = (event) => {
    selectedFile = event.target.files[0];
};

const handleSubmit = async () => {
    try {
        const formData = new FormData();
        formData.append('profileimg', selectedFile);
        console.log(selectedFile);

        const response = await axios.patch(
            `${BASE_URL}/user/update`,
            formData,
            {
                headers: {
                    'Content-Type': 'multipart/form-data',
                    Authorization: `Bearer ${store.currentToken}`
                }
            }
        );
    } catch (error) {
        console.error('Error:', error);
        toast.error(error.response.data.message);
    }
};

</script>

i logged everything from the frontend. file is there its being sent and i get 200 status back with network, update(name if the api endpoint), payload, profileimg: (binary) but laravel just receive local.INFO: Incoming request data:

 public function update(Request $request)
    {
        info('Incoming request data:', $request->all());
        // Ensure user is authenticated
        if (!$request->user()) {
            return response()->json(['error' => 'Unauthenticated'], 401);
        }

         if ($request->hasFile('profileimg')) {
            Log::info('Profile image received in request');
            $profileImg = $request->file('profileimg');

            // Resize the image to 100px high and 70px wide
            $resizedImage = Image::make($profileImg)->fit(70, 100);

            // Generate a unique filename for the image
            $filename = uniqid() . '.' . $profileImg->getClientOriginalExtension();

            // Save the resized image to the public/images directory
            $resizedImage->save(public_path('images/' . $filename));

            // Update the user data with the new image path
            $userData['profileimg'] = 'images/' . $filename;
        }

        // Update the user information in the database
        $user = $request->user();
        if ($user) {
            $user->update($userData);
            return response()->json(['message' => 'User information updated successfully'], 200);
        } else {
            return response()->json(['error' => 'User not found'], 404);
        }
    }

i deactivated CSFR token in laravel and postman can send string of data with a name but file upload doesnt work. what am i missing?

0 likes
3 replies
martinbean's avatar
Level 80

@karu You can’t send files via HTTP methods other than POST. So you’ll need to do an axios.post request, but then add a field named _method with a value of PUT to “spoof” the method, like you would in a HTML form.

karu's avatar
Level 1

@martinbean oh, that explains a lot. So weird it works with the other field that are just JSON strings but not with image upload.

1 like
martinbean's avatar

@karu Yeah, it’s a PHP issue. I can’t remember the specifics, but there’s an issue with PUT requests where it will not parse files, even if the request is a multipart request, meaning you have to do a POST request instead as a workaround. I guess this is also why Laravel added support for “spoofing” the request using a hidden input.

1 like

Please or to participate in this conversation.