• 1403/05/16

file upload :

با سلام خدمت استاد ارجمند

درک من از فرایند آپلود فایل لایووایر به صورت زیر هست:

مرحله اول: فایل انتخاب شده توی پوشه livewire-tpm آپلود میشه. progressbar مربوط به آپلود فایل هم فقط در این مرحله نمایش داده میشه.

مرحله دوم: تازه اینجا اعتبارسنجی انجام میشه و اگر فایل معتبر نباشه خطا رو نشون میده درحالی که فایل توی پوشه livewire-tpm آپلود شده.(طبق اون چیزی که خودم امتحان کردم)

مرحله سوم: اگه دکمه submit رو بزنیم فایلی که تو پوشه livewire-tpm آپلود شده بود اگر از مرحله اعتبارسنجی عبور کرده باشه توی پوشه ای که از اول برای آپلود تعیین کرده بودیم ایجاد میشه و الان دو فایل یکسان در storage داریم.تو این مرحله progressbar مربوط به آپلود فایل نشون داده نمیشه.

مرحله چهار: فایل موجود در livewire-tpm طبق مستندات بعد از 24 ساعت پاک میشه.

استاد اگه جایی رو اشتباه میکنم ممنون میشم راهنمایی کنید.

اگه درست فهمیدم، چرا باید قبل از اعتبارسنجی فایل آپلود بشه؟ مشکل امنیتی به وجود نمیاد؟

  • 1403/05/16
  • ساعت 19:03

سلام وقت بخیر

 

 

فرایندی که توصیف کردید برای آپلود فایل با استفاده از Livewire تا حد زیادی صحیح است. حالا به بررسی مراحل بپردازیم:

مرحله اول - آپلود اولیه:
زمانی که فایل انتخاب می‌شود، Livewire فایل را به طور موقت در پوشه livewire-tmp ذخیره می‌کند. این کار برای جلوگیری از از دست رفتن داده‌ها و مدیریت پیش‌پردازش فایل‌ها انجام می‌شود. در این مرحله، progress bar برای نمایش وضعیت آپلود فایل نشان داده می‌شود.

مرحله دوم - اعتبارسنجی:
پس از آپلود اولیه، اعتبارسنجی فایل انجام می‌شود. اگر فایل معتبر نباشد، خطا نمایش داده می‌شود، اما فایل هنوز در پوشه livewire-tmp قرار دارد.

مرحله سوم - تأیید و انتقال:
اگر فایل معتبر باشد و کاربر دکمه Submit را بزند، فایل از پوشه livewire-tmp به محل اصلی تعیین شده برای ذخیره‌سازی منتقل می‌شود. در این مرحله دیگر progress bar نشان داده نمی‌شود، چرا که فایل از قبل آپلود شده و فقط منتقل می‌شود.

مرحله چهارم - حذف فایل موقت:
فایل‌های موجود در پوشه livewire-tmp بعد از ۲۴ ساعت به صورت خودکار حذف می‌شوند.

دلیل آپلود فایل قبل از اعتبارسنجی

آپلود فایل قبل از اعتبارسنجی ممکن است به دلایل مختلفی انجام شود:

سهولت و کارایی:
انجام آپلود اولیه و سپس اعتبارسنجی به برنامه این امکان را می‌دهد که با استفاده از فایل‌های موقت، بار پردازش و نیاز به دوباره‌کاری را کاهش دهد. همچنین امکان نمایش پیشرفت آپلود را فراهم می‌کند.

بررسی فایل‌ها در سمت سرور:
برخی از اعتبارسنجی‌ها ممکن است نیاز به دسترسی به فایل واقعی داشته باشند (مثلاً بررسی فرمت فایل یا متادیتا). به همین دلیل آپلود اولیه ضروری است.

مشکلات احتمالی امنیتی:
امنیت همیشه باید مد نظر باشد. معمولاً فایل‌های آپلود شده در پوشه‌ای جداگانه و موقت ذخیره می‌شوند و این فایل‌ها به هیچ وجه به طور مستقیم در دسترس کاربران یا مرورگرها قرار نمی‌گیرند. سیستم‌های مدیریت فایل معمولاً تدابیر امنیتی لازم را برای جلوگیری از اجرای کدهای مخرب در این فایل‌ها در نظر می‌گیرند.

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


  • 1403/05/16
  • ساعت 21:06

