I have a form with input for 2 images, one which goes to an images folder and one which goes to thumbnails. When I hit upload, I get GET http://danza.test/thumbnails[object%20File] 404 (Not Found). If I output the request object, all looks ok. I'm stuck.
Upload method:
let $updatedGallery = this;
let $index = this.images.push(this.editedItem)-1;
axios.post('/api/gallery', this.editedItem).then((response) => {
$updatedGallery.editedItem.id = response.data.id;
Object.assign($updatedGallery.images[$index], $updatedGallery.editedItem);
})
.catch(function (error) {
console.log(error);
});
Object:
editedItem: {
name: '',
image: null,
thumbnail: null,
species: '',
tag: '',
patreon: '',
action: '',
},
defaultItem: {
name: '',
image: null,
thumbnail: null,
species: '',
tag: '',
patreon: '',
action: '',
},
Form:
<v-row>
<v-col cols="12" sm="6" md="6">
<v-file-input v-model="editedItem.image" label="Picture"></v-file-input>
</v-col>
<v-col cols="12" sm="6" md="6">
<v-file-input v-model="editedItem.thumbnail" label="Thumbnail"></v-file-input>
</v-col>
@mattb I guess you have an array of image and you iterate over them to display them?
Then this one here:
let $index = this.images.push(this.editedItem)-1;
you are pushing the whole object, should it be:
let $index = this.images.push(this.editedItem.image)-1;
for example?
No doesn't that grab just the image? I need all the form submitting. I get this error when I try adding the .image part
app.js:43380 [Vue warn]: Invalid prop: type check failed for prop "item". Expected Object, got File
@mattb from your initial error: http://danza.test/thumbnails[object%20File] you are appending full object to the URL instead of the filename or the id of the thumbnail for the get request to be made successful. Then for your next error wherever you have the property item I don't see that in the code that you have shared, so you are setting a value that is not acceptable as the error says.
Sorry to be dumb here, just getting into Vuejs properly, but if I want to pass the whole form over including the image, how would I do that?
@mattb I am sorry but I don't understand your question. Where do you want to pass the whole form? can you give an example on what you want to achieve?
So the form is there to upload an image alongside information about the image, such as title etc. It has some text inputs and an image input all with the intent to pass it across to the database via the api
@mattb but you don't have the error on the way you are posting it to the Database.. you are probably receiving the data in your controller. The problem is when you are trying to display the image I guess..
This works:
axios.post('/api/gallery', this.editedItem)
Somewhere you have this:
/thumbnails + object
That does not work.
Yeah, the writing to the db would come after once I can write to the controller. I have this right now which is displaying the images using props and it seems to work but is this what's throwing off the code?
<template #item.image="{item}">
<img width="100" :src="('../../../thumbnails'+item.image)">
</template>
@mattb how do you know that it works?
Looking at this: http://danza.test/thumbnails[object%20File] it seems like it is appending a object File, not a name nor an id or whatever is needed.
I know it works because I can see it displaying images I already had in the database. Can I not append it as an object then? I ask as I need to grab the image to move it to a folder and the name too. Unless I'm going about it the wrong way? How is it done with Vue?
Not as an object for sure. Obviously your item.image contains something else when the page first loads.. then you are overriding it with an object, that's why for the first images it works, and when you try to upload a new one it does not.
There are many tutorials on how to upload images using VueJS and also using Laravel, take a look at this one for example:
Please or to participate in this conversation.