اعتبارسنجی نوع فایل در سمت کلاینت با Custom Validation در ASP.NET MVC

با عرض سلام خدمت تمامی علاقمندان و همراهان مباحث آموزشی طراحی سایت با ASP.NET MVC ، در این جلسه آموزشی قصد داریم تا شما رو با نحوه اعتبارسنجی نوع فایل در سمت کلاینت با Custom Validation آشنا نماییم پس با ما همراه باشید .

اعتبارسنجی نوع فایل با در سمت Client با Custom Validation

ابتدا یک پروژه از نوع MVC  ایجاد کنید سپس یک class به پروژه خود اضافه نمایید برای این منظور بر روی پروژه خود راست کلیک کرده و سپس پس از انتخاب گزینه add بر روی Class کلیک نمایید حال نام این کلاس را FileTypeAttribute قرار دهید البته شما می توانید هر نام دلخواهی که می‌خواهید برای این کلاس انتخاب کنید. سپس کدهای زیر را درون کلاس FileTypeAttribute کپی نمایید.

کلاس FileTypeAttribute از دو کلاس ValidationAttribute و IClientValidatable ارث بری می کند ، کلاس IClientValidatable به منظور اعتبارسنجی فایل در سمت Client استفاده شده است.

سازنده ی کلاس FileTypeAttribute فرمت های قابل قبول فایل را که با علامت ” , ”  از هم جدا شده اند را به عنوان پارامتر ورودی دریافت می‌کند. و متد IsValid یک فایل را به عنوان پارامتر ورودی دریافت نموده و سپس فرمت این فایل را با فرمت های قابل قبول مطابقت می دهد و درصورتی که فرمت فایل با فرمت های قابل قبول ورودی مطابقت نداشت یک پیام خطا بر می گرداند.

کدهای مربوط به کلاس FileTypeAttribute

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace FileUploadValidation.CustomValidation
{
    [AttributeUsage(AttributeTargets.Property, AllowMultiple = false, Inherited = true)]
    public class FileTypeAttribute : ValidationAttribute, IClientValidatable
    {
        private const string _DefaultErrorMessage = "Only the following file types are allowed: {0}";
        private IEnumerable<string> _ValidTypes { get; set; }

        public FileTypeAttribute(string validTypes)
        {
            _ValidTypes = validTypes.Split(',').Select(s => s.Trim().ToLower());
            ErrorMessage = string.Format(_DefaultErrorMessage, string.Join(" or ", _ValidTypes));
        }

        protected override ValidationResult IsValid(object value, ValidationContext validationContext)
        {
            IEnumerable<HttpPostedFileBase> files = value as IEnumerable<HttpPostedFileBase>;
            if (files != null)
            {
                foreach (HttpPostedFileBase file in files)
                {
                    if (file != null && !_ValidTypes.Any(e => file.FileName.EndsWith(e)))
                    {
                        return new ValidationResult(ErrorMessageString);
                    }
                }
            }
            return ValidationResult.Success;
        }

        public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
        {
            var rule = new ModelClientValidationRule
            {
                ValidationType = "filetype",
                ErrorMessage = ErrorMessageString
            };
            rule.ValidationParameters.Add("validtypes", string.Join(",", _ValidTypes));
            yield return rule;
        }
    }
}

حال بر روی پوشه Scripts در پروژه خود راست کلیک کرده و یک فایل جاوا اسکریپت به نام  ایجاد FileType.js نمایید و سپس کدهای زیر را که جهت اعتبارسنجی نوع فایل در سمت کلاینت نوشته شده است درون آن فایل کپی کنید.

کدهای مربوط به فایل FileType.js

$.validator.unobtrusive.adapters.add('filetype', ['validtypes'], function (options) {
    options.rules['filetype'] = { validtypes: options.params.validtypes.split(',') };
    options.messages['filetype'] = options.message;
});

$.validator.addMethod("filetype", function (value, element, param) {
    for (var i = 0; i < element.files.length; i++) {
        var extension = getFileExtension(element.files[0].name);
        if ($.inArray(extension, param.validtypes) === -1) {
            return false;
        }
    }
    return true;
});

function getFileExtension(fileName) {
    if (/[.]/.exec(fileName)) {
        return /[^.]+$/.exec(fileName)[0].toLowerCase();
    }
    return null;
}

حال فقط کافی است که در Model و یا ViewModel خود ویژگی [ ()FileType ] را به پراپرتی فایل که از نوع HttpPostedFileBase است  اضافه نمایید توجه داشته باشید که اتربیت FileType فرمت های قابل قبول برای فایل را به عنوان ورودی می پذیرد و درصورتی که فرمت فایل آپلود شده با فرمت های وارد شده در اتریبیت FileType مطابقت نداشت یک پیام خطا به کاربر نمایش می شود .

کدهای مربوط به ViewModel

public class MyViewModel
    {   
        [FileType("JPG,JPEG,PNG")] // فرمت های قابل قبول فایل
        public HttpPostedFileBase Photo { get; set; }
    }

حال یک View ایجاد نموده و کدهای زیر را در آن بنویسید و سپس پروژه خود را اجرا نمایید. توجه داشته باشید که حتما باید فایل  FileType.js را در View فراخوانی کنید.

کدهای مربوط به View

@model FileUploadValidation.Models.ViewModel.MyViewModel

@{
    ViewBag.Title = "Home Page";
}


@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.TextBoxFor(m => m.Photo, new { type = "file" })
    @Html.ValidationMessageFor(m => m.Photo,null, new { id = "validationTxt" })
    <input type="submit" value="upload" />
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/Scripts/FileType.js")
}

به پایان این جلسه آموزشی رسیدیم امیدوارم که مطالب این مقاله آموزشی برای شما عزیزان مفید واقع  شده باشد درصورتی در اتباط با این مقاله سوالی داشتید حتما در نظرات سایت میزفا مطرح کنید.