Laravel inertia multi-part form data

Question

I want to create a membership form with picture upload and other input data required. I have a form with input file and input text which to be considered as multi-part data. I am using the Laravel 8 and Inertia.js.

Here is what I've tried:

In my Form, I have like this:

<form action="/member" method="POST" @submit.prevent="createMember">                          
    <div class="card-body">
    <div class="form-group">
        <label for="exampleInputFile">Picture</label>
        <div class="input-group">
        <div class="custom-file">
            <input type="file" class="custom-file-input" id="exampleInputFile" @input="form.picture">
            <label class="custom-file-label" for="exampleInputFile">Choose image</label>
        </div>
        <div class="input-group-append">
            <span class="input-group-text">Upload</span>
        </div>
        </div>
    </div> 
    <div class="form-group">
        <label for="exampleInputEmail1">First name</label>                               
        <input type="text" class="form-control" id="fname" placeholder="First name" v-model="form.firstname">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail1">Middle name</label>
        <input type="text" class="form-control" id="mname" placeholder="Middle name" v-model="form.middlename">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail1">Last name</label>
        <input type="text" class="form-control" id="lname" placeholder="Last name" v-model="form.lastname">
    </div>
    <div class="col-md-12">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail1">Name ext</label>
        <input type="text" class="form-control" id="next" placeholder="Name extension" v-model="form.name_ext">
    </div>
    
    <div class="form-group">
        <label>Membership Date:</label>
        <div class="input-group date" id="reservationdate" data-target-input="nearest">
            <input type="text" class="form-control datetimepicker-input" id="mem_date" data-target="#reservationdate" v-model="form.membership_date"/>
            <div class="input-group-append" data-target="#reservationdate" data-toggle="datetimepicker">
                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label>Date of Birth:</label>
        <div class="input-group date" id="reservationdate" data-target-input="nearest">
            <input type="text" class="form-control datetimepicker-input" id="date_of_birth" data-target="#reservationdate" v-model="form.date_of_birth"/>
            <div class="input-group-append" data-target="#reservationdate" data-toggle="datetimepicker">
                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
            </div>
        </div>
    </div>

        <div class="form-group">
        <label>Sex:</label>
        <div class="radio-inline">
            <label class="radio radio-solid">
                <input type="radio" name="travel_radio" class="details-input" value="Male" v-model="form.sex"/> Male
                <span></span>
            </label>
            <label class="radio radio-solid">
                <input type="radio" name="travel_radio" class="details-input" value="Female" v-model="form.sex"/> Female
                <span></span>
            </label>
        </div>
    </div>
    
                                
    </div>
    <!-- /.card-body -->

    <div class="card-footer">
    <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</form>

then I have tried vue and inertia implementation like this:

export default {        

    props: [],

    components: {
        AppLayout,    
    },

    data() {
        return {
        form: {
            picture: '',
            firstname: '',
            middlename: '',
            lastname: '',
            name_ext: '',
            date_of_birth: '',
            sex: '',
            membership_date: '',              
        }
        }
    },

    methods: {
        createMember() {
        this.$inertia.post('/member', this.form, {
            _method: 'put',
            picture: this.form.picture,
            onSuccess: () => {
            console.log('success');
            // $('.toastrDefaultSuccess').click(function() {
            //   toastr.success('Successfully Added');
            // });
            },
            onError: (errors) => {
            console.log(errors);
            },
        })
        }
    }
}

then from my backend, I tried to dd the request and got null from picture:

public function store(MemberPost $request) {
    dd($request);
}

Answer 1

if you using multi-upload remove array from files
before: <input type="file" @input="form.image = $event.target.files[0]" multiple/>

after: <input type="file" @input="form.image = $event.target.files" multiple/>

Answer 2

This way works for me

 this.$inertia.post('/member', this.form)

Answer 3

Assuming you are using inertia 0.8.0 or above, you can use the inertia form helper. This will automatically transform the data to a FormData object if necessary.

Change your data method to:

data() {
    return {
        form: this.$inertia.form({
            picture: '',
            firstname: '',
            middlename: '',
            lastname: '',
            name_ext: '',
            date_of_birth: '',
            sex: '',
            membership_date: '',              
        })
    }
}

and the createMember function to:

createMember() {
    // abbreviated for clarity
    this.form.post('/member')
}

More info: docs. If you need to migrate FormData from inertia < 0.8.0 to a current version, see this page.

Answer 4

add enctype="multipart/form-data" to form tag

and you need move the picture to directory. example

$name = $file->getClientOriginalName();
$file->move('uploads/posts/',$name);

sorry, i dont know how to implement this code to inertia.