So I have this stupid problem, although it should be simple. I have a from with input fields, which I want to sent via axios to laravel backend
VueJS part:
<html>
<input id="company_logo" name="company_logo" type="file" v-on:change="getImageFromInput" />
<script>
user: {
name: {
val: '',
isValid: true
},
address: {
val: '',
isValid: true
},
company_logo: {
val: '',
isValid: true
},
etc.
methods: {
getImageFromInput(event) {
this.user.companyLogo.val = event.target.files[0];
},
async updateUserSettings() {
const updatedData = {
name: this.user.name.val,
address: this.user.address.val,
company_logo: this.user.companyLogo.val,
}
try {
const response = await axios.patch(`http://localhost/api/users/${this.userId}/settings/${this.id}`, updatedData);
...
}
Laravel part:
public function update(Request $request, UserSettings $userSettings, $id)
{
dd(request('address')); // returns what was in address field on vuejs
dd(request('company_logo')); // returns []
I need image file on backend side which is stored on server in /tmp folder, so I can manipulate it. But I am not sure how to fetch the image
$input = array();
if ($request->hasFile('company_logo') && $request->company_logo != null) {
$image = $request->file('company_logo');
$destinationPath = 'image/';
$cmp_logo= "image/" . date('Y-m-d-His') . "-" . $image->getClientOriginalName();
$image->move($destinationPath, $cmp_logo);
$input['imagefile'] = "$cmp_logo";
}
dd($request->hasFile('company_logo') && $request->company_logo != null); // returns false
dd($request->file('company_logo')); // returns null
You need to chose FormData when you are uploading files.
methods: {
getImageFromInput(event) {
this.user.companyLogo.val = event.target.files[0];
},
async updateUserSettings() {
let formData = new FormData();
formData.append('name', this.user.name.val);
formData.append('address', this.user.address.val);
formData.append('company_logo', this.user.companyLogo.val);
try {
const response = await axios.patch(`http://localhost/api/users/${this.userId}/settings/${this.id}`, formData);
...
}
@MohamedTammam I have tried that way as well. I belive that maybe I am not sending image properly. Do I need to send any header from vue? Like multiform...
@boby What that line shows?
dd($request->company_logo);
@MohamedTammam it returns null,
console.log(this.$refs.fileInput.files[0]);
Outputs: File {name: 'IMG_0318.jpg', lastModified: 1188748092000, lastModifiedDate: Sun Sep 02 2007 17:48:12 GMT+0200 (Central European Summer Time), webkitRelativePath: '', size: 2211295, …}
is this ok?
@boby What is the output of formData before you send the request?
@boby And try to add the content-type header.
axios.patch(`http://localhost/api/users/${this.userId}/settings/${this.id}`, {
headers: { 'Content-Type': 'multipart/form-data' },
});
@MohamedTammam this is what I see in console in headers when I hit save button on my form:
Form Data:
name: Demo User 1
address: demo1
...
company_logo: (binary)
is that what you asked for?
@MohamedTammam it is the same when using headers in axios.
I got this to work when I changed method patch to post on axios and in my api.php file. Any idea why this happens?
Please or to participate in this conversation.