1

I want to have custom jquery unobtrusive validator in MVC-6 RC2

Similar to the the Old Answer I see some RC2 examples in This one but I don't know how to implement it for files.

Here is my view mode

public class FileUploadViewModel
    {
        //TODO [FileType(Validtype="jpeg,png,jif", MaxSize=112222)]// this is what I want
        [Required(ErrorMessage = "Please select a file")]
        public IFormFile File { get; set; }

        [Required(ErrorMessage = "Please select link")]
        public string FileName { get; set; }

        public string ExternalLink { get; set; }

        public string Description { get; set; }    
    }
Community
  • 1
  • 1
Helen Araya
  • 1,886
  • 3
  • 28
  • 54

1 Answers1

5

I ended up solving my problem by using attributes

Here is how I created it. (My size and extensions are static the same through our the application thats why I hard coded it in the FileTypeAttribute but you can make it dynamic and pass it to the attribute constructor if you want.

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

        public string ValidTypes { get; set; }

        public string ErrorMessageExtension { get; set; }

        public string ErrorMessageSize { get; set; }


        public FileTypeAttribute(string errorExtension, string errorSize)
        {
            ILang lang = ((ContextServiceImpl)ContextService.Instance).HttpContext.RequestServices.GetService(typeof(ILang)) as ILang;
            ErrorMessageExtension = lang[errorExtension];
            ErrorMessageSize = lang[errorSize];

        }

        protected override ValidationResult IsValid(object value, ValidationContext validationContext)
        {
            IFormFile file = value as IFormFile;
            if (file != null)
            {

                if (!_ValidTypes.Any(e => file.FileName.EndsWith(e)))
                {
                    return new ValidationResult(ErrorMessageExtension);
                }
                if (file.Length > MaxSize)
                {
                    return new ValidationResult(ErrorMessageSize);
                }
            }

            return ValidationResult.Success;
        }

        public void AddValidation(ClientModelValidationContext context)
        {
            MergeAttribute(context.Attributes, "data-val", "true");
            var errorMessage = FormatErrorMessage(context.ModelMetadata.GetDisplayName());
            MergeAttribute(context.Attributes, "data-val-fileextensions", ErrorMessageExtension);
            MergeAttribute(context.Attributes, "data-val-maxfilesize", ErrorMessageSize);
        }

        private bool MergeAttribute(
        IDictionary<string, string> attributes, string key, string value)
        {
            if (attributes.ContainsKey(key))
            {
                return false;
            }

            attributes.Add(key, value);
            return true;
        }
    }

Then inside my view model I use the attribute as follows

public class FileUploadViewModel
    {
         [FileType("invalid format", "invalid size")]
        [Required(ErrorMessage = "Please select a file")]
        public IFormFile File { get; set; }

        [Required(ErrorMessage = "Please select link")]
        public string FileName { get; set; }

        public string ExternalLink { get; set; }

        public string Description { get; set; }    
    }

Then inside javascript do this

$.validator.addMethod("fileextensions",
        function (value, element, param) {
            var fileType = $(element)[0].files[0].type;
            var fileTypes = ["image/jpeg", "image/pjpeg", "image/gif", "image/bmp", "image/png", "image/x-png", "image/tiff"]
            var validExtension = $.inArray(type, fileTypes) !== -1;
            return validExtension;
     });

    $.validator.addMethod("maxfilesize",
     function (value, element, param) {

         var fileSize = $(element)[0].files[0].size;
         var maxSize = 1048576;

         var validSize = fileSize < maxSize;
         return validSize;
     });

    $.validator.unobtrusive.adapters.add('fileextensions', [], function (options) {
        var params = {
            fileextensions: $(options.element).data("val-fileextensions").split(',')
        };

        options.rules['fileextensions'] = params;    
        options.messages['fileextensions'] = $(options.element).data("val-fileextensions");

    });

    $.validator.unobtrusive.adapters.add('maxfilesize', [], function (options) {

        options.rules['maxfilesize'] = [];
        options.messages['maxfilesize'] = $(options.element).data("val-maxfilesize");

    });
Helen Araya
  • 1,886
  • 3
  • 28
  • 54