Question

I’m currently creating some custom attributes for doing uploaded file validation.

One of which is a FileSizeAttribute to enforce certain limits (e.g. cannot be bigger than x bytes or smaller than y bytes).

Is there any way I can access the ContentLength property of the HttpPostedFileBase? I was reading a tutorial on file extension validation and the author showed some sample code for simply validating the file extensions.

I’d like to extend to validating the file size client side (in addition to server side) so I can tell them before they even upload if it’s outside of the size limits.

From the code snippet available, it seems like he has access to only the filename:

jQuery.validator.addMethod("fileextensions", function (value, element, param) {
    var extension = getFileExtension(value).toLowerCase();
    var validExtension = $.inArray(extension, param.fileextensions) !== -1;
    return validExtension;
});

Am I wrong here or am I just missing something? I’ve never used jQuery and I have a cursory knowledge of JavaScript, so I don’t really know if this is even possible.

Answer 1

This could be done if the browser supports the File API. It’s a simple matter of querying the size property.

Here’s an example:

[AttributeUsage(AttributeTargets.Field | AttributeTargets.Property, AllowMultiple = false, Inherited = true)]
public class FileExtensionsAttribute : ValidationAttribute, IClientValidatable
{
    private List<string> ValidExtensions { get; set; }
    public int MaxContentLength { get; set; }

    public FileExtensionsAttribute(string fileExtensions)
    {
        ValidExtensions = fileExtensions.Split('|').ToList();
    }

    public override bool IsValid(object value)
    {
        HttpPostedFileBase file = value as HttpPostedFileBase;
        if (file != null)
        {
            var fileName = file.FileName;
            var isValidExtension = ValidExtensions.Any(y => fileName.EndsWith(y));
            var isValidContentLength = file.ContentLength < MaxContentLength;
            return isValidExtension && isValidContentLength;
        }
        return true;
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        var rule = new ModelClientValidationRule();
        rule.ValidationType = "file";
        rule.ErrorMessage = this.FormatErrorMessage(ErrorMessage);
        rule.ValidationParameters["fileextensions"] = string.Join(",", ValidExtensions);
        rule.ValidationParameters["maxcontentlength"] = MaxContentLength.ToString();
        yield return rule;
    }
}

Model:

public class MyViewModel
{
    [FileExtensions("txt|doc", MaxContentLength = 200000)]
    public HttpPostedFileBase File { get; set; }
}

Controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return View(model);
    }
}

View:

@model MyViewModel
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    (function ($) {
        var getFileExtension = function (fileName) {
            var extension = (/[.]/.exec(fileName)) ? /[^.]+$/.exec(fileName) : undefined;
            if (extension != undefined) {
                return extension[0];
            }
            return extension;
        };

        var getFileSize = function (fileElement) {
            if (fileElement.files && fileElement.files.length > 0) {
                return fileElement.files[0].size;
            }
            return -1;
        };

        $.validator.unobtrusive.adapters.add(
            'file', ['fileextensions', 'maxcontentlength'], function (options) {
                var params = {
                    fileextensions: options.params.fileextensions.split(','),
                    maxcontentlength: options.params.maxcontentlength
                };
                options.rules['file'] = params;
                if (options.message) {
                    options.messages['file'] = options.message;
                }
            }
        );

        $.validator.addMethod('file', function (value, element, params) {
            var extension = getFileExtension(value);
            var validExtension = $.inArray(extension, params.fileextensions) !== -1;
            var fileSize = getFileSize(element);
            return validExtension && fileSize < parseInt(params.maxcontentlength);
        }, '');

    })(jQuery);
</script>

@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.LabelFor(x => x.File)
    @Html.EditorFor(x => x.File)
    @Html.ValidationMessageFor(x => x.File)
    <button type="submit">OK</button>
}

Editor template (~/Views/Shared/EditorTemplates/HttpPostedFileBase):

@model HttpPostedFileBase
@Html.TextBoxFor(model => model, new { type = "file" })