How to allow <input type="file"> to accept only image files?

A

Andy

Use the accept attribute of the input tag. To accept only PNG's, JPEG's and GIF's you can use the following code:

Your Image File

Or simply:

Your Image File

Note that this only provides a hint to the browser as to what file-types to display to the user, but this can be easily circumvented, so you should always validate the uploaded file on the server also.

It should work in IE 10+, Chrome, Firefox, Safari 6+, Opera 15+, but support is very sketchy on mobiles (as of 2015) and by some reports, this may actually prevent some mobile browsers from uploading anything at all, so be sure to test your target platforms well.

For detailed browser support, see http://caniuse.com/#feat=input-file-accept

@madcap accept="file/csv, file/xls" is it valid??

Are you sure it's image/x-png? According to this list, it is just image/png. iana.org/assignments/media-types/media-types.xhtml

Probably it work when the answer was answer, but just tried it and didn´t work for FF. I just needed to add accept=".png, .jpg, .jpeg" E.g: jsfiddle.net/DiegoTc/qjsv8ay9/4

If i want to block file type drop down displayed after file name. How can i achieve this? Because if i choose All Types option from drop down then all files are accepted.

Don't rely on it completely. It can easily accept other files too. You just need to change the type of file allowed in the open file window.

T

Tyilo

Using this:

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

works in both FF and Chrome.

The accept attribute is not a validation tool, all uploads should be validated on the server, always...

still not supported in native android browser, but works on others well I guess caniuse.com/#feat=input-file-accept

I like this solution because in the file prompt the type dropdown shows "Image Files".

Be careful with this, because it allows SVGs, which you might not want.

This will allow maximum image files .png, .jpg, .jpeg, .gif, .bmp, .ico, .tiff, .svg, .ai, .psp, .pcd,.pct, .raw. So it is better to mention type specifically.

E

Er. Mohit Agrawal

Use it like this

<input type="file" accept=".png, .jpg, .jpeg" />

It worked for me

https://jsfiddle.net/ermagrawal/5u4ftp3k/

This doesn't work for iOS 12. User can still choose video in device.

S

Surya Kameswara Rao Ravi

Steps: 1. Add accept attribute to input tag 2. Validate with javascript 3. Add server side validation to verify if the content is really an expected file type

For HTML and javascript:

<html>
<body>
<input name="image" type="file" id="fileName" accept=".jpg,.jpeg,.png" onchange="validateFileType()"/>
<script type="text/javascript">
    function validateFileType(){
        var fileName = document.getElementById("fileName").value;
        var idxDot = fileName.lastIndexOf(".") + 1;
        var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
        if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
            //TO DO
        }else{
            alert("Only jpg/jpeg and png files are allowed!");
        }   
    }
</script>
</body>
</html>

Explanation:

The accept attribute filters the files that will be displayed in the file chooser popup. However, it is not a validation. It is only a hint to the browser. The user can still change the options in the popup. The javascript only validates for file extension, but cannot really verify if the select file is an actual jpg or png. So you have to write for file content validation on server side.

most complete answer

D

Donald Duck

This can be achieved by

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

But this is not a good way. you have to code on the server side to check the file an image or not.

Check if image file is an actual image or fake image

if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    }
    else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}

For more reference, see here

http://www.w3schools.com/tags/att_input_accept.asp
http://www.w3schools.com/php/php_file_upload.asp

M

Mati Cassanelli

Using type="file" and accept="image/*" (or the format you want), allow the user to chose a file with specific format. But you have to re check it again in client side, because the user can select other type of files. This works for me.

<input #imageInput accept="image/*" (change)="processFile(imageInput)" name="upload-photo" type="file" id="upload-photo" />

And then, in your javascript script

processFile(imageInput) {
    if (imageInput.files[0]) {
      const file: File = imageInput.files[0];
      var pattern = /image-*/;

      if (!file.type.match(pattern)) {
        alert('Invalid format');
        return;
      }

      // here you can do whatever you want with your image. Now you are sure that it is an image
    }
  }

This is the best answer, as it will check whether the file is actually an image without requiring the developer to specify all the different extensions they want to allow

I get your idea. Is this a valid JS syntax: const file: File = imageInput.files[0]; ? Also, assigning id to input is not done in conventional manner.

In fact, isn't JS, it is typescript. The block code was copied from an Angular project. If you want to use it in a javascript file, you have to omit the type definition (:File)

It won't work since the file.type is obtained using the file extension! You need to use a piece of code like this to perform the client side validation: github.com/spine001/client-side-validation-of-file-type

O

Ood

Just as an addition: if you want to include all modern image file types with the best cross-browser support it should be:

<input type="file" accept="image/apng, image/avif, image/gif, image/jpeg, image/png, image/svg+xml, image/webp">

This allows all image file types that can be displayed in most browsers while excluding less commons formats like TIFF or formats that are not suitable for the web like PSD.

y

yussan

you can use accept attribute for <input type="file"> read this docs http://www.w3schools.com/tags/att_input_accept.asp

I

Irfan wani

You can add specific type of image or other file type and do validation in your code :

<input  style="margin-left: 10px; margin-top: 5px;" type="file" accept="image/x-png,image/jpeg,application/pdf"
                (change)="handleFileInput($event,'creditRatingFile')" name="creditRatingFile" id="creditRatingFile">
    


  
      handleFileInput(event) {
    console.log(event);
    const file = event.target.files[0];
    if (file.size > 2097152) {
        throw err;
    } else if (
      file.type !== "application/pdf"  &&
      file.type !== "application/wps-office.pdf"   && 
      file.type !== 'application/pdf'  && file.type !== 'image/jpg'  && file.type !== 'image/jpeg'  && file.type !== "image/png"
    ) {
throw err;
    } else {
      
        console.log('file valid')
    }
  }

I

Irfan wani

In html;

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

This will accept all image formats but no other file like pdf or video.

But if you are using django, in django forms.py;

image_field = forms.ImageField(Here_are_the_parameters)

accept="image/*" won't work. It simply filters the browser dialog to show only image files, but there's nothing stopping you from selecting All Files in the drop down and uploading a pdf (or any other file). I think you need to validate it in a way similar to Mati Cassanalli above

G

GorvGoyl

If you want to upload multiple images at once you can add multiple attribute to input.

upload multiple files:

ß

ßãlãjî

Simple and powerful way(dynamic accept)

place formats in array like "image/*"

var upload=document.getElementById("upload"); var array=["video/mp4","image/png"]; upload.accept=array; upload.addEventListener("change",()=>{ console.log(upload.value) })

w

wongz

Other people's answers refactored for ReactJS (hooks)

import React from 'react';

const ImageUploader = () => {

    const handleImageUpload = (e) => {
        // If no file selected, return
        if (e.target.files.length === 0) return false;
        const file = e.target.files[0];

        // If no image selected, return
        if (!/^image\//.test(file.type)) {
            alert(`File ${file.name} is not an image.`);
            return false;
        }

        // ...
    };

    return (
        <>
            <input type='file' accept='image/*' onChange={(e) => handleImageUpload(e)} />
        </>
    );
};

export default ImageUploader;

How to allow <input type="file"> to accept only image files?

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US