كيفية تثبيت Filepound مع لارفل بدون cdn

إن المكتبات الخاصة بالجافاسكريبت لا يمكن تثبيتها في لارافيل عن طريق composer ولكن يمكنك تثبيتها عن طريق npm في لارافيل إذا كانت  متاحه في npm ويمكنك إستخدام vite أو laravel mix لتحزيم تلك المكتبات ومن ثم إستدعاء الملف المحزم في blade في لارافيل .

ولكن بما أن filepond لا تحتاج لذلك فيمكنك تحميل الملف من cdn وثم وضعه في ملجد public وإستدعاءه عن طريق دالة asset في ملف blade في لارافيل هكذا .

<script src="{{ asset('js/filepond.min.js') }}"></script>

حيث هنا إفترضنا أن الملف بداخل مجلد js بداخل مجلد public في لارافيل .

إذا كنت لاترغب بال cdn يمكنك تنزيل المكتبة باستخدام npm , انتقل الى مجلد المشروع الخا بك و قم بتنفييذ التعليمة التالية في ال terminal

npm install filepond filepond-plugin-file-validate-size filepond-plugin-file-validate-type

هذه التعليمة ستقوم بتحميل المكتبة لديك بالاضافة الى 2 plugin اضافية هي file size and file type validation
و الأن لديك طريقتتين لتضمين المكتبة في مشروعك :

1. Include in a Blade View  :: قم بفتح ملف ال  blade view  و قم باضافة السطرين التاليين في أعلى الملف

   <link href="{{ asset('css/filepond.min.css') }}" rel="stylesheet">
   <script src="{{ asset('js/filepond.min.js') }}"></script>

2. Include in Laravel Mix : اذا كنت تستخدم Laravel Mix قم باضافة الأسطر التالية لملف webpack.mix.js

   mix.js('resources/js/app.js', 'public/js')
      .sass('resources/sass/app.scss', 'public/css')
      .copy('node_modules/filepond/dist/filepond.min.js', 'public/js')
      .copy('node_modules/filepond/dist/filepond.min.css', 'public/css');

   ثم قم بتنفيذ التعليمة التالية في ال terminal

   npm run dev

    واذا كنت ترغب بال cdn فقط قم باضافة السطرين التاليين لملف ال blade

   <link href="https://unpkg.com/filepond@7.1.1/dist/filepond.min.css" rel="stylesheet">
   <script src="https://unpkg.com/filepond@7.1.1/dist/filepond.min.js"></script>

   و يمكنك الرجوع للتوثيق الخاص بالمكتبة لرؤية طريقة استخدام المكتبة و امثلة عنها و هذا رابط التوثيق