CODEWITHSUNDEEP
htmlimageinputfile-upload
kbvishnu
kbvishnu

Reputation: 15630

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

I need to upload only image file through <input type="file"> tag.

Right now, it accepts all file types. But, I want to restrict it to only specific image file extensions which include .jpg, .gif, etc.

How can I achieve this functionality?

Upvotes: 744

Views: 1153623

Answers (13)

Flash Noob
Flash Noob

Reputation: 500

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

function handleFileInput(e) {
  const [ file ] = e.target.files

  if (!file) return

  const { size, type } = file

  if (size > 2097152) {
    throw "too big"
  } else if (
    type !== "application/pdf" && type !== "application/wps-office.pdf" &&
    type !== "image/jpg" && type !== "image/jpeg" && type !== "image/png"
  ) {
    throw "not the right type"
  } else {
    console.log("file valid")
  }
}
<input type="file" accept="image/x-png,image/jpeg,application/pdf" onchange="handleFileInput(event)" />

Upvotes: 9

madcap laughs
madcap laughs

Reputation: 16942

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

<label>Your Image File
  <input type="file" name="myImage" accept="image/png, image/gif, image/jpeg" />
</label>

Or simply:

<label>Your Image File
  <input type="file" name="myImage" accept="image/*" />
</label>

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

Upvotes: 1691

Ood
Ood

Reputation: 1795

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.

Upvotes: 15

wongx
wongx

Reputation: 11849

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;

Upvotes: 2

Irfan wani
Irfan wani

Reputation: 5055

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)

Upvotes: 3

Balaji
Balaji

Reputation: 10867

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)
})
<input type="file" id="upload" >

Upvotes: 1

GorvGoyl
GorvGoyl

Reputation: 49140

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

upload multiple files: <input type="file" multiple accept='image/*'>

Upvotes: 2

Mati Cassanelli
Mati Cassanelli

Reputation: 743

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
    }
  }

Upvotes: 20

Surya Kameswara Rao Ravi
Surya Kameswara Rao Ravi

Reputation: 1556

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:

  1. 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.
  2. The javascript only validates for file extension, but cannot really verify if the select file is an actual jpg or png.
  3. So you have to write for file content validation on server side.

Upvotes: 59

Ashok Devatwal
Ashok Devatwal

Reputation: 488

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

Upvotes: 35

yussan
yussan

Reputation: 2327

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

Upvotes: 6

Er. Mohit Agrawal
Er. Mohit Agrawal

Reputation: 2276

Use it like this 

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

It worked for me

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

Upvotes: 121

Tyilo
Tyilo

Reputation: 30102

Using this:

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

works in both FF and Chrome.

Upvotes: 237

Related Questions