@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.
May 12, 2024
3
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?
Level 80
Please or to participate in this conversation.