Question

so.. i have a XMLHttpRequest image uploader and i don’t know how to limit the image uploader to only upload images nothing else and i have put a limit on the file size so its 3mb so its not too big

question how do you limit the image uploader to only upload images nothing else

image uploader code

    // following line is not necessary: prevents running on SitePoint servers
    if (location.host.indexOf("sitepointstatic") >= 0) return

    var xhr = new XMLHttpRequest();
    if (xhr.upload && file.type == ("image/jpg"||"image/png") && file.size <= $id("MAX_FILE_SIZE").value) {

        // create progress bar
        var o = $id("progress");
        var progress = o.appendChild(document.createElement("p"));
        progress.appendChild(document.createTextNode("upload " + file.name));


        // progress bar
        xhr.upload.addEventListener("progress", function(e) {
            var pc = parseInt(100 - (e.loaded / e.total * 100));
            progress.style.backgroundPosition = pc + "% 0";
        }, false);

        // file received/failed
        xhr.onreadystatechange = function(e) {
            if (xhr.readyState == 4) {
                progress.className = (xhr.status == 200 ? "success" : "failure");
            }
        };

        // start upload
        xhr.open("POST", "upload.php", true);           
        xhr.setRequestHeader("X_FILENAME", file.name);
        xhr.send(file);
    }
    else
    {
    alert("file in unsported at this time " + file.type);
    }

I just want to check their file extension just to be clear.
Thanks for your help

Answer 1

Don’t rely on javascript to filter uploaded files. I would suggest only checking the file extension – it will work for honest users 99.9% of the time, and malicious users will find a way around any javascript.

The security comes from server-side verification. On the server, you can check by using a function or library to parse the file as an image. For example, you can run a function to check the image’s dimensions, which will throw an error if the file is not an image.