0

Here is my jQuery bit that validates whether image uploaded is valid or not on getting an error or success an alert box is shown

Need solution for:

  1. message instead of an alert box when success or error function is called
  2. the file should be discarded if there is an error (in my case it stays)

jQuery bit:

(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 validate() {
    $('#filen').checkFileType({
    allowedExtensions: ['jpg', 'jpeg', 'png', 'bmp'],
    success: function() {

        $("#filen").text("Valid image").show();
    },
    error: function() {
        /*messages: {
            filen: "Please insert valid image file with following extensions .jpg .jpeg .png .bmp"
        },*/
        alert('Error: Please insert valid image file with following extensions .jpg .jpeg .png .bmp');
        reload("index134.html");
    }
});

html bit:- 

<tr>
    <td><label>Insert File</label></td>
    <td><input type="file" name="filen" id ="filen"/></td>
</tr>
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Prathamesh Sarang
  • 35
  • 1
  • 10

1 Answers1

0
  1. For the message part you can create separate element ( I created div with id "message".
  2. To empty the value of field I borrowed code from another answer.

See result in action on JSFiddle

HTML:

<div id="message"></div>
<table>
  <tr>
    <td>
      <label>Insert File</label>
    </td>
    <td>
      <input type="file" name="filen" id="filen" />
    </td>
  </tr>
</table>

JS:

$.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).wrap('<form>').closest('form').get(0).reset();
        $(this).unwrap('<form>');

        $(this).focus();
      } else {
        options.success();

      }

    });

  });
};

$(function() {
  $('#filen').checkFileType({
    allowedExtensions: ['jpg', 'jpeg', 'png', 'bmp'],
    success: function() {

      $("#message").text("Valid image").fadeIn();
    },
    error: function() {
      $("#message").text('Error: Please insert valid image file with following extensions .jpg .jpeg .png .bmp').fadeIn();
    }
  });
});
Community
  • 1
  • 1
Skriptotajs
  • 844
  • 6
  • 15
  • @skriptoajs i appreciate what you have done it works in this case only...but it does not when there are more form elements like text , select, etc....so can you provide a more efficient method which will work when there are more elements in the form – Prathamesh Sarang Mar 30 '16 at 09:00
  • If you could provide more info with what you are working with and what you are trying to achieve, then I could help you out more. I you want general form validation, then I would suggest using jQuery validate plugin, there fill already be solution for file validation and message displaying. – Skriptotajs Mar 30 '16 at 09:07
  • nevermind. i got what i wanted little bit from you and little bit of my code....but ur code played a major part..thanx..! – Prathamesh Sarang Mar 30 '16 at 10:33