خیلی ممنون از توضیحتون.

یه سوال دیگه ، فرض کنید تو فرایند آپلود چند مدل فایل داریم مثل فایل های ویدئویی که میخوایم در  فضای s3 ذخیره کنیم و مابقی فایل ها مثل عکس و غیره رو در هاست اصلی ذخیره کنیم. حالا چطور باید تعیین کنیم که فایل temporary مربوط به هر کدوم در فضای خودش ذخیره بشه. تو مستندات گفته که میشه disk موردنظر برای ذخیره فایل temporary  رو در فایل کانفیگ لایووایر تعیین کرد. این مورد به صورت کلی هست. مثلا اگه مقدار disk رو s3 تعیین کنیم همه فایل های temporary  در s3 ذخیره میشن. همچنین زمانی هم که disk مقدار null داشته باشه و فضای مورد نظر برای آپلود s3 باشه عملا فایل دو بار آپلود میشه یک بار توی livewire-tmp در هاست اصلی، یک بار هم توی مسیر تعیین شده در s3

در این شرایط راه حل چیه؟


  • 1403/05/16
  • ساعت 22:46

در شرایطی که نیاز دارید فایل‌های موقتی (temporary) را بسته به نوع فایل در فضای ذخیره‌سازی متفاوتی نگهداری کنید، باید رویکردی انعطاف‌پذیرتر اتخاذ کنید. به صورت کلی، لایووایر (Livewire) اجازه می‌دهد که شما تعیین کنید فایل‌های موقتی کجا ذخیره شوند، اما این تعیین به صورت کلی برای همه فایل‌ها انجام می‌شود. برای مدیریت فایل‌های موقتی به تفکیک نوع فایل، می‌توانید از راهکارهای زیر استفاده کنید:

 

 1. استفاده از مدیریت دستی فایل‌های موقتی

برای هر فایل، بسته به نوع آن، مسیر ذخیره‌سازی موقت را مشخص کنید. این کار می‌تواند با توجه به نوع فایل در سمت سرور و به کمک تنظیمات فایل سیستم‌های مختلف (مثل S3 و هاست اصلی) انجام شود.

 

 2. تنظیم دیسک موقتی به صورت پویا

می‌توانید در هنگام آپلود فایل‌ها، دیسک موقتی را به صورت پویا تغییر دهید. این کار مستلزم ایجاد منطق سفارشی برای تصمیم‌گیری در مورد محل ذخیره‌سازی فایل موقتی است. به عنوان مثال، اگر فایل یک ویدئو باشد، دیسک موقتی را به S3 تغییر دهید و اگر فایل تصویر باشد، از دیسک محلی استفاده کنید.

 

 3. آپلود مستقیم به S3

یکی از روش‌ها برای جلوگیری از آپلود دوگانه، آپلود مستقیم به S3 با استفاده از URL امضا شده (Signed URL) است. در این روش، کاربر فایل را مستقیماً به S3 آپلود می‌کند و نیازی به نگهداری فایل موقتی در هاست اصلی وجود ندارد.

 

 پیاده‌سازی در Livewire

 

برای پیاده‌سازی این موارد در Livewire، می‌توانید از روش‌های زیر استفاده کنید:

 

1. عریف دیسک‌های مختلف در config/filesystems.php:

  دیسک‌های مختلف را با توجه به نیازهای ذخیره‌سازی موقت و دائمی تعریف کنید.

 

2. استفاده از متدهای Livewire برای مدیریت فایل‌ها:

  از متدهایی مثل `store` و `move` برای ذخیره‌سازی نهایی فایل‌ها استفاده کنید. همچنین، می‌توانید متدهای خودتان را برای تعیین دیسک موقتی و نهایی تعریف کنید.

 

3. آپلود مستقیم به S3:

  می‌توانید از ویژگی‌های لایووایر و یا کتابخانه‌های جانبی برای تولید URL‌های امضا شده برای آپلود مستقیم به S3 استفاده کنید.

 

در نهایت، بهترین راه‌حل بسته به نیازهای خاص پروژه شما ممکن است متفاوت باشد. می‌توانید از ترکیب این روش‌ها استفاده کنید تا بهترین راهکار برای مدیریت فایل‌های موقتی و نهایی را پیدا کنید.


  • 1403/05/16
  • ساعت 23:39

