Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

trevorpan's avatar

Empty array when submitting images using spatie/media-library pro components with inertiajs & vuejs

Having quite a time submitting an image using spatie/media-library with inertiajs.

I have this working great in another project without inertia however, the media-library component does not seem to pass the images to the form.projectPics. Upon a post request the payload is always: "projectPics": null, I've tried submitting without inertia, this.projectPics as a separate attribute.

What is preventing the images from being submitted?

Thank you very much ~

//createproject.vue
<template>
...
<div id="projectPicUploaderCreate">
          <media-library-attachment
            name="projectPics"
            v-model="form.projectPics"
            :max-items="10"
            :validation-rules="{
              accept: ['application/pdf', 'image/png', 'image/jpeg'],
              maxSizeInKB: 15360,
            }"
            :validation-errors="$errors"
            multiple
            @is-ready-to-submit-change="isReadyToSubmit = $event"
            @has-uploads-in-progress-change="hasUploadsInProgress = $event"
          />
        </div>
...
</template>
<script>
import { MediaLibraryAttachment } from "../../../../vendor/spatie/laravel-medialibrary-pro/resources/js/media-library-pro-vue3-attachment";
import { useForm } from "@inertiajs/vue3";

export default {
  components: {
    MediaLibraryAttachment,
},
...
  data() {
    return {
      hasUploadsInProgress: true,
      isReadyToSubmit: true,
      form: useForm({
      ...
      projectPics: null,
      ...
methods: {
    store() {
      this.form.post("/projects",
      //also tried { projectPics: this.projectPics }
}
0 likes
0 replies

Please or to participate in this conversation.