Why is my laravel jetstream vue form request giving me a repose of null

Question

Im currectly working on a laravel jetstream project where i want to be able to import an excel file which will be put into the database. The problem right now is that in my controller the $request->all(); gives me a response of null

Controller:

    {

        dd($request->all());
        // $validator = Validator::make($request->all(), [
        //     'file'  => 'required|max:50000'
        // ]);

        // if ($validator->passes()) {
        //     $dataTime = date('Ymd_His');
        //     $file = $request->file('file');
        //     $fileName =  $dataTime .  '-' . $file->getClientOriginalName();
        //     $savePath = public_path('/upload/');

        //     $file->move($savePath, $fileName);

        //     dd($file);

        //     return Inertia::render('Import/Show')->with(['success' => 'Bestand Succesvol opgeslagen.']);
        // } else {
        //     dd($validator->errors()->all());
        //     return Inertia::render('Import/Show')->with(['errors' => $validator->errors()->all()]);
        // }
    }

Vue component

<template>
  <app-layout>
    <template #header>
      <h2 class="font-semibold text-xl text-gray-800 leading-tight">Import</h2>
    </template>

    <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
      <form
        @submit.prevent="submit"
        method="post"
        enctype="multipart/form-data"
      >
        <jet-label for="file" value="Kies Excel bestand om te uploaden!" />
        <input type="file" id="file" v-on:change="onFileChange" />
        <br />
        <jet-button> Verstuur </jet-button>
      </form>
    </div>
  </app-layout>
</template>

<script>
import AppLayout from "./../../Layouts/AppLayout";
import JetButton from "./../../Jetstream/Button";
import JetInput from "./../../Jetstream/Input";
import JetLabel from "./../../Jetstream/Label";
import JetFormSection from "./../../Jetstream/FormSection";

export default {
  components: {
    AppLayout,
    JetButton,
    JetInput,
    JetFormSection,
    JetLabel,
  },

  data() {
    return {
      file: "",
    };
  },

  methods: {
    onFileChange(e) {
      console.log(e.target.files[0]);

      this.file = e.target.files[0];
    },
    submit() {
      console.log(this.file);
      this.$inertia.post(route("import.process", this.file));
    },
  },
};
</script>

i would like to know what i'm doing wrong because right now i cant continue working on actually putting the content in my database.

Answer 1

You should change your data()

data() {
        return {
            form: this.$inertia.form({
                file: '',
            }),
        }
    },

and then call the post in this way

this.form.post(route('import.process'), {
   //your logic
});