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?

Stefano Amorelli · Accepted Answer · 2020-12-27 16:17:42Z

7

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

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>

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
    });
},

In our data function:

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

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();
        }
    }
}

answered Dec 27, 2020 at 16:17

Stefano Amorelli

4,8843 gold badges17 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MrEduar Over a year ago

Works perfect with form.post and add '_method': 'PUT' to params.. Thank you!

Stefano Amorelli Over a year ago

Always happy to help @MrEduar ! :)

Happy Coder Over a year ago

When I add this I am getting, The PUT method is not supported for route pateints/create. Supported methods: GET, HEAD, POST

chojisan · Accepted Answer · 2020-10-11 16:13:04Z

2

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
        })
    }
}

answered Oct 11, 2020 at 16:13

chojisan

214 bronze badges

1 Comment

Happy Coder Over a year ago

When I add this I am getting, The PUT method is not supported for route pateints/create. Supported methods: GET, HEAD, POST

Malinda Wijekoon · Accepted Answer · 2020-12-23 18:25:41Z

-1

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

answered Dec 23, 2020 at 18:25

Malinda Wijekoon

3112 gold badges4 silver badges13 bronze badges

Comments

De Luis · Accepted Answer · 2021-01-19 03:57:23Z

-1

use formData

const fd = new FormData()

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

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

answered Jan 19, 2021 at 3:57

De Luis

9

Collectives™ on Stack Overflow

How to upload files with inertia js and laravel 8.0

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related