File Uploads

Caution

This is documentation for Inertia.js v1, which is no longer actively maintained. Please refer to the v3 docs.

Formdata Conversion

When making Inertia requests that include files (even nested files), Inertia will automatically convert the request data into a FormData object. This conversion is necessary in order to submit a multipart/form-data request via XHR.

If you would like the request to always use a FormData object regardless of whether a file is present in the data, you may provide the forceFormData option when making the request.

Vue 2Vue 3ReactSvelte

import { router } from '@inertiajs/vue2'

router.post('/users', data, {
    forceFormData: true,
})

You can learn more about the FormData interface via its MDN documentation.

Prior to version 0.8.0, Inertia did not automatically convert requests to FormData. If you’re using an Inertia release prior to this version, you will need to manually perform this conversion.

File Upload Example

Let’s examine a complete file upload example using Inertia. This example includes both a name text input and an avatar file input.

Vue 2Vue 3ReactSvelte

<template>
    <form @submit.prevent="submit">
        <input type="text" v-model="form.name" />
        <input type="file" @input="form.avatar = $event.target.files[0]" />
        <progress v-if="form.progress" :value="form.progress.percentage" max="100">
            {{ form.progress.percentage }}%
        </progress>
        <button type="submit">Submit</button>
    </form>
</template>

<script>
import { useForm } from '@inertiajs/vue2'

export default {
    data() {
        return {
            form: useForm({
                name: null,
                avatar: null,
            }),
        }
    },
    methods: {
        submit() {
            this.form.post('/users')
        },
    },
}
</script>

This example uses the Inertia form helper for convenience, since the form helper provides easy access to the current upload progress. However, you are free to submit your forms using manual Inertia visits as well.

Multipart Limitations

Uploading files using a multipart/form-data request is not natively supported in some server-side frameworks when using the PUT,PATCH, or DELETE HTTP methods. The simplest workaround for this limitation is to simply upload files using a POST request instead.

However, some frameworks, such as Laravel and Rails , support form method spoofing, which allows you to upload the files using POST, but have the framework handle the request as a PUT or PATCH request. This is done by including a _method attribute in the data of your request.

Vue 2Vue 3ReactSvelte

import { router } from '@inertiajs/vue2'

router.post(`/users/${user.id}\

On the InertiaCore side, accept the upload as IFormFile on a [FromForm] model. ASP.NET Core handles the multipart parsing and ModelState validation, and InertiaCore forwards any errors as the errors prop:

[HttpPost("/users/{id:int}")]
public async Task<IActionResult> Update(int id, [FromForm] UserUpdateRequest request)
{
    if (!ModelState.IsValid)
        return await Show(id);

    var user = await _users.FindAsync(id);
    user.Name = request.Name;

    if (request.Avatar is { Length: > 0 })
    {
        user.AvatarPath = await _files.SaveAsync(request.Avatar);
    }

    await _context.SaveChangesAsync();
    return Inertia.Render("Users/Show", new { User = user });
}

public class UserUpdateRequest
{
    [Required] public string Name { get; set; } = string.Empty;
    public IFormFile? Avatar { get; set; }
}