CODEWITHSUNDEEP
laravelinertiajs
thearyanahmed
thearyanahmed

Reputation: 606

How to upload files with inertia js and laravel 8.0

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 beenenter image description here 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?

Upvotes: 5

Views: 10981

Answers (4)

De Luis
De Luis

Reputation: 9

use formData

const fd = new FormData()

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

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

Upvotes: -1

Stefano Amorelli
Stefano Amorelli

Reputation: 4854

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>
  1. 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
    });
},
  1. In our data function:
data() {
   return {
       form: this.$inertia.form({
           '_method': 'PUT',
           photo: null,
       }, {
           resetOnSuccess: false,
       }),
       preview: null,
   }
},
  1. 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();
        }
    }
}

Upvotes: 7

Malinda Wijekoon
Malinda Wijekoon

Reputation: 301

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

Upvotes: -1

chojisan
chojisan

Reputation: 21

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

Upvotes: 2

Related Questions