Request null when upload edit file

Hi guys, I'm having a problem that when I submit the form with the file, the request returned is empty. But if the file is not sent, the request will return the request along with other data

<form @submit.prevent="update" enctype="multipart/form-data">
<input type="file" id="image" accept="image/*" @input="form.image = $event.target.files[0]">
</form>

    props: {
        group: Object
    },
    data() {
        return {
            form: useForm({
                name: this.group.name,
                description: this.group.description,
                image: ''
            })
        }
    },
    methods: {
        update() {
            this.form.put(route('admin.groups.update', this.group.id))
        }
    }

This is a request when there is no file sent

And here is the request when a file is sent

vincent15000

3 years ago

Level 63

Not sure, but perhaps you need to set image: null instead of an empty string.

1 like

Niush

3 years ago

Best Answer

Level 50

For PUT, PATCH, DELETE requests you need to add _method: 'put' in the request body.

Read Multipart Limitations at the bottom of the documentation.

https://inertiajs.com/file-uploads

So in your case:

form: useForm({
      name: this.group.name,
      description: this.group.description,
      image: '',
      _method: 'put'
})

// then form submit as post.
this.form.post(route('admin.groups.update', this.group.id))

9 likes

ngoquocdat

3 years ago

Level 3

@Niush Thank you

1 like