How to upload files with inertia js and laravel 8.0

Question

I have an update ( patch form ) that can have some basic fields with one featured image and an array of gallery images.

updatePhotoPreview(event) {
   this.featuredImagePreview = URL.createObjectURL(event.target.files[0])
   this.updateProductForm.featured_image = event.target.files[0]
},

Before sending the request and even in the request header, the featured image is File and binary.

Then I'm simply posting the form with this.form.patch(url).

I'm getting an error the featured_image must be an image.

I've dumped the request and somehow my featured_image value has been set to an empty array.

The same is for the gallery images, it has been turned into an array of empty arrays.

I've tried changing the route to post, put, the result is the same, I've added a custom header

 { headers: {'Content-Type': 'multipart/form-data'} }

The result is the same.

but the same form is working for the create endpoint of this resource with POST method. I've removed all the request classes and dumping with request()->all()

How can I fix this?

Answer 1

I fix this by adding '_method' on form and using 'post' request.

data() {
    return {
        form: this.$inertia.form({
            _method: "PUT",
        })
    };
},
methods: {
    submit(form) {
        this.form
            .post("route/id", form, {
                preserveState: true
        })
    }
}

Answer 2

var data = new FormData()
data.append('first_name', first_name || '')
data.append('last_name', last_name || '')
data.append('email', email || '')
data.append('password', password || '')
data.append('photo', photo || '')

Inertia.post('/users', data)

Try this. Just use FormData() instantiation

Please refer the documentation https://inertiajs.com/forms#file-uploads

Answer 3

It's possible to upload a photo via InertiaJS and Laravel 8 following the steps below:

1. In our VueJS component's HTML:

<input type="file" class="hidden"
             ref="photo"
             @change="updatePreview">
<div v-show="preview">
  <span class="block w-20 h-20 rounded-full"
        :style="'width: 5rem; height: 5rem; border-radius: 999px; display: block; background-size: cover; background-repeat: no-repeat; background-position: center center; background-image: url(\'' + photoPreview + '\');'">
  </span>
</div>

2. In our methods object:

updatePhotoPreview() {
    const reader = new FileReader();

    reader.onload = (e) => {
        this.preview = e.target.result;
    };

    reader.readAsDataURL(this.$refs.photo.files[0]);
},
storePhoto() {
    if (this.$refs.photo) {
        this.form.photo = this.$refs.photo.files[0]
    }

    this.form.post(route('photo.store'), {
        preserveScroll: true
    });
},

3. In our data function:

data() {
   return {
       form: this.$inertia.form({
           '_method': 'PUT',
           photo: null,
       }, {
           resetOnSuccess: false,
       }),
       preview: null,
   }
},

4. In our Laravel Controller:

class PhotoController 
{
    public function store(array $input)
    {
        Validator::make($input, [
            'photo' => ['nullable', 'image', 'max:1024'],
        ]);

        if (isset($input['photo'])) {
           $photo->storePublicly();
        }
    }
}

Answer 4

use formData

const fd = new FormData()

fd.append('file', this.form.file)

this.$inertia.post(route('file.register'), fd)