Building a Full-Stack File Upload System with Laravel, Vue.js, and S3

File uploads seem simple until you actually build them. You need validation, progress tracking, security, storage management, and a smooth user experience. And if you're building a SaaS product, you can't just dump files on your server. You need scalable cloud storage.

I've built file upload systems for multiple client projects, and here's what I've learned: getting it right requires careful planning across your entire stack. You need a robust Laravel backend that handles validation and security, a responsive Vue.js frontend with drag-and-drop support, and proper S3 integration for scalable storage.

In this guide, I'll walk through building a complete file upload system from scratch. We'll cover database design, a clean service layer, a Vue 3 component with real-time progress tracking, direct-to-S3 uploads using presigned URLs, and security hardening. By the end, you'll have a production-ready system that handles multiple file uploads without breaking a sweat.

Why This Stack Works

Laravel's filesystem abstraction makes S3 integration almost trivial. You write the same code whether files go to local storage or S3, just change the config. This flexibility saved me hours when migrating a client project from local to S3 as their user base grew. And because it's all behind Laravel's Storage facade, switching between providers (S3, DigitalOcean Spaces, MinIO) is a one-line change.

Vue.js handles the frontend beautifully. Its reactive data system makes progress tracking natural, and the component architecture keeps your upload UI modular and reusable. Plus, Vue's Composition API with <script setup> makes the code incredibly concise compared to the Options API equivalent.

S3 provides unlimited scalable storage without managing servers. You pay only for what you use, and AWS handles availability, backups, and CDN integration through CloudFront if you need it later. For most projects, the cost is negligible. I've run upload systems processing thousands of files monthly for under $5.

Database Schema Design

Let's start with the foundation. Here's the migration for our uploads table:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    public function up(): void
    {
        Schema::create('uploads', function (Blueprint $table) {
            $table->id();
            $table->foreignId('user_id')->constrained()->cascadeOnDelete();
            $table->string('original_name');
            $table->string('filename');
            $table->string('path');
            $table->string('disk')->default('s3');
            $table->string('mime_type');
            $table->unsignedBigInteger('size');
            $table->string('hash', 64)->nullable();
            $table->json('metadata')->nullable();
            $table->timestamps();
            $table->softDeletes();

            $table->index(['user_id', 'hash']);
        });
    }

    public function down(): void
    {
        Schema::dropIfExists('uploads');
    }
};

I include hash for deduplication. If a user uploads the same file twice, you detect it and skip the duplicate, saving S3 costs. The metadata JSON column stores image dimensions, video duration, or any file-specific data you need later. And soft deletes let you recover accidentally deleted files before running cleanup jobs.

Setting Up S3 Configuration

Install the Flysystem S3 adapter:

composer require league/flysystem-aws-s3-v3 "^3.0"

Configure your .env:

AWS_ACCESS_KEY_ID=your_access_key
AWS_SECRET_ACCESS_KEY=your_secret_key
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=your-bucket-name
AWS_USE_PATH_STYLE_ENDPOINT=false

Laravel ships with S3 configuration in config/filesystems.php. The important part is setting visibility to private:

's3' => [
    'driver' => 's3',
    'key' => env('AWS_ACCESS_KEY_ID'),
    'secret' => env('AWS_SECRET_ACCESS_KEY'),
    'region' => env('AWS_DEFAULT_REGION'),
    'bucket' => env('AWS_BUCKET'),
    'url' => env('AWS_URL'),
    'endpoint' => env('AWS_ENDPOINT'),
    'use_path_style_endpoint' => env('AWS_USE_PATH_STYLE_ENDPOINT', false),
    'throw' => false,
    'visibility' => 'private',
],

Private by default. Always. You don't want uploaded files publicly accessible without authentication. We'll generate signed URLs when users need to download files.

Building the Upload Model

Here's a clean Upload model with methods you'll actually use:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;
use Illuminate\Database\Eloquent\SoftDeletes;
use Illuminate\Support\Facades\Storage;

class Upload extends Model
{
    use SoftDeletes;

    protected $fillable = [
        'user_id', 'original_name', 'filename', 'path',
        'disk', 'mime_type', 'size', 'hash', 'metadata',
    ];

    protected $casts = [
        'metadata' => 'array',
        'size' => 'integer',
    ];

    public function user(): BelongsTo
    {
        return $this->belongsTo(User::class);
    }

