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

Sidney Gijzen · Accepted Answer · 2021-04-23 10:15:56Z

2

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.

edited Apr 23, 2021 at 10:15

answered Apr 23, 2021 at 10:05

Sidney Gijzen

2,0113 gold badges27 silver badges30 bronze badges

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

Comments

Darwin Llacuna · Accepted Answer · 2022-07-18 05:44:08Z

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/>

answered Jul 18, 2022 at 5:44

Darwin Llacuna

112 bronze badges

Comments

Dharman · Accepted Answer · 2021-04-23 08:20:17Z

0

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.

edited Apr 23, 2021 at 8:20

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Apr 23, 2021 at 8:14

Dony Maulana Yusuf R

133 bronze badges

1 Comment

Jc John Over a year ago

I tried to add enctype="multipart/form-data" , still null

Yaakov · Accepted Answer · 2021-12-19 18:38:34Z

0

This way works for me

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

answered Dec 19, 2021 at 18:38

Yaakov

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Laravel inertia multi-part form data

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related