Detecting file upload size on the client side?

Question

I'm using PHP for file uploads. In the PHP manual it shows an example using a MAX_FILE_SIZE hidden field, saying that it will detect on the client side (i.e. the browser) whether the file is too large or not.

I've just tried the example in Firefox, Chrome and IE and it doesn't work. The file is always uploaded, even if it is way larger than the specified hidden field.

Incidentally, if the file is larger than MAX_FILE_SIZE then calling move_uploaded_file doesn't work, so it seems the variable is having an effect server-side, but not client-side.

Answer 1

On MAX_FILE_SIZE

Read This:

...At http://www.php.net/manual/en/features.file-upload.php#features.file-uplo ad.post-method and equivalent locations in other formats, it is stated that browsers take the value of a MAX_FILE_SIZE form field into account.

This information is repeated elsewhere on the web and in books, but appears to originate from the PHP documentation (it does not appear in terms of other server-side technologies).

There is nothing in any of the HTML, HTTP or related specs to indicate that this is the case (in particular RFC 1867 which introduced file uploads to HTML doesn't mention it, so it isn't even a case of a kludge that was mentioned in the first RFC and then dropped) nor does it make sense in the context of the HTML specs (there is nothing to indicate any relationship between that particular hidden input and the file input). The only statements about hidden fields I could find in any of them was warnings in the security considerations sections against user-agents basing any file-related operations on anything mentioned in a hidden field.

No browsers appear to perform this as an "extension". Indeed given that there are potentially other possible meanings for a hidden field with that name in an application handling several file uploads, it would have to be considered a design flaw any any did.

I submit that there is no such mechanism in mainstream browsers (if any at all) and indeed shouldn't be. Reference to it should be dropped from documentation.

I'd further suggest that since this idea has propagated from this documentation elsewhere that a note about it not working should to be added.

If a mechanism is required or desired for more rapidly handling this sort of file handling issue then it requires functionality to allow PHP to intercept streams being uploaded before request completion, which would be completely different to how this documentation suggest it should be dealt with, even if it was true...

• http://www.juangiordana.com.ar/blog/2007/12/08/max_file_size-erroneo/

---

the code below come from swfUplaod php implementation:

// Check post_max_size (http://us3.php.net/manual/en/features.file-upload.php#73762)
    $POST_MAX_SIZE = ini_get('post_max_size');
    $unit = strtoupper(substr($POST_MAX_SIZE, -1));
    $multiplier = ($unit == 'M' ? 1048576 : ($unit == 'K' ? 1024 : ($unit == 'G' ? 1073741824 : 1)));

    if ((int)$_SERVER['CONTENT_LENGTH'] > $multiplier*(int)$POST_MAX_SIZE && $POST_MAX_SIZE) {
        header("HTTP/1.1 500 Internal Server Error");
        echo "POST exceeded maximum allowed size.";
        exit(0);
    }
// Validate the file size (Warning the largest files supported by this code is 2GB)
    $max_file_size_in_bytes = 2147483647;           
    $file_size = @filesize($_FILES[$upload_name]["tmp_name"]);
        if (!$file_size || $file_size > $max_file_size_in_bytes) {
            HandleError("File exceeds the maximum allowed size");
            exit(0);
        }

Answer 2

As far as I know there is no simple, cross-browser solution to achieve this. The only working solutions are Flash or Java based since these technologies can access filesystem and get file info.

Example scripts: YUI2 Uploader, FancyUpload, SWFUpload

Answer 3

This probably only works on Firefox 3.6 for now:

<script type="text/javascript">
    function checkSize()
    {
        var input = document.getElementById("upload");

        // check for browser support (may need to be modified)
        if(input.files && input.files.length == 1)
        {           
            if (input.files[0].fileSize > 1024) /* or maybe .size */
            {
                alert("The file must be less than 1KB");
                return false;
            }
        }

        return true;
    }
</script>


<form method="post" enctype="multipart/form-data" onsubmit="return checkSize()">    
    <input type="file" id="upload" />
    <input type="submit" />
</form>

See http://www.w3.org/TR/FileAPI/.