Реализация загрузки файлов (Upload) на сайт

Реализация загрузки файлов

Загрузка файлов включает валидацию на клиенте и сервере, ограничение типов и размера, безопасное хранение, обработку больших файлов по частям.

Сервер: Laravel

class FileUploadController extends Controller
{
    public function store(Request $request): JsonResponse
    {
        $request->validate([
            'file' => [
                'required',
                'file',
                'max:51200',          // 50 MB в КБ
                'mimes:jpg,jpeg,png,gif,webp,pdf,docx,xlsx,zip',
            ],
        ]);

        $file = $request->file('file');

        // Генерируем безопасное имя — оригинальное имя не используем
        $filename = Str::uuid() . '.' . $file->getClientOriginalExtension();
        $path     = 'uploads/' . auth()->id() . '/' . date('Y/m') . '/' . $filename;

        // Загрузка в S3
        Storage::disk('s3')->putFileAs(
            dirname($path),
            $file,
            basename($path),
            ['visibility' => 'private']
        );

        $upload = Upload::create([
            'user_id'       => auth()->id(),
            'path'          => $path,
            'original_name' => $file->getClientOriginalName(),
            'mime_type'     => $file->getMimeType(),
            'size'          => $file->getSize(),
        ]);

        return response()->json(['id' => $upload->id, 'path' => $path], 201);
    }
}

Клиент: React с прогресс-баром

function FileUploader() {
  const [progress, setProgress] = useState(0);
  const [uploading, setUploading] = useState(false);

  async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file) return;

    const formData = new FormData();
    formData.append('file', file);

    setUploading(true);
    try {
      await axios.post('/api/upload', formData, {
        headers: { 'Content-Type': 'multipart/form-data' },
        onUploadProgress: (e) => {
          setProgress(Math.round((e.loaded / (e.total ?? 1)) * 100));
        },
      });
    } finally {
      setUploading(false);
    }
  }

  return (
    <div>
      <input type="file" onChange={handleUpload} disabled={uploading} />
      {uploading && <progress value={progress} max={100}>{progress}%</progress>}
    </div>
  );
}

Chunked Upload для больших файлов

Файлы >100 MB загружают по частям через multipart upload в S3:

// Инициализация
public function initChunked(Request $request): JsonResponse
{
    $s3 = Storage::disk('s3')->getClient();
    $result = $s3->createMultipartUpload([
        'Bucket' => config('filesystems.disks.s3.bucket'),
        'Key'    => 'uploads/' . Str::uuid() . '.' . $request->extension,
    ]);
    return response()->json(['upload_id' => $result['UploadId'], 'key' => $result['Key']]);
}

// Загрузка части
public function uploadPart(Request $request): JsonResponse
{
    $s3 = Storage::disk('s3')->getClient();
    $result = $s3->uploadPart([
        'Bucket'     => config('filesystems.disks.s3.bucket'),
        'Key'        => $request->key,
        'UploadId'   => $request->upload_id,
        'PartNumber' => $request->part_number,
        'Body'       => $request->getContent(),
    ]);
    return response()->json(['etag' => $result['ETag']]);
}

Срок реализации

Загрузка файлов с валидацией в S3/MinIO для Laravel или Node.js: 1–2 дня. С chunked upload для больших файлов и прогресс-баром: 2–3 дня.