How to remove image input with required field by using javascript

Question

I did a script that check the image width and remove the image if the width is lesser than certain amount.

The image field is required and after I removed it, it still passed the file validation.

<form action="">
    <input type="file" id="file" required />
    <input type="submit" value="Submit">
</form>

Javascript

var _URL = window.URL || window.webkitURL;

$("#file").change(function (e) {
    var file, img;


    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function () {
            if(this.width<490||this.height<175){
            $("#file").val("").change();
            }
        };
        img.onerror = function () {
            alert("not a valid file: " + file.type);
        };
        img.src = _URL.createObjectURL(file);


    }

});

steinmas · Accepted Answer · 2014-02-14 23:59:42Z

1

Your conditional statement is setting file = this.files[0]. Change to ==

Edit: Since both commenters pointed out that I was wrong, replace $("#file").val("").change():

with

$("#file").replaceWith($("#file").clone());

edited Feb 14, 2014 at 23:59

answered Feb 14, 2014 at 23:33

steinmas

3983 silver badges9 bronze badges

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

6 Comments

C3roe Over a year ago

This is not meant as a comparison, but as a value assignment. If this.files[0] is undefined, then the whole if block does not get executed – if it is not, then file has a value that can be worked with within.

JR Tan Over a year ago

Sorry, this is not the answer I want. The code is working, just the validation part after we removed the image. I set the image field is required and after I removed the image, it still passed the file validation.

steinmas Over a year ago

I edited my answer with a different solution, since I was mistaken about your conditional statement.

JR Tan Over a year ago

Thanks. This answer worked but only for the first time. The 2nd time you upload the same image, it passed the validation jsfiddle.net/AUQYv/6

steinmas Over a year ago

Well shoot, the change() method isn't being re-initialized when you enter one the first time, so the change() code isn't being called the second time.

|

Netzach · Accepted Answer · 2014-02-15 00:36:36Z

0

Try with this.

<form action="" id="form" method="post">
    <input type="file" id="file" required accept='image/png, image/gif, image/jpeg, image/jpg'/>
    //your button submit
    <a href="#" id="submitForm">Submit</a>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
//When click the button
$('#submitForm').click(function(){
  var validation = true; //Var to validation true
  if($('#file').val()){ //There's image?
      if($('#file').width()<490 || $('#file').height()<175){
          validation = false;
      }
  }else{
     validation = false;
  }
  //Is true?
  if(validation){
    $('#form').submit();
  }else{
    alert("select a image");
  }
});
</script>

edited Feb 15, 2014 at 0:36

answered Feb 14, 2014 at 23:40

Netzach

3142 silver badges14 bronze badges

3 Comments

JR Tan Over a year ago

Sorry, this is not the answer I want. I set the image field is required and after I removed the image, it still passed the file validation.

Netzach Over a year ago

sorry, but I don't understand you, can you be most specific with your question please?

JR Tan Over a year ago

The image is a required field. When you click submit without uploading an image, you can't proceed as it will be asking for an image. But after you uploaded an image that width lesser than 400px, the file is removed but you can proceed without uploading an image.

Collectives™ on Stack Overflow

How to remove image input with required field by using javascript

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related