    public function getTemporaryUrl(int $minutes = 5): string
    {
        return Storage::disk($this->disk)->temporaryUrl(
            $this->path,
            now()->addMinutes($minutes)
        );
    }

    public function deleteFile(): bool
    {
        return Storage::disk($this->disk)->delete($this->path);
    }

    public function getFormattedSizeAttribute(): string
    {
        $units = ['B', 'KB', 'MB', 'GB'];
        $size = $this->size;

        for ($i = 0; $size > 1024 && $i < count($units) - 1; $i++) {
            $size /= 1024;
        }

        return round($size, 2) . ' ' . $units[$i];
    }

    public function isImage(): bool
    {
        return str_starts_with($this->mime_type, 'image/');
    }
}

The getTemporaryUrl method is crucial. Since your S3 files are private, you generate signed URLs that expire after a few minutes. Users get a download link that works temporarily but can't be shared permanently.

Creating the Upload Service

I always extract file handling logic into a service class. Controllers should be thin. Business logic belongs in services. This pattern keeps things testable and reusable. If you're interested in this approach, I wrote about design patterns in Laravel that covers the service pattern in more depth.

<?php

namespace App\Services;

use App\Models\Upload;
use Illuminate\Http\UploadedFile;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Str;

class UploadService
{
    public function __construct(
        private string $disk = 's3'
    ) {}

    public function upload(UploadedFile $file, int $userId): Upload
    {
        $filename = $this->generateFilename($file);
        $hash = hash_file('sha256', $file->getRealPath());

        // Check for duplicate
        $existing = Upload::where('user_id', $userId)
            ->where('hash', $hash)
            ->first();

        if ($existing) {
            return $existing;
        }

        $path = Storage::disk($this->disk)->putFileAs(
            'uploads/' . date('Y/m'),
            $file,
            $filename
        );

        $metadata = $this->extractMetadata($file);

        return Upload::create([
            'user_id' => $userId,
            'original_name' => $file->getClientOriginalName(),
            'filename' => $filename,
            'path' => $path,
            'disk' => $this->disk,
            'mime_type' => $file->getMimeType(),
            'size' => $file->getSize(),
            'hash' => $hash,
            'metadata' => $metadata,
        ]);
    }

    public function uploadMultiple(array $files, int $userId): array
    {
        return array_map(
            fn($file) => $this->upload($file, $userId),
            $files
        );
    }

    public function delete(Upload $upload): bool
    {
        $upload->deleteFile();
        return $upload->delete();
    }

    private function generateFilename(UploadedFile $file): string
    {
        return Str::uuid() . '.' . $file->getClientOriginalExtension();
    }

    private function extractMetadata(UploadedFile $file): ?array
    {
        if (!str_starts_with($file->getMimeType(), 'image/')) {
            return null;
        }

        $imageInfo = getimagesize($file->getRealPath());

        return [
            'width' => $imageInfo[0] ?? null,
            'height' => $imageInfo[1] ?? null,
        ];
    }
}

The deduplication logic saved a client thousands in S3 costs. Users often upload the same company logo or document multiple times. Why store duplicates? The SHA-256 hash catches exact matches, and you can verify that quickly with a hash generator if you ever need to debug it manually.

The UUID-based filenames prevent conflicts and path traversal attacks in one move. Never use the original filename for storage. Ever.

Building the Upload Controller

Now let's create the API endpoints. I'm keeping the controller thin, delegating to the service:

<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use App\Http\Requests\UploadRequest;
use App\Models\Upload;
use App\Services\UploadService;
use Illuminate\Http\JsonResponse;

class UploadController extends Controller
{
    public function __construct(
        private UploadService $uploadService
    ) {}

    public function store(UploadRequest $request): JsonResponse
    {
        $files = $request->file('files');
        $userId = auth()->id();

        if (!is_array($files)) {
            $upload = $this->uploadService->upload($files, $userId);

            return response()->json([
                'success' => true,
                'upload' => $this->formatUpload($upload),
            ], 201);
        }

        $uploads = $this->uploadService->uploadMultiple($files, $userId);

        return response()->json([
            'success' => true,
            'uploads' => array_map(
                fn($upload) => $this->formatUpload($upload),
                $uploads
            ),
        ], 201);
    }