به نظرم جواب سوال من تو راهکار دوم باشه. هرچند نمیدونم چطور باید انجامش بدم 🙂

ممنون میشم اگه واسه این راهکار کمی بیشتر راهنمایی کنین


  • 1403/05/17
  • ساعت 19:00

config/filesystems.php

 

'disks' => [
    'local' => [
        'driver' => 'local',
        'root' => storage_path('app'),
    ],

    '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'),
    ],

    // دیسک موقتی برای ویدئوها
    'temporary_videos' => [
        'driver' => 's3',
        'key' => env('AWS_ACCESS_KEY_ID'),
        'secret' => env('AWS_SECRET_ACCESS_KEY'),
        'region' => env('AWS_DEFAULT_REGION'),
        'bucket' => env('AWS_TEMPORARY_VIDEO_BUCKET'),
        'url' => env('AWS_TEMPORARY_VIDEO_URL'),
        'endpoint' => env('AWS_ENDPOINT'),
    ],

    // دیسک موقتی برای تصاویر
    'temporary_images' => [
        'driver' => 'local',
        'root' => storage_path('app/temporary_images'),
    ],
],

 

 

 

 

 

Livewire Component

 

 

use Livewire\Component;
use Livewire\WithFileUploads;

class UploadFiles extends Component
{
    use WithFileUploads;

    public $file;

    public function save()
    {
        $temporaryDisk = $this->getTemporaryDisk();

        // ذخیره فایل به صورت موقت
        $path = $this->file->store('/', $temporaryDisk);

        // انجام عملیات لازم بر روی فایل موقتی

        // انتقال فایل به دیسک نهایی (به عنوان مثال local یا s3)
        $finalDisk = 'local';
        $finalPath = Storage::disk($temporaryDisk)->move($path, $finalDisk);

        // حذف فایل موقتی
        Storage::disk($temporaryDisk)->delete($path);
    }

    private function getTemporaryDisk()
    {
        // تشخیص نوع فایل و تعیین دیسک موقتی مناسب
        $mimeType = $this->file->getMimeType();
        
        if (str_starts_with($mimeType, 'video/')) {
            return 'temporary_videos';
        }

        if (str_starts_with($mimeType, 'image/')) {
            return 'temporary_images';
        }

        // دیسک پیش‌فرض موقتی
        return 'local';
    }

    public function render()
    {
        return view('livewire.upload-files');
    }
}

 

 

 

View

 

<!-- resources/views/livewire/upload-files.blade.php -->

<div>
    <form wire:submit.prevent="save">
        <input type="file" wire:model="file">
        <button type="submit">Upload</button>
    </form>
</div>

 

 

 

در فایل config/filesystems.php، دیسک‌های مختلف برای ذخیره‌سازی فایل‌های موقتی تعریف شده‌اند.

در متد getTemporaryDisk، نوع فایل با استفاده از MIME type آن تعیین شده و دیسک موقتی مناسب انتخاب می‌شود.

در متد save، فایل ابتدا به دیسک موقتی ذخیره شده و سپس به دیسک نهایی منتقل می‌شود.

با استفاده از این روش، می‌توانید بسته به نوع فایل، مسیر ذخیره‌سازی موقتی را به صورت پویا تعیین کنید و سپس فایل‌ها را به دیسک نهایی منتقل کنید.


  • 1403/05/17
  • ساعت 19:32

سلام استاد ممنون از وقتی که میذارین.

این روش جواب نمیده .

چون همه کارها داخل متد save انجام شده و متد save به محض زدن دکمه submit اجرا میشه ولی ذخیره سازی موقتی قبل از این مرحله یعنی به محض اتنخاب فایل شروع میشه و حتی ربطی به متد store که داخل متد save استفاده شده نداره و متد store در حقیقت ذخیره سازی نهایی رو انجام میده.

من بارها امتحان کردم و به محض اینکه فایل رو انتخاب میکنم. فایل موقت تو پوشه livewire-tmp آپلود میشه


  • 1403/05/30
  • ساعت 11:24

 من خودم معمولا برای حل این مشکل از Spatie Media Library استفاده میکنم


  • 1403/05/30
  • ساعت 11:34

خیلی ممنون بابت راهنمایی 🙏


  • 1403/05/30
  • ساعت 11:36

زنده باشید


logo-enamadlogo-samandehi