Is possible to validate file size and extension before upload at the same time?

Question

I have succeeded in validating the file extension with jquery but when I tried to validate the file size, I have problem that my code is not working.

I using newest jquery version.

PROBLEM EXTENSION AND SIZE FILE VALIDATION CODE HERE :

(function($) {$.fn.checkFileType = function(options) {
                var defaults = {
                    allowedExtensions: [],
                    success: function() {},
                    error: function() {}
                };
                options = $.extend(defaults, options);

                return this.each(function() { 

                    $(this).on('change', function() {
                        var value = $(this).val(),
                        file = value.toLowerCase(),
                        extension = file.substring(file.lastIndexOf('.') + 1);

                        if ($.inArray(extension, options.allowedExtensions) == -1) {
                            options.error();
                            $(this).focus();
                        } else {
                            options.success();

                        }

                    });

                    $(this).on('change', function() { //its wrong ?
                        var size = $(this).files[0].size,

                        if (size <= 200) { 
                            options.success();
                        } else {
                            options.error();
                            $(this).focus();

                        }

                    });

                });
            };

        })(jQuery);
        $(function() {
            $('#upload_file').checkFileType({ // here is input file 
                allowedExtensions: ['jpg', 'jpeg'],
                success: function() {
                    $("#alert").html("File allowed Extensions : jpg or jpeg").show().fadeOut(5000);
                },
                error: function() {
                    $("#alert").html("Please upload file with jpg or jpeg and 200kb maximum size ").show().fadeOut(5000);
                    var $el = $('#upload_file');
                    $el.wrap('<form>').closest('form').get(0).reset();
                    $el.unwrap();
                }
            });

        });

SUCCESS EXTENSION FILE VALIDATION CODE HERE :

        (function($) {
            $.fn.checkFileType = function(options) {
                var defaults = {
                    allowedExtensions: [],
                    success: function() {},
                    error: function() {}
                };
                options = $.extend(defaults, options);

                return this.each(function() {

                    $(this).on('change', function() {
                        var value = $(this).val(),
                        file = value.toLowerCase(),
                        extension = file.substring(file.lastIndexOf('.') + 1);

                        if ($.inArray(extension, options.allowedExtensions) == -1) {
                            options.error();
                            $(this).focus();
                        } else {
                            options.success();

                        }

                    });

                });
            };

        })(jQuery);
        $(function() {
            $('#upload_file').checkFileType({ // here is input file 
                allowedExtensions: ['jpg', 'jpeg'],
                success: function() {
                    $("#alert").html("File allowed Extensions : jpg or jpeg").show().fadeOut(5000);
                },
                error: function() {
                    $("#alert").html("Please upload file with jpg or jpeg and 200kb maximum size ").show().fadeOut(5000);
                    var $el = $('#upload_file');
                    $el.wrap('<form>').closest('form').get(0).reset();
                    $el.unwrap();
                }
            });

        });

duplicate https://stackoverflow.com/questions/1601455/how-to-check-file-input-size-with-jquery — Wils, Apr 25 '19 at 09:27

sushil bharwani · Accepted Answer · 2019-04-25T09:57:18.437

3

When you select a File from the File Selector Dialog u get a Files Array Object. This object is having information about the File. You can access single File like.

this.files[0]

To Access Size. You can use

this.files[0].size.

edited Apr 25 '19 at 09:57

answered Apr 25 '19 at 09:41

sushil bharwani

29,685
30
94
128

Thx very much that usefull – Annug Dev Apr 25 '19 at 10:50

JavaStudent · Answer 2 · 2019-04-25T09:38:43.843

1

I could see the ideal answer you are referring is having only file extension validation available. So its taking place correctly, So in order to check file size @client side in jquery you could do this :

 if(this.files[0].size > 2000000) {
   alert("Please upload file less than 2MB. Thanks!!");
   $(this).val('');
 }

edited Apr 25 '19 at 09:38

answered Apr 25 '19 at 09:29

JavaStudent

1,081
1
8
17

Is possible to validate file size and extension before upload at the same time?

2 Answers2