    public function index(): JsonResponse
    {
        $uploads = Upload::where('user_id', auth()->id())
            ->latest()
            ->paginate(20);

        return response()->json([
            'uploads' => $uploads->map(fn($u) => $this->formatUpload($u)),
            'pagination' => [
                'current_page' => $uploads->currentPage(),
                'total' => $uploads->total(),
                'per_page' => $uploads->perPage(),
            ],
        ]);
    }

    public function download(Upload $upload): JsonResponse
    {
        $this->authorize('view', $upload);

        return response()->json([
            'url' => $upload->getTemporaryUrl(5),
            'expires_in' => 300,
        ]);
    }

    public function destroy(Upload $upload): JsonResponse
    {
        $this->authorize('delete', $upload);

        $this->uploadService->delete($upload);

        return response()->json(['success' => true]);
    }

    private function formatUpload(Upload $upload): array
    {
        return [
            'id' => $upload->id,
            'original_name' => $upload->original_name,
            'mime_type' => $upload->mime_type,
            'size' => $upload->size,
            'formatted_size' => $upload->formatted_size,
            'is_image' => $upload->isImage(),
            'metadata' => $upload->metadata,
            'created_at' => $upload->created_at->toISOString(),
        ];
    }
}

Notice the policy authorization with $this->authorize(). You don't want users downloading or deleting each other's files. Create an UploadPolicy that checks $upload->user_id === $user->id and you're covered.

Validation: Your First Line of Defense

Validation is critical for security. Here's the form request:

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class UploadRequest extends FormRequest
{
    public function authorize(): bool
    {
        return auth()->check();
    }

    public function rules(): array
    {
        return [
            'files' => ['required'],
            'files.*' => [
                'file',
                'max:10240', // 10MB per file
                'mimes:jpg,jpeg,png,gif,pdf,doc,docx,xls,xlsx,zip',
            ],
        ];
    }

    public function messages(): array
    {
        return [
            'files.*.max' => 'Each file must not exceed 10MB.',
            'files.*.mimes' => 'Allowed types: images, PDFs, documents, spreadsheets, ZIP files.',
        ];
    }
}

Adjust the max and mimes based on your needs. I kept it to 10MB here, but I've built systems that handle 100MB+ video uploads. For files that large, you'll want chunked uploads with queue processing instead of this standard approach. Just make sure your php.ini matches whatever limit you set:

upload_max_filesize = 100M
post_max_size = 100M
max_execution_time = 300

Building the Vue.js Upload Component

Now for the frontend. This Vue 3 component handles drag-and-drop, multiple files, and progress tracking. I'm using Tailwind CSS classes for styling, but you can swap in your own CSS:

<template>
  <div class="max-w-3xl mx-auto p-8">
    <div
      class="border-2 border-dashed rounded-lg p-12 text-center transition-all"
      :class="isDragging
        ? 'border-blue-500 bg-blue-50'
        : 'border-gray-300 bg-gray-50'"
      @drop.prevent="handleDrop"
      @dragover.prevent="isDragging = true"
      @dragleave="isDragging = false"
    >
      <input
        type="file"
        ref="fileInput"
        multiple
        @change="handleFileSelect"
        class="hidden"
      />

      <div v-if="!uploading" class="flex flex-col items-center gap-4">
        <p>
          Drag files here or
          <button
            @click="$refs.fileInput.click()"
            class="text-blue-500 underline"
          >
            browse
          </button>
        </p>
        <p class="text-sm text-gray-500">
          JPG, PNG, PDF, DOC, XLS, ZIP (max 10MB each)
        </p>
      </div>

      <div v-else class="space-y-4">
        <div v-for="file in files" :key="file.name">
          <div class="flex justify-between text-sm mb-1">
            <span>{{ file.name }}</span>
            <span>{{ file.progress }}%</span>
          </div>
          <div class="h-2 bg-gray-200 rounded overflow-hidden">
            <div
              class="h-full bg-blue-500 transition-all"
              :style="{ width: file.progress + '%' }"
            />
          </div>
        </div>
      </div>
    </div>

    <div v-if="uploads.length" class="mt-8 space-y-2">
      <h3 class="font-semibold">Recent Uploads</h3>
      <div
        v-for="upload in uploads"
        :key="upload.id"
        class="flex justify-between items-center p-4 border rounded"
      >
        <div>
          <span class="font-medium">{{ upload.original_name }}</span>
          <span class="text-sm text-gray-500 ml-2">
            {{ upload.formatted_size }}
          </span>
        </div>
        <div class="flex gap-2">
          <button
            @click="downloadFile(upload)"
            class="px-3 py-1 bg-blue-500 text-white rounded text-sm"
          >
            Download
          </button>
          <button
            @click="deleteFile(upload)"
            class="px-3 py-1 bg-red-400 text-white rounded text-sm"
          >
            Delete
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const fileInput = ref(null);
const isDragging = ref(false);
const uploading = ref(false);
const files = ref([]);
const uploads = ref([]);

