> ## Documentation Index
> Fetch the complete documentation index at: https://inertiajs-vi.tuantq.online/llms.txt
> Use this file to discover all available pages before exploring further.

# Tải file lên

<Warning>Đây là tài liệu Inertia.js v1, phiên bản không còn được duy trì tích cực. Vui lòng tham khảo [tài liệu v3](/v3/getting-started/index).</Warning>

## Chuyển đổi sang FormData

Khi thực hiện request Inertia có chứa file (kể cả file lồng nhau), Inertia sẽ tự động chuyển đổi dữ liệu request thành object `FormData`. Việc chuyển đổi này là cần thiết để gửi request `multipart/form-data` qua XHR.

Nếu muốn request luôn sử dụng object `FormData` bất kể dữ liệu có chứa file hay không, bạn có thể truyền tùy chọn `forceFormData` khi thực hiện request.

<CodeGroup>
  ```js Vue 2 icon="vuejs" theme={null}
  import { router } from '@inertiajs/vue2'

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

  ```js Vue 3 icon="vuejs" theme={null}
  import { router } from '@inertiajs/vue3'

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

  ```js React icon="react" theme={null}
  import { router } from '@inertiajs/react'

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

  ```js Svelte icon="s" theme={null}
  import { router } from '@inertiajs/svelte'

  router.post('/users', data, {
      forceFormData: true,
  })
  ```
</CodeGroup>

Bạn có thể tìm hiểu thêm về interface `FormData` trong [tài liệu MDN](https://developer.mozilla.org/en-US/docs/Web/API/FormData).

Trước phiên bản 0.8.0, Inertia không tự động chuyển request sang `FormData`. Nếu đang sử dụng bản phát hành Inertia cũ hơn phiên bản này, bạn cần tự thực hiện việc chuyển đổi.

## Ví dụ tải file lên

Hãy xem một ví dụ hoàn chỉnh về tải file lên bằng Inertia. Ví dụ này bao gồm cả input văn bản `name` và input file `avatar`.

<CodeGroup>
  ```vue Vue 2 icon="vuejs" theme={null}
  <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>
  ```

  ```vue Vue 3 icon="vuejs" theme={null}
  <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>
  ```

  ```jsx React icon="react" theme={null}
  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" value={data.avatar} onChange={e => setData('avatar', e.target.files[0])} />
          {progress && (
              <progress value={progress.percentage} max="100">
                  {progress.percentage}%
              </progress>
          )}
          <button type="submit">Submit</button>
      </form>
  )
  ```

  ```html Svelte icon="s" theme={null}
  <script>
  import { useForm } from '@inertiajs/svelte'

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

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

  <form on:submit|preventDefault={submit}>
      <input type="text" bind:value={$form.name} />
      <input type="file" on:input={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>
  ```
</CodeGroup>

Ví dụ này sử dụng [form helper của Inertia](/forms#form-helper) để thuận tiện hơn, vì form helper cho phép truy cập dễ dàng vào tiến trình tải lên hiện tại. Tuy nhiên, bạn vẫn có thể gửi form bằng [các lần truy cập Inertia thủ công](/v1/the-basics/manual-visits).

## Giới hạn của multipart

Việc tải file bằng request `multipart/form-data` không được hỗ trợ nguyên bản trong một số framework phía máy chủ khi sử dụng các HTTP method `PUT`, `PATCH` hoặc `DELETE`. Cách đơn giản nhất để khắc phục giới hạn này là tải file bằng request `POST`.

Tuy nhiên, một số framework như [Laravel](https://laravel.com/docs/8.x/routing#form-method-spoofing) và [Rails ](https://guides.rubyonrails.org/form_helpers.html#how-do-forms-with-patch-put-or-delete-methods-work-questionmark) hỗ trợ giả lập HTTP method của form, cho phép bạn tải file bằng `POST` nhưng để framework xử lý request như `PUT` hoặc `PATCH`. Cách này được thực hiện bằng cách thêm thuộc tính `_method` vào dữ liệu request.

<CodeGroup>
  ```js Vue 2 icon="vuejs" theme={null}
  import { router } from '@inertiajs/vue2'

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

  ```js Vue 3 icon="vuejs" theme={null}
  import { router } from '@inertiajs/vue3'

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

  ```js React icon="react" theme={null}
  import { router } from '@inertiajs/react'

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

  ```js Svelte icon="s" theme={null}
  import { router } from '@inertiajs/svelte'

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

***

## Tài liệu chính thức

Bài dịch này được đối chiếu từ [tài liệu Inertia.js v1 chính thức](https://inertiajs.com/docs/v1/the-basics/file-uploads). Nếu có khác biệt do phiên bản hoặc cập nhật mới, hãy ưu tiên tài liệu chính thức làm nguồn tham chiếu.