آپلود فایل در Blazor Serverراهنمای کامل

آپلود فایل در Blazor یکی از نیازهای رایج در پروژه‌های تحت وب است. اما از آن‌جایی که Blazor دارای دو مدل اجرایی WebAssembly و Server است، پیاده‌سازی این قابلیت بسته به نوع پروژه تفاوت‌هایی دارد. در این مقاله، با تمرکز بر Blazor Server، قدم‌به‌قدم نحوه پیاده‌سازی آپلود فایل، مدیریت فایل‌ها و رعایت نکات امنیتی را بررسی می‌کنیم.

تفاوت Blazor WebAssembly و Blazor Server در آپلود فایل

در Blazor Server، کلاینت به‌صورت بلادرنگ از طریق SignalR به سرور متصل است و می‌توان فایل‌ها را به‌صورت مستقیم و امن با استفاده از استریم به سرور ارسال کرد.

در Blazor WebAssembly، چون برنامه در مرورگر اجرا می‌شود، معمولاً باید فایل‌ها به‌صورت HTTP به یک API یا اسکریپت سمت سرور (مثل PHP) ارسال شوند.

در این مقاله روی مدل سرور (Server) تمرکز می‌کنیم.

مرحله اول: آماده‌سازی ورودی انتخاب فایل (InputFile)

ابتدا از کامپوننت InputFile استفاده می‌کنیم تا کاربر بتواند فایل را انتخاب کند. این کامپوننت از کلاس Microsoft.AspNetCore.Components.Forms استفاده می‌کند.

<InputFile OnChange="LoadFiles" class="form-control" />

OnChange: ایونتی است که هنگام انتخاب فایل اجرا می‌شود.

LoadFiles: متدی است که در آن فایل‌های انتخاب شده توسط کاربر پردازش می‌شوند.

مرحله دوم: دریافت اطلاعات فایل انتخاب‌شده

در کد زیر، متد LoadFiles اطلاعات فایل انتخاب‌شده را می‌گیرد و در یک متغیر browserFile ذخیره می‌کند:

@code {
    private IBrowserFile? browserFile;

    private void LoadFiles(InputFileChangeEventArgs e)
    {
        browserFile = e.File;
        Console.WriteLine($"Selected file: {browserFile.Name}");
    }
}

IBrowserFile: اینترفیس فایل انتخاب‌شده در سمت کلاینت است.

می‌توان اطلاعات فایل مانند نام، اندازه و نوع MIME را از آن استخراج کرد.

مرحله سوم: نمایش اطلاعات فایل روی صفحه

اگر بخواهید اطلاعات فایل انتخاب‌شده را برای کاربر نمایش دهید:

@if (browserFile is not null)
{
    <p>نام فایل: @browserFile.Name</p>
    <p>نوع فایل: @browserFile.ContentType</p>
    <p>اندازه فایل: @browserFile.Size bytes</p>
}

مرحله چهارم: افزودن دکمه برای آغاز آپلود فایل

برای اینکه کاربر بتواند فرآیند آپلود را شروع کند، یک دکمه اضافه می‌کنیم:

<button class="btn btn-primary mt-2" @onclick="UploadFile">آپلود فایل</button>

مرحله پنجم: پیاده‌سازی متد UploadFile با استفاده از FileStream

[Inject]
private IWebHostEnvironment _env { get; set; } = default!;

private async Task UploadFile()
{
    if (browserFile is null)
    {
        Console.WriteLine("ابتدا یک فایل انتخاب کنید.");
        return;
    }

    // مسیر پوشه آپلود داخل wwwroot/uploads
    var uploadsPath = Path.Combine(_env.WebRootPath, "uploads");

    // اگر پوشه وجود نداشت، آن را بساز
    if (!Directory.Exists(uploadsPath))
        Directory.CreateDirectory(uploadsPath);

    // نام امن و تصادفی برای فایل بساز
    var extension = Path.GetExtension(browserFile.Name);
    var uniqueFileName = $"{Path.GetRandomFileName()}{extension}";
    var filePath = Path.Combine(uploadsPath, uniqueFileName);

    try
    {
        // خواندن فایل انتخاب‌شده به‌صورت استریم
        await using var stream = browserFile.OpenReadStream();
        // نوشتن در فایل مقصد با استفاده از FileStream
        await using var fileStream = new FileStream(filePath, FileMode.Create);
        await stream.CopyToAsync(fileStream);
        Console.WriteLine("فایل با موفقیت آپلود شد.");
    }
    catch (Exception ex)
    {
        Console.WriteLine($"خطا در آپلود فایل: {ex.Message}");
    }
}

نکات مهم در این مرحله:

استفاده از Path.GetRandomFileName(): برای جلوگیری از تداخل نام فایل‌ها و مسائل امنیتی.

بررسی وجود پوشه: از Directory.CreateDirectory برای اطمینان از موجود بودن مسیر استفاده کردیم.

مدیریت استریم: با await using منابع به‌صورت امن آزاد می‌شوند.

مرحله ششم: جلوگیری از ذخیره با نام اصلی فایل کاربر

ذخیره‌سازی فایل‌ها با همان نام اولیه کاربر (مثلاً image.jpg) ممکن است باعث بروز مشکلات امنیتی، جایگزینی فایل‌ها، یا تداخل در مسیرها شود. به همین دلیل:

ابتدا با Path.GetExtension() پسوند فایل را جدا کردیم.

سپس با Path.GetRandomFileName() یک نام امن ساختیم.

در نهایت فایل را با این نام جدید ذخیره کردیم.

آموزش کامل آپلود فایل در بلیزور سرور 

نکات امنیتی و حرفه‌ای

❌ هرگز فایل را با نام اصلی کاربر ذخیره نکنید.

✅ نام فایل را به‌صورت رندوم یا طبق یک الگوی خاص تغییر دهید.

⚠️ نوع MIME فایل را بررسی کنید (مثلاً فقط pdf یا jpg مجاز باشد).

🧱 اگر فایل‌ها حساس هستند، آن‌ها را خارج از wwwroot ذخیره کنید.

نتیجه‌گیری

در این آموزش، فرآیند کامل انتخاب و آپلود فایل در Blazor Server را بررسی کردیم. با استفاده از ترکیب InputFile, IBrowserFile, و FileStream، می‌توانید یک آپلودر امن، سریع و بهینه برای پروژه خود بسازید.

آموزش کامل آپلود فایل در بلیزور سرور