const handleFileSelect = (event) => {
  uploadFiles(Array.from(event.target.files));
};

const handleDrop = (event) => {
  isDragging.value = false;
  uploadFiles(Array.from(event.dataTransfer.files));
};

const uploadFiles = async (fileList) => {
  uploading.value = true;

  files.value = fileList.map(file => ({
    name: file.name,
    size: file.size,
    progress: 0,
  }));

  const formData = new FormData();
  fileList.forEach(file => formData.append('files[]', file));

  try {
    const response = await axios.post('/api/uploads', formData, {
      headers: { 'Content-Type': 'multipart/form-data' },
      onUploadProgress: (progressEvent) => {
        const percent = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total
        );
        files.value.forEach(file => { file.progress = percent; });
      },
    });

    const newUploads = Array.isArray(response.data.uploads)
      ? response.data.uploads
      : [response.data.upload];

    uploads.value.unshift(...newUploads);
    files.value = [];
    uploading.value = false;
    fileInput.value.value = '';
  } catch (error) {
    console.error('Upload failed:', error);
    alert('Upload failed: ' + (error.response?.data?.message || 'Unknown error'));
    uploading.value = false;
  }
};

const downloadFile = async (upload) => {
  try {
    const { data } = await axios.get(`/api/uploads/${upload.id}/download`);
    window.open(data.url, '_blank');
  } catch (error) {
    alert('Download failed');
  }
};

const deleteFile = async (upload) => {
  if (!confirm('Delete this file?')) return;

  try {
    await axios.delete(`/api/uploads/${upload.id}`);
    uploads.value = uploads.value.filter(u => u.id !== upload.id);
  } catch (error) {
    alert('Delete failed');
  }
};

onMounted(async () => {
  try {
    const { data } = await axios.get('/api/uploads');
    uploads.value = data.uploads;
  } catch (error) {
    console.error('Failed to fetch uploads:', error);
  }
});
</script>

This component does everything: drag-and-drop detection, per-file progress bars, upload list management, and download/delete actions. The onUploadProgress callback from Axios makes progress tracking simple. One thing to note: the progress tracking here shows the same percentage for all files in a batch since they're sent as a single FormData request. If you need per-file progress, upload files individually in a loop.

Direct-to-S3 Uploads: Skip the Server

For better performance, you can skip your Laravel server entirely and upload straight to S3. Your server generates a presigned URL, the browser uploads directly, then notifies your backend when it's done. This eliminates your server as a bottleneck. Especially useful when you're handling lots of concurrent uploads.

Laravel has a built-in temporaryUploadUrl() method for this (available since Laravel 9.52 for S3, and since Laravel 12 for the local driver too):

use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Str;

public function getPresignedUploadUrl(Request $request): JsonResponse
{
    $request->validate([
        'filename' => 'required|string',
        'mime_type' => 'required|string',
    ]);

    $extension = pathinfo($request->input('filename'), PATHINFO_EXTENSION);
    $path = 'uploads/' . date('Y/m') . '/' . Str::uuid() . '.' . $extension;

    ['url' => $url, 'headers' => $headers] = Storage::disk('s3')
        ->temporaryUploadUrl($path, now()->addMinutes(10));

    return response()->json([
        'url' => $url,
        'headers' => $headers,
        'path' => $path,
    ]);
}

Then upload from Vue:

const uploadDirectToS3 = async (file) => {
  // Get presigned upload URL from your backend
  const { data } = await axios.post('/api/uploads/presigned-url', {
    filename: file.name,
    mime_type: file.type,
  });

  // Upload directly to S3 (bypasses your server)
  await axios.put(data.url, file, {
    headers: {
      ...data.headers,
      'Content-Type': file.type,
    },
  });

  // Register the upload in your database
  await axios.post('/api/uploads/register', {
    path: data.path,
    original_name: file.name,
    mime_type: file.type,
    size: file.size,
  });
};

