CODEWITHSUNDEEP
javascriptphpjquery
Dump
Dump

Reputation: 259

How to create input type file which is not showing if JS is disabled?

I have upload system which works fine with JS, but I want to create some way how to handle it if JS is disabled. Then I want to show default <input type="file">. Normally I replace it by button "Add photos".

Is it possible?

My code is here, but if I use JQuery to hide classis <input type="file"> then it is showed some miliseconds and just then disapear. I need to disapper it before page is loaded.

HTML:

<button class="add-item__add-photo-btn">Add photos</button>
<input type="file" id="input-files" name="files[]" multiple accept="image/jpeg,image/jpg,image/gif,image/png">

JQuery:

$('#input-files').css({display: 'none'});

Thank you for advices.

Upvotes: 0

Views: 50

Answers (1)

stillKonfuzed
stillKonfuzed

Reputation: 412

Use css to hide the input type file on load, and when page is loaded the run the document ready function to show the input type field.

CSS - make it hidden

#input-files{
 display:none 
}
#your-js-disabled-input{
 display:block;
}

JS -- if js is enabled, this code will run and show your input field and hide the non-js input field.

$(document).ready(()=>{ //page load
  $('#input-files').css({display: 'block'}); //show js supported input
  $('#your-js-disabled-input').hide(); //hide your non-js backup input
  //or
  $('#input-files').show(500);
  $('#your-js-disabled-input').hide();
})

Edit 2 - requirement change CSS

#input-files{
 display:block;
}

JS

$(document).ready(()=>{ //page load
  $('#input-files').css({display: 'none'}); //show js supported input
})

Upvotes: 1

Related Questions