Skip to content

File uploads


When submitting data that include files, Hybridly will automatically convert the request data into a FormData object. This is necessary, as file uploads are only possible when a form encoding is set to multipart/form-data.

It's also possible to send a FormData object directly, or force the conversion using useFormData.

const data = new FormData()
// ..., {


When using the form util, a progress object is exposed. It contains the current progress percentage and the associated AxiosProgressEvent.

const form = useForm(/* ... */)
// form.progress?.percentage
// form.progress?.event

The example below shows how a file can be uploaded and its progress be displayed.

<script setup lang="ts">
const form = useForm<App.Data.UpdateProfileData>({
	method: 'POST',
	url: '/upload',
	fields: {
		first_name: '',
		profile_picture: undefined

// A `file` input is not `v-model` able, so its `change`
// event needs to be used to find the uploaded file.
function onFileChange(event: Event) {
	const target = as HTMLInputElement
	form.fields.profile_picture = target.files?.[0]

	<form @submit.prevent="form.submit">
		{{ form.progress?.percentage ?? 0 }}%

		<input v-model="form.fields.first_name" type="text" />
		<input @change="onFileChange" type="file" />


It is not natively supported by PHP to upload files using multipart/form-data and the PUT, PATCH or DELETE methods.

Fortunately, Laravel supports method spoofing, which means one can add a _method field with PUT, PATCH or DELETE and send the request using POST.

Hybridly automatically does this when detecting files and the PUT, PATCH or DELETE method, unless spoof is set to false.

const avatar = new File()
// ..., {
	data: {
		_method: 'PUT',