This is a huge performance win. Your Laravel server just generates URLs and tracks records. S3 handles the actual file transfer. I've seen upload speeds improve by 40-50% with this approach since you're not double-handling the data.

One important detail: temporaryUploadUrl() returns both a URL and headers. Always include those headers in your PUT request, they contain the signature that S3 needs to validate the upload. This is different from the temporaryUrl() method (which generates download URLs only). Don't mix them up.

If you're doing direct S3 uploads, configure CORS on your bucket:

[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["PUT", "POST"],
    "AllowedOrigins": ["https://yourdomain.com"],
    "ExposeHeaders": ["ETag"]
  }
]

Security Best Practices

Never trust user uploads. I can't stress this enough. An uploaded file is essentially arbitrary data from an untrusted source landing on your infrastructure. Treat every upload as potentially malicious until proven otherwise. Here's my checklist for every project:

Validate MIME Types Server-Side

Don't rely on file extensions. Check the actual file content:

use Illuminate\Support\Facades\File;

$mimeType = File::mimeType($file->getRealPath());
$allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'];

if (!in_array($mimeType, $allowedTypes)) {
    throw new \Exception('Invalid file type');
}

Scan for Malware

For production systems handling sensitive data, integrate ClamAV or a cloud scanning service:

use Xenolope\Quahog\Client;

$scanner = new Client('tcp://127.0.0.1:3310');
$result = $scanner->scanFile($file->getRealPath());

if ($result['status'] === 'FOUND') {
    throw new \Exception('Malware detected');
}

Lock Down Your S3 Bucket

Your bucket policy should deny all non-HTTPS access:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Deny",
      "Principal": "*",
      "Action": "s3:*",
      "Resource": "arn:aws:s3:::your-bucket/*",
      "Condition": {
        "Bool": { "aws:SecureTransport": "false" }
      }
    }
  ]
}

And use IAM roles with minimal permissions. Your Laravel application only needs s3:PutObject, s3:GetObject, s3:DeleteObject, and s3:ListBucket on its specific bucket. Nothing more.

Testing Your Upload System

Test uploads with Pest and Laravel's fake storage. This runs fast and doesn't hit S3:

use Illuminate\Http\UploadedFile;
use Illuminate\Support\Facades\Storage;

test('user can upload a file', function () {
    Storage::fake('s3');

    $user = User::factory()->create();
    $file = UploadedFile::fake()->image('photo.jpg', 800, 600)->size(500);

    $response = $this->actingAs($user)
        ->postJson('/api/uploads', ['files' => [$file]]);

    $response->assertStatus(201)
        ->assertJsonStructure([
            'success',
            'uploads' => [['id', 'original_name', 'size']],
        ]);

    Storage::disk('s3')->assertExists(
        'uploads/' . date('Y/m') . '/' . $file->hashName()
    );
});

test('upload rejects files exceeding size limit', function () {
    Storage::fake('s3');

    $user = User::factory()->create();
    $file = UploadedFile::fake()->create('huge.pdf', 20000); // 20MB

    $response = $this->actingAs($user)
        ->postJson('/api/uploads', ['files' => [$file]]);

    $response->assertStatus(422);
});

test('users cannot download other users files', function () {
    $owner = User::factory()->create();
    $intruder = User::factory()->create();

    $upload = Upload::factory()->create(['user_id' => $owner->id]);

    $this->actingAs($intruder)
        ->getJson("/api/uploads/{$upload->id}/download")
        ->assertForbidden();
});

Use Storage::fake() every time. It's fast and doesn't cost money. Test your authorization policies too. That third test catches a bug I've seen in production more than once: missing policy checks that let any authenticated user access any file.

Common Upload Mistakes

I've debugged these issues more times than I'd like to admit:

Not cleaning up orphaned files. If a direct S3 upload succeeds but the registration call to your backend fails, you have a file on S3 with no database record. S3 charges you for storage regardless. Run a scheduled cleanup job that compares S3 files against your uploads table and deletes anything unregistered after 7 days. Better yet, configure S3 lifecycle rules on a tmp/ prefix to auto-delete files after 24 hours, and only move them to a permanent path after successful registration.

