How to restrict only video upload using javascript or Jquery?

Question

Hi I have one requirement where I am expecting a lot of video upload traffic but I want to make sure the uploaded file only are videos.

I have not used any uploader plugin for some specific reason.

<input type="file" id="upload" class="btn btn-blue" style="height: 35px;" name="file" /><br />

I am using simple html file type input and I want to restrict only video upload.

I have tried checking extensions but It's lot of extension and difficult to check each one of it.

http://www.fileinfo.com/filetypes/video

Any idea on this?

you can do the following : when the user clicks the submit button to upload the video,Use jQuery to determine the file extension i.e allow the file to be uploaded only if the file extension is .mp4 or .avi etc... if not then use event.preventdefault() followed by a message that only video files should be uploaded — Robin
– Robin, Commented Oct 31, 2014 at 4:25
to check with I guess 150 + video extensions are not a good way to restrict. — Samir Shah
– Samir Shah, Commented Oct 31, 2014 at 4:29
then try some regular expression in the process i have mentioned maybe that will help — Robin
– Robin, Commented Oct 31, 2014 at 4:30

Milind Anantwar · Accepted Answer · 2014-10-31 03:10:28Z

1

There is no way you can restrict the upload on client side. You should be using server side validation for doing such validations.

You can set the accept attribute as video for input type file. this only show the file-type filtering based on MIME type for the file-select which can be changed by user :

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

for setting through JS:

document.getElementById("upload").accept = "video/*";

edited Oct 31, 2014 at 3:10

answered Oct 31, 2014 at 2:57

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Roko C. Buljan Over a year ago

Notice: accept video/* attribute is valid from HTML5 developer.mozilla.org/en-US/docs/Web/HTML/Element/Input means that still in 2014 IE8,9 are to take in serious consideration.

Samir Shah Over a year ago

If I use accept attribute it will not restrict me. In browse window I can select all files and select any non video file.

Collectives™ on Stack Overflow

How to restrict only video upload using javascript or Jquery?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related