ASP.NET: Validate file size (width and height) before upload.

Question

Hello!

Is there some way to validate the image size (height and width) before upload it to server?

I think is using Javascript but I don't know how. Or maybe with some client asp.net validator.

Any advice?

Answer 1

You could use GD to check the size see this project for an ASP.net wrapper

Answer 2

You need to ask yourself, do you really think this is possible at all?

How would Javascript open a file? How would it read from it? Do you have a library that can read any number of image formats?

Answer 3

This can't be done using javascript on the client-side. Maybe you'll find a file upload component written in flash, silverlight or similar that allows to restrict the files being uploaded by the type, size and dimensions.

Answer 4

You simply cannot know the file size in JS on the client.

What you could do is inspect the file size once the request arrives on the server, then cancel the transfer if the expected file size is over a certain limit:

In your upload module's BeginRequest:

   HttpWorkerRequest workerRequest = (HttpWorkerRequest)context.GetType().GetProperty("WorkerRequest",  BindingFlags.Instance | BindingFlags.NonPublic).GetValue(context, null);
        // Indicates if the worker request has a body

        if (workerRequest.HasEntityBody())
        {
            // Get the byte size of the form post. 
           long contentLength = long.Parse((workerRequest.GetKnownRequestHeader(HttpWorkerRequest.HeaderContentLength)));
            if (contentLength > MAX_UPLOAD_FILE_SIZE * 1024 )
                  {
                   workerRequest.CloseConnection();
                   context.Response.Redirect(SomeErrorPage);
                  }
        }

Haven't tested this yet, but theoretically it might work

EDIT: never mind, i'm an idiot. I thought he meant checking the FILE SIZE, not IMAGE SIZE

Answer 5

I found this Javascript snippet and worked on my system (IE 7.0.6001.18000). You should be aware and check for possible cross browser problems.

var tempImage;

function showDimensions() {
    var imageName = document.forms[0].elements['myFile'].value;
    if (imageName != '') {
        imageName = 'file:///' + escape(imageName.split('\\').join('/'));
        imageName = imageName.split('%3A').join(':');

        tempImage = new Image();
        tempImage.onload = getDimensions;
        tempImage.src = imageName + '?randParam=' + new Date().getTime();
        // append a timestamp to avoid caching issues - which happen if you
        // overwrite any image with one of different dimensions, and try to
        // get the dimensions again even with cache settings to max,
        // in both ff and ie!
    }
}

function getDimensions() {
    alert(tempImage.width + ' x ' + tempImage.height);
}