how to create validation attribute to validate file extension in ASP Net core MVC

كيف نقوم بعمل validation على امتدادات الملفات المختلفة مثل الصور وملفات PDF وغيرها في تطبيقات ASP.Net Core MVC
اذا كنت تريد وضع validation attribute للسماح للمستخدم برفع صور فقط او ملفات بامتداد معين لن تجد validation attribute تفعل ذلك، لكن يمكنك انشاء validation attribute مخصصه لهذا العمل، في هذا الدرس سنتعلم كيفية عمل validation attribute لمنع المستخدم من رفع أي ملفات ذات امتداد غير مسموح به ، مثلا رفع الصور فقط او رفع ملفات PDF فقط .
– نذهب الى مشروع ASP.Net Core MVC الخاص بنا
– لجعل العمل اكثر تنظيما سنقوم بإنشاء مجلد وسنسميه ValidationAttributes
– سنقوم بإضافة class داخل المجلد وسنسميه AllowedExtensionsAttribute وسنجعله يرث من ValidationAttribute class
– سنقوم بعمل override ل IsValid function ثم نقوم بكتابة الكود الخاص بالسماح لامتدادات ملفات معينه فقط
– سنقوم باستقبال الامتدادات المسموح بها من خلال ال constructor نعطى القيمة ل _extensions field
– لاحظ انه عندما يقوم المستخدم بتعديل البيانات لا حاجه لرفع صوره او ملف في كل عملية تعديل لذلك نقوم بالتأكد ان كان الملف null ام لا، اذا كان الملف ب null نرجع القيمة ValidationReslt.Success لتخطي ال validation في هذه الحالة
– نقوم بالحصول على اسم الملف من خلال FileName
– لاحظ ان الامتداد يأتي قبله نقطه دائما لذلك سنقوم بعمل split بالنقطة ، نحصل على array من خلالها يمكننا الحصول على الامتداد في الخانة 1
– نتأكد ان كان الامتداد الموجود معنا داخل الامتدادات المسموح بها ام لا ، اذا لم يكن بينهم نرجع رسالة الخطأ، ان وجد بينهم فان القيمة ValidationReslt.Success سترجع بشكل افتراضي كما وضعناها

انجزنا الجزء الخاص بعمل ال validation من جانب ال server side يمكننا أيضا عمل ال validation خلال ال client side كالتالي:
– نقوم بعمل implement ل ICleintModelValidator interface والذي يحتوي AddValidation method signature
– بداخل ال AddValidation method نضيف data-val attribute ونجعل القيمة ب true لنضع علامه على هذا العنصر ان عليه validation
– نضيف data-val-extension attribute وستكون قيمته عباره عن رسالة الخطأ
– ملحوظة : نريد ان تكون الرسالة ديناميكية فمثلا اذا اردنا ان نستقبل ملفات صور فقط تخرج رساله بامتدادات الصور فقط اما اذا اردنا استقبال فيديوهات فقط فستخرج الرسالة بامتدادات الفيديو، الامتدادات توجد معنا في _extensions ويمكننا عرضها في رسالة الخطأ
– نضيف data-val-allowed-extensions attribute وقيمتها ستكون ال extensions المسموح بها لأننا نحتاج اليها في كود ال JavaScript
– في المكان المخصص ل JavaScript نضيف ملف CustomValidation.js
– نضيف extension method الخاصة بالتأكد من الامتدادات المسموح بها من خلال addMethod function تستقبل تلات مدخلات ما يهمنا منها هي ال value والتي تحتوي على اسم الملف
– من خلال data-val-allowed-extensions attribute التي اضفناها سابقا والتي تحمل الامتدادات المسموح بها سنتأكد هل الامتداد القادم في المدخل value متاح ضمن الامتدادات المسموح بها ام لا، اذا كان الامتداد متاح يتم ارجاع القيمة true وهذا معناه تخطي ال validation اذا لم يكن متاح يتم ارجاع القيمة false وهذا معناه الرجوع برسالة خطأ تفيد بان الامتداد غير مسموح به
– لاحظ ان data-val-extension attribute ينتهي باسم ال method التي اضفناها في ملف ال JavaScript والتي تسمي extension
– نقوم بإضافة ال extension method التي بإنشائها في JQuery.validator.unobtrusive.adabters
المسئولة عن اظهار client side validations من خلال addBool function
– يجب استدعاء ملف CustomValdation.js تحت ملفات JQuery validation scripts

الان يمكنك الذهاب لل ViewModel الذي يحمل ال File property نقوم بإضافة AllowedExtensions
ثم نقوم بإدخال الامتدادات المسموح بها على هيئة array of string ، اذا قمنا بعمل run ستلاحظ انه عندما تختار ملفات غير المسموح بها تظهر لك رسالة خطأ تفيد بأن الملفات المرفوعة غير مسموح بها .
source code : https://github.com/ahmmedsobh/ASP.NetCoreMVCFileValidationDemo

follow me:
Facebook page : https://www.facebook.com/ahmmedsobh
Facebook profile: https://www.facebook.com/ahmmedsobbh/
GitHub: https://github.com/ahmmedsobh
LinkedIn: https://www.linkedin.com/in/ahmmedsobh/