public function updateAvatar(\Illuminate\Http\Request $request): \Illuminate\Http\RedirectResponse
{
    $validated = $request->validate([
        'avatar' => ['required', 'image', 'max:2048'],
    ]);

    $path = $validated['avatar']->store('avatars', 'public');

    $request->user()->update(['avatar_path' => $path]);

    return back()->with('success', 'Đã cập nhật ảnh đại diện.');
}

import { useForm } from '@inertiajs/react'
import { useEffect, useState } from 'react'

export default function AvatarForm() {
  const form = useForm<{ avatar: File | null }>({ avatar: null })
  const [preview, setPreview] = useState<string | null>(null)

  useEffect(() => {
    if (!form.data.avatar) {
      setPreview(null)
      return
    }

    const url = URL.createObjectURL(form.data.avatar)
    setPreview(url)

    return () => URL.revokeObjectURL(url)
  }, [form.data.avatar])

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault()
        form.post('/profile/avatar', {
          forceFormData: true,
          preserveScroll: true,
          onSuccess: () => form.reset('avatar'),
        })
      }}
      className="space-y-4"
    >
      <input
        type="file"
        accept="image/*"
        onChange={(e) => form.setData('avatar', e.target.files?.[0] ?? null)}
      />

      {preview && <img src={preview} alt="Xem trước avatar" className="h-24 w-24 rounded object-cover" />}

      {form.errors.avatar && <p role="alert">{form.errors.avatar}</p>}

      {form.progress && (
        <progress value={form.progress.percentage} max="100">
          {form.progress.percentage}%
        </progress>
      )}

      <button type="submit" disabled={form.processing || !form.data.avatar}>
        {form.processing ? 'Đang tải lên…' : 'Tải ảnh lên'}
      </button>
    </form>
  )
}

const [previewUrl, setPreviewUrl] = useState<string | null>(null)

function chooseImage(file: File | null) {
    form.setData('image', file)

    setPreviewUrl((current) => {
        if (current) URL.revokeObjectURL(current)
        return file ? URL.createObjectURL(file) : null
    })
}

useEffect(() => {
    return () => {
        if (previewUrl) URL.revokeObjectURL(previewUrl)
    }
}, [previewUrl])

image: File | null
remove_image: boolean

Chọn ảnh mới -> image = File, remove_image = false
Bỏ ảnh mới  -> image = null, vẫn giữ ảnh persisted cũ
Xóa ảnh cũ  -> image = null, remove_image = true

$newPath = $request->file('image')?->store('products', 'public');
$oldPath = $product->image_path;

DB::transaction(function () use ($product, $validated, $newPath) {
    $product->update([
        ...$validated,
        'image_path' => $newPath ?? $product->image_path,
    ]);
});

if ($newPath && $oldPath) {
    Storage::disk('public')->delete($oldPath);
}

[ ] valid image
[ ] invalid MIME disguised extension
[ ] over max size
[ ] replace old image
[ ] clear newly selected preview without deleting old image
[ ] remove persisted image
[ ] DB failure after storage write
[ ] user cancel request