Upload files from Vue to Laravel with Inertia

The upload “works”, the database has a path, and the image is a broken icon. Or the file field is empty on every PUT. Uploading a cover image in Laravel + Vue is ordinary multipart, with three traps. Here is the full flow.

A file input in an Inertia form is still a normal multipart request. Laravel validates it, stores it, and redirects back. You do not need a second upload library for a cover image on the post form.

The column and the link#

php artisan make:migration add_cover_path_to_posts_table --table=posts
php artisan storage:link

public function up(): void
{
    Schema::table('posts', function (Blueprint $table) {
        $table->string('cover_path')->nullable();
    });
}

Validate and store#

public function update(Request $request, Post $post): RedirectResponse
{
    $data = $request->validate([
        'title' => ['required', 'string', 'max:255'],
        'excerpt' => ['required', 'string'],
        'cover' => ['nullable', 'image', 'max:2048'],
    ]);

    if ($request->hasFile('cover')) {
        $data['cover_path'] = $request->file('cover')->store('covers', 'public');
        unset($data['cover']);
    }

    $post->update($data);

    return to_route('posts.edit', $post);
}

Unset cover before update() so Eloquent does not try to write the uploaded file object into a string column.

Pass the current path to the page:

'post' => $post->only(['id', 'title', 'excerpt', 'cover_path']),

The Vue form#

<script setup lang="ts">
import { Form } from "@inertiajs/vue3";

defineProps<{
  post: {
    id: number;
    title: string;
    excerpt: string;
    cover_path: string | null;
  };
}>();
</script>

<template>
  <Form
    :action="`/posts/${post.id}`"
    method="post"
    #default="{ errors, processing, progress }"
    class="space-y-4"
  >
    <input type="hidden" name="_method" value="put" />
    <input name="title" :defaultValue="post.title" />
    <p v-if="errors.title">{{ errors.title }}</p>

    <textarea name="excerpt" :defaultValue="post.excerpt" />
    <p v-if="errors.excerpt">{{ errors.excerpt }}</p>

    <img
      v-if="post.cover_path"
      :src="`/storage/${post.cover_path}`"
      alt=""
      class="max-h-40"
    />

    <input type="file" name="cover" accept="image/*" />
    <p v-if="errors.cover">{{ errors.cover }}</p>
    <progress v-if="progress" :value="progress.percentage" max="100" />

    <button :disabled="processing">Save</button>
  </Form>
</template>

progress is set while the body is uploading. processing stays true until Laravel responds. Disable the button for the whole request, not only while the bar moves.

A validation error for cover (“The cover field must be an image”) comes back on the same page, the same way errors.title does in the CRUD guide.

Replace and delete#

store() does not remove the previous file. If the post already has a cover, delete it before saving the new one:

use Illuminate\Support\Facades\Storage;

if ($request->hasFile('cover')) {
    if ($post->cover_path) {
        Storage::disk('public')->delete($post->cover_path);
    }

    $data['cover_path'] = $request->file('cover')->store('covers', 'public');
}

Do this in the same request as the database update. A queue is the wrong place for “the user just picked a new avatar” unless the file is large enough that the HTTP request times out.

Production#

The public disk is fine for images you are happy to serve from the app server. For anything private, use a non-public disk and a temporary URL. For more than one server, the local disk is the wrong place: the next request may hit a machine that does not have the file. Point the disk at S3-compatible storage then. The Vue form does not change.

php artisan storage:link is once per machine when that machine serves the public disk. Laravel Cloud resets the app disk on each deploy, so do not rely on the symlink there. The deploy guide is the rest of that list. It will not create the covers directory for you. store() does that on first upload.

Recap#

• Link the storage once; save paths, not bytes.
• image + max in kilobytes on the server.
• Spoof PUT with _method when a file is attached.
• Clean up replaced files; move to object storage when you scale.

FAQ#

Next steps#

• CRUD with Inertia and Vue
• Laravel Precognition with Vue: live validation, including files.
• Deploy a Laravel + Vue app

Sources#

• Laravel 13: File storage
• Laravel 13: Validation, files
• Inertia v3: File uploads