Forgetting CORS for direct uploads. If your browser console shows Access-Control-Allow-Origin errors on PUT requests to S3, you haven't configured CORS on your bucket. This trips up everyone the first time. Double-check that your AllowedOrigins matches your actual domain (including the protocol).

No retry logic on the frontend. Network drops happen, especially on mobile. Wrap your upload calls in a retry function with exponential backoff. Three retries with 1s, 2s, and 4s delays will handle most transient failures. Users shouldn't have to manually restart a failed upload.

Trusting file extensions. A file named report.pdf could contain anything. Always validate the MIME type by checking the file's actual content with PHP's mime_content_type() or finfo_file(), not just its extension. Laravel's mimes validation rule does this for you, but add explicit checks in your service layer too.

Skipping authorization checks. Every download and delete endpoint needs policy authorization. Without it, any authenticated user can access or delete any file by guessing IDs. This is one of those bugs that's invisible in development and catastrophic in production.

Alternative Approaches

This custom approach gives you full control, but there are solid alternatives worth knowing about. The right choice depends on your project's complexity and how much customization you need.

Spatie Media Library (v11, supports Laravel 10-13) handles file associations with Eloquent models elegantly. It manages collections, conversions, and responsive image variants automatically. The Pro version includes Vue and React upload components out of the box. Great if you want a battle-tested solution without building everything from scratch. The trade-off is that it adds opinions about how your files are organized, which can feel limiting if your workflow doesn't match.

Livewire file uploads work beautifully if you're already using Livewire. They handle progress tracking, validation, and temporary storage with almost zero JavaScript. You can even configure Livewire to upload directly to S3 for temporary storage, and it automatically cleans up expired files. The downside is that you're tied to Livewire's lifecycle, which makes custom upload UX harder.

Filament's FileUpload component gives you drag-and-drop, image previews, and S3 integration out of the box if you're building an admin panel with Filament. Minimal code, maximum functionality. Perfect for admin CRUD but not ideal for customer-facing upload experiences where you need full design control.

I prefer the custom approach in this guide when I need precise control over the upload UX, queue processing, or complex file workflows. For standard CRUD admin panels, Spatie or Filament will save you days of work.

Frequently Asked Questions

Should I upload files through my server or directly to S3?

For files under 10MB, uploading through your server is simpler and gives you full validation control. For larger files or high-traffic apps, direct-to-S3 with presigned URLs reduces server load significantly. I use the server-side approach for most admin interfaces and direct-to-S3 for public-facing upload features.

How do I handle very large file uploads (100MB+)?

Don't use the standard approach from this guide for files that big. You'll want chunked uploads that split files on the frontend, upload each piece separately, and reassemble on the server or S3. I covered this pattern in detail in my guide on handling large file uploads, including queue-based processing and memory optimization.

What's the best way to generate unique filenames?

UUIDs. Every time. They're globally unique, prevent conflicts across servers, and they don't expose information about your system. I use Str::uuid() combined with the original file extension. You can test this pattern quickly with a UUID generator to see how they look.

How do I serve private S3 files to users?

Use temporary signed URLs via Storage::temporaryUrl(). They expire after a set time (I typically use 5 minutes) and can't be shared permanently. Never make your S3 bucket public to serve files. Always use signed URLs for private content.

Can I process uploaded files asynchronously?

Yes, and you should for anything beyond basic storage. Dispatch a queue job after the upload completes to handle image resizing, thumbnail generation, virus scanning, or text extraction. Your upload endpoint returns immediately, and the heavy processing happens in the background.

Wrapping Up

You now have a complete file upload system: database schema with deduplication, a clean service layer, secure validation and authorization, a responsive Vue component with drag-and-drop, private S3 storage with signed URLs, and direct-to-S3 uploads for performance. That covers about 90% of what any production application needs.

I use variations of this architecture across multiple client projects. It scales well and the separation between service, controller, and frontend makes it easy to adapt. Need image thumbnails? Add a queue job after upload. Need virus scanning? Plug ClamAV into the service. Need a different frontend framework? The API stays exactly the same. That's the beauty of building it as a proper full-stack system rather than hacking things together.

Start with the server-side upload approach. It's simpler and easier to debug. Move to direct-to-S3 when you need the performance, and consider chunked uploads only when you're handling files above 50-100MB.

Need help building a file upload system for your Laravel project? I've implemented everything from simple document storage to complex media pipelines. Let's talk about your project and get it built right.