0

I need to validate for file field, if it contains special character whichever is not correct for file field.

I am uploading my file and after it gets uploaded I am not able to open it if it has special charterer.

I need to validate :

1) file name - no special character

2) file size - limit the size

3) file format - video and only .mp4

Note : Thanks for istos comment I am using accept attribute but it would not validate, I have to do validation in either JS or PHP.

I am using ajax call for my form instead of using html form. I am not sure if I need to do this in client side (jQuery, JS) or server side (PHP) or both site. Please help, Thanks 

$('body').on('change', '#gl_video_file', function(e) {
                var glVideoFiles = event.target.files;
                glVideoFileSplit = glVideoFiles[0].name.split(".");
                glVideoFileFormat = glVideoFileSplit[1];
                glVideoFileName = glVideoFileSplit[0].split(' ').join('_')
                alert ("File name : "+glVideoFileName)
            });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" placeholder="Video file" class="dupFile" id="gl_video_file">
Community
  • 1
  • 1
Hitesh
  • 3,592
  • 9
  • 36
  • 77
  • Start with this first: http://stackoverflow.com/questions/181214/file-input-accept-attribute-is-it-useful then build from there. – istos Jan 08 '15 at 07:46
  • Thanks @istos,it was very useful. I have added it But it will not validate the field. I can still upload image in video file tag – Hitesh Jan 08 '15 at 08:53

1 Answers1

1

You can use a regular expression to check your file name. On server side:

if (!preg_match('/^[a-z0-9_-]+(\.mp4)$/i', $filename)) {
    die ('Bad file name format.');
}

For the size, you can check:

if ($_FILES["fileinputname"]['size'] > $maxFileSize) {
    die('File size is too big.');
}

With jQuery to check the name:

if (!$('#filenameinputid').val().match(/^[a-z0-9_-]+(\.mp4)$/i)) {
    alert('Bad file name format.');
}

and the size:

$('#filenameinputid').bind('change', function() {
    if (this.files[0].size > maxFileSize) {
        alert("File size is too big.");
    }
});
vaso123
  • 12,011
  • 4
  • 28
  • 59
  • which would be preferable server side or client side ? – Hitesh Jan 08 '15 at 12:13
  • Both could be good. Todays, is a trend to not send and refresh the page, just do it on client side. BUT! **Always do a check on server side.** Client script could be manipulated. – vaso123 Jan 08 '15 at 12:15
  • Thank you so much for answering , Let me check it :) – Hitesh Jan 08 '15 at 12:16
  • You've used `e` in your function parameter later you tried get the `event`. Use the console to check errors: http://jsfiddle.net/0o8p9w85/4/ – vaso123 Jan 08 '15 at 12:47
  • when I selected mp4 file with name "test343.mp4", it throws error ...sorry for bothering you again and again – Hitesh Jan 08 '15 at 16:05
  • Because the first check. What is that? – vaso123 Jan 08 '15 at 16:09
  • Even if I comment first check I get error in `second check : ` .... http://jsfiddle.net/hiteshbhilai2010/0o8p9w85/5/ – Hitesh Jan 09 '15 at 08:44