input type = file is preventing my submit button

Question

I have an HTML form which has image upload functionality, some times I need to hide it from the input of config.ini file so I had built it like this

<label class="<?php if($config[imageUpload][Status]){echo 'form-group';}else{echo 'form-group hidden';} ?>">
<input type="file" name="pictures" accept="image/*" required id="uploadImage"/>

If the status is true everything is working perfectly and if the status is false the image upload section is hiding but I could not able to submit (submit button is not working ) but when I try to comment file submit button is working

<input type=<!--"file" --> name="pictures" accept="image/*" required id="uploadImage"/>

Then I try to change type = file by writing a small php script

<input type="<?php if($config[imageUpload][Status]){echo 'file';}else{echo '<!-- file -->';}?>" name="pictures" accept="image/*" required id="uploadImage"/>

but this is not working. I would like to know why type = file is preventing me to submit? and Is there any other way to prevent this issue?

Answer 1

Your file input is required .

If you hide it with CSS, then it is still going to be required, the user just can't see it (but Chrome will, IIRC, warn you about this on the Developer Tools Console).

You need to remove the required attribute when you hide it.

but when I try to comment file submit button is working

Your comment syntax doesn't do what you want it to do.

First, you have an input element with an invalid type attribute:

 <input type=<!--"file" --> 

Then you have the rest as plain text which would be displayed to the user if you weren't hiding it with CSS.

 name="pictures" accept="image/*" required id="uploadImage"/> 

See how it renders:

 <input type=<!--"file" --> name="pictures" accept="image/*" required id="uploadImage"/> 

It appears to fix your immediate problem because the input element no longer has a required attribute (because that is part of the plain text.

Answer 2

You just need to change condition on file input :

<input type="<?php if($config[imageUpload][Status]){echo 'file';}else{echo '<!-- file -->';}?>" name="pictures" accept="image/*" <?php if($config[imageUpload][Status]){ echo 'required' ;}?> id="uploadImage"/>

And it works!!!