Validating HttpPostedFileBase on client side with jquery unobtrusive

Question

I got jquery (original, validate & unobtrusive) on my site. I've extended a validation attribute which works on server side, but I can not for the life of me get it to work on client side. What am I missing?

My model looks like this:

[Display(Name = "UploadFile"), DataType(DataType.Upload)]
[ValidateFile]
public IEnumerable<HttpPostedFileBase> MyImage { get; set; }

I have added this attribute extension to my model:

public class ValidateFileAttribute : ValidationAttribute 
{
    public override bool IsValid(object value)
    {
        int MaxContentLength = 1024 * 1024 * 10; //10 MB
        string[] AllowedFileExtensions = new string[] { ".jpg", ".gif", ".png", ".pdf" };
        var files = value as IEnumerable<HttpPostedFileBase>;

        foreach (var file in files)
        {
            if (file == null)
            {
                return false;
            }
            else if (!AllowedFileExtensions.Contains(file.FileName.Substring(file.FileName.LastIndexOf('.'))))
            {
                ErrorMessage = Resources.ResourcesAdvert.AdvertUploadFileExtensionErrorShorter + string.Join(", ", AllowedFileExtensions);
                return false;
            }
            else if (file.ContentLength > MaxContentLength)
            {
                ErrorMessage = Resources.ResourcesAdvert.AdvertUploadFileTooBig + (MaxContentLength / 1024).ToString() + "MB";
                return false;
            }
            else
            {
                return true;
            }
        }
        return false;
    }
}

I've got a view like this:

@Html.LabelFor(x => x.MyImage)

<input type="file" name="MyImage[0]" id="MyImage1" />
<input type="file" name="MyImage[1]" id="MyImage2" />
<input type="file" name="MyImage[2]" id="MyImage3" />

@Html.ValidationMessageFor(x => x.MyImage)

My controller is working fine and it works to upload images if they are valid. Any ideas how I could proceed?

EDIT: I've also tried to use this , but that didn't work for me client side either and I could not manage to customize an error message.

Best to create separate validation attributes for FileSize and FileType. Refer [this answer](http://stackoverflow.com/questions/33414158/checking-image-mime-size-etc-in-mvc/33426397#33426397) for an example of a `FileTypeAttribute` — , Feb 07 '16 at 10:17
Refer also [this article](http://www.devtrends.co.uk/blog/the-complete-guide-to-validation-in-asp.net-mvc-3-part-2) for a good guide to creating validation attributes that support client side validation — , Feb 07 '16 at 10:20
I appreciate your suggestions. I will check out this article. — guitarzero, Feb 07 '16 at 10:23

score 0 · Accepted Answer · edited May 23 '17 at 11:45

0

As there were no answer I'll share some information in case someone else comes across the same problem I did.

I eventually solved it by following the link @Stephen Muecke provided (here). My problem was with not configuring the javascript properly since I didn't understand where to put each variable.

edited May 23 '17 at 11:45

Community

1
1

answered Feb 09 '16 at 19:56

guitarzero

545
9
18

Validating HttpPostedFileBase on client side with jquery unobtrusive

1 Answers1