Реалізація завантаження файлів (Upload) на сайт

Реалізація завантаження файлів

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

Сервер: Laravel

class FileUploadController extends Controller
{
    public function store(Request $request): JsonResponse
    {
        $request->validate([
            'file' => [
                'required',
                'file',
                'max:51200',          // 50 МБ в КБ
                '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 МБ завантажують по частинах через 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 дні.