Tải file lên

import { router } from "@inertiajs/vue3";

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

import { router } from "@inertiajs/react";

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

import { router } from "@inertiajs/svelte";

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

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

import { useForm } from "@inertiajs/react";

const { data, setData, post, progress } = useForm({
  name: null,
  avatar: null,
});

function submit(e) {
  e.preventDefault();
  post("/users");
}

return (
  <form onSubmit={submit}>
    <input
      type="text"
      value={data.name}
      onChange={(e) => setData("name", e.target.value)}
    />
    <input type="file" onChange={(e) => setData("avatar", e.target.files[0])} />
    {progress && (
      <progress value={progress.percentage} max="100">
        {progress.percentage}%
      </progress>
    )}
    <button type="submit">Submit</button>
  </form>
);

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

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

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

<form onsubmit={submit}>
    <input type="text" bind:value={form.name} />
    <input type="file" oninput={e => form.avatar = e.target.files[0]} />
    {#if form.progress}
        <progress value={form.progress.percentage} max="100">
            {form.progress.percentage}%
        </progress>
    {/if}
    <button type="submit">Submit</button>
</form>

import { router } from "@inertiajs/vue3";

router.post(`/users/${user.id}`, {
  _method: "put",
  avatar: form.avatar,
});

import { router } from "@inertiajs/react";

router.post(`/users/${user.id}`, {
  _method: "put",
  avatar: form.avatar,
});

import { router } from "@inertiajs/svelte";

router.post(`/users/${user.id}`, {
  _method: "put",
  avatar: form.avatar,
});