Inertia Rails

Appearance

File Uploads ​

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.

js
import { router } from '@inertiajs/vue3'

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

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

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
<script setup>
import { useForm } from '@inertiajs/vue3'

const form = useForm({
  name: null,
  avatar: null,
})

function submit() {
  form.post('/users')
}
</script>

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

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 ​

Some server-side frameworks, such as Laravel, can't read multipart/form-data requests sent with the PUT, PATCH, or DELETE HTTP methods, and have to upload files with POST instead. Rails has no such limitation, so you can upload files with any method:

js
import { router } from '@inertiajs/vue3'

router.patch(`/users/${user.id}`, {
  avatar: form.avatar,
})

If you still need to send a POST request that Rails handles as PUT or PATCH, use the X-HTTP-Method-Override header. A _method attribute in the data only works in form and multipart requests: Inertia sends JSON when the data contains no files, and Rack::MethodOverride ignores _method in JSON.