CODEWITHSUNDEEP
htmlimageuploadfile-upload
JacobT
JacobT

Reputation: 3141

HTML: How to limit file upload to be only images?

With HTML, how do I limit what kind of filetypes can be uploaded?

To easy the user experience, I want to limit file uploads to be only images (jpeg, gif, png).

<form method="post" action="..." enctype="multipart/form-data">
<label for="image">Photo</label>
<input name="image" type="file" />
</form>

Upvotes: 164

Views: 234339

Answers (10)

kongaraju
kongaraju

Reputation: 9606

HTML5 File input has accept attribute and also multiple attribute. By using multiple attribute you can upload multiple images in an instance.

<input type="file" multiple accept="image/*">

You can also limit multiple mime types.

<input type="file" multiple accept="image/*,audio/*,video/*">

and another way of checking mime type using file object.

file object gives you name, size and type.

const files=e.target.files;
    
const mimeType=files[0].type; // You can get the mime type

You can also restrict the user for some file types to upload by the above code.

Upvotes: 127

Aleksandra
Aleksandra

Reputation: 21

Because <input type="file" id="fileId" accept="image/*"> can't guarantee that someone will choose an image, you need some validation like this:

if(!(document.getElementById("fileId").files[0].type.match(/image.*/))){
                alert('You can\'t upload this type of file.');
                return;
}

Upvotes: 1

hackernewbie
hackernewbie

Reputation: 1722

This is what I have been using successfully:

...
<div class="custom-file">
    <input type="file" class="custom-file-input image-gallery" id="image-gallery" name="image-gallery[]" multiple accept="image/*">
   <label class="custom-file-label" for="image-gallery">Upload Image(s)</label>
</div>
...

It is always a good idea to check for the actual file type on the server-side as well.

Upvotes: 4

Arun Prabhakaran P
Arun Prabhakaran P

Reputation: 21

<script>

    function chng()
    {
        var typ=document.getElementById("fiile").value;
        var res = typ.match(".jp");

        if(res)
        {
            alert("sucess");
        }
        else
        {
            alert("Sorry only jpeg images are accepted");
            document.getElementById("fiile").value="; //clear the uploaded file
        }
    }

</script>

Now in the html part

<input type="file" onchange="chng()">

this code will check if the uploaded file is a jpg file or not and restricts the upload of other types

Upvotes: 2

Vineesh Puttanisseri
Vineesh Puttanisseri

Reputation: 79

Here is the HTML for image upload. By default it will show image files only in the browsing window because we have put accept="image/*". But we can still change it from the dropdown and it will show all files. So the Javascript part validates whether or not the selected file is an actual image.

 <div class="col-sm-8 img-upload-section">
     <input name="image3" type="file" accept="image/*" id="menu_images"/>
     <img id="menu_image" class="preview_img" />
     <input type="submit" value="Submit" />
 </div>

Here on the change event we first check the size of the image. And in the second if condition we check whether or not it is an image file.

this.files[0].type.indexOf("image") will be -1 if it is not an image file.

document.getElementById("menu_images").onchange = function () {
    var reader = new FileReader();
    if(this.files[0].size>528385){
        alert("Image Size should not be greater than 500Kb");
        $("#menu_image").attr("src","blank");
        $("#menu_image").hide();  
        $('#menu_images').wrap('<form>').closest('form').get(0).reset();
        $('#menu_images').unwrap();     
        return false;
    }
    if(this.files[0].type.indexOf("image")==-1){
        alert("Invalid Type");
        $("#menu_image").attr("src","blank");
        $("#menu_image").hide();  
        $('#menu_images').wrap('<form>').closest('form').get(0).reset();
        $('#menu_images').unwrap();         
        return false;
    }   
    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("menu_image").src = e.target.result;
        $("#menu_image").show(); 
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

Upvotes: 6

Ms2ger
Ms2ger

Reputation: 15993

HTML5 says <input type="file" accept="image/*">. Of course, never trust client-side validation: Always check again on the server-side...

Upvotes: 284

AndrewR
AndrewR

Reputation: 6758

Checkout a project called Uploadify. http://www.uploadify.com/

It's a Flash + jQuery based file uploader. This uses Flash's file selection dialog, which gives you the ability to filter file types, select multiple files at the same time, etc.

Upvotes: 0

John Lechowicz
John Lechowicz

Reputation: 2583

Ultimately, the filter that is displayed in the Browse window is set by the browser. You can specify all of the filters you want in the Accept attribute, but you have no guarantee that your user's browser will adhere to it.

Your best bet is to do some kind of filtering in the back end on the server.

Upvotes: 0

Robert K
Robert K

Reputation: 30328

You can only do this securely on the server-side. Using the "accept" attribute is good, but must also be validated on the server side lest users be able to cURL to your script without that limitation.

I suggest that you: discard any non-image file, warn the user, and redisplay the form.

Upvotes: 1

David
David

Reputation: 73594

Edited

If things were as they SHOULD be, you could do this via the "Accept" attribute.

http://www.webmasterworld.com/forum21/6310.htm

However, browsers pretty much ignore this, so this is irrelavant. The short answer is, i don't think there is a way to do it in HTML. You'd have to check it server-side instead.

The following older post has some information that could help you with alternatives.

File input 'accept' attribute - is it useful?

Upvotes: 7

Related Questions