Programmatically trigger select file dialog box

Question

I have a hidden file input element  Is it possible to trigger its select file dialog box from a button s click event

User · Answer

The best solution  works in all browsers   even on mobile    lt div class  btn  id  s photo  gt Upload lt  div gt    lt input type  file  name  s file  id  s file  style  opacity  0   gt      lt  --jquery-- gt    lt script gt          s photo   click function                 s file   trigger  click             lt  script gt    Hiding the input file type causes problems with browsers  opacity is the best solution because it isn t hiding  just not showing

User · Answer

If you re looking to have your own button to upload a file instead of using  lt input type  file    gt   you can do something like    lt input id  myInput  type  file  style  visibility hidden    gt   lt input type  button  value  Show Dialog  onclick      myInput   click       gt    Note that I used visibility  hidden  instead of display  none  You cannot call the click event on a non-displayed file input

User · Answer

Using jQuery you can call click   to simulate a click

User · Answer

Natively the only way is by creating an  lt input type  file  gt  element and then simulating a click  unfortunately   There s a tiny plugin  shameless plug  which will take the pain away of having to do this all the time  file-dialog   fileDialog        then file   gt            const data   new FormData           data append  file   file 0           data append  imageName    flower               Post to server         fetch   uploadImage                 method   POST               body  data

User · Answer

I wrap the input type file  in a label tag  then style the label to your liking  and hide the input    lt label class  btn btn-default fileLabel  data-toggle  tooltip  data-placement  top  title  Upload  gt       lt input type  file  gt       lt span gt  lt i class  fa fa-upload  gt  lt  i gt  lt  span gt   lt  label gt    lt style gt       fileLabel input type  file             position  fixed          top  -1000px         lt  style gt    Purely CSS Solution

User · Answer

Most answers here are lacking a useful information   Yes  you can programmatically click the input element using jQuery JavaScript  but only if you do it in an event handler belonging to an event THAT WAS STARTED BY THE USER   So  for example  nothing will happen if you  the script  programmatically click the button in an ajax callback  but if you put the same line of code in an event handler that was raised by the user  it will work   P S  The debugger  keyword disrupts the browse window if it is before the programmatical click    at least in chrome 33

User · Answer

There is no cross browser way of doing it  for security reasons  What people usually do is overlay the input file over something else and set it s visibility to hidden so it gets triggered on it s own  More info here

User · Answer

This worked for me       fileInput   val

User · Answer

For those who want the same but are using React  openFileInput        gt        this fileInput click          lt a href     onClick  this openFileInput  gt       lt p gt Carregue sua foto de perfil lt  p gt       lt img src  img    gt   lt  a gt   lt input style   display  none    ref   input    gt    this fileInput   input     type  file   gt

User · Answer

Make sure you are using binding to get component props in REACT  class FileUploader extends Component     constructor  props        super props       this handleClick   this handleClick bind this          onChange  e props   gt       const files   e target files      const selectedFile   files 0       ProcessFileUpload selectedFile props ProgressCallBack props ErrorCallBack props CompleatedCallBack props BaseURL props Location props FilesAllowed          handleClick        gt        this refs fileUploader click          render         return         lt div gt           lt button type  button  onClick  this handleClick  gt Select File lt  button gt             lt input type  file  onChange   e   gt this onChange e this props   ref  fileUploader  style   display  none      gt         lt  div gt

User · Answer

Just for the record  there is an alternative solution that does not require javascript  It is a bit of a hack  exploiting the fact that clicking on a label sets the focus on the associated input   You need a  lt label gt  with a proper for attribute  points to the input   optionnaly styled like a button  with bootstrap  use btn btn-default   When the user clicks the label  the dialog opens  example     x000D   x000D   lt  -- optionnal  to add a bit of style -- gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 4 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt  -- minimal setup -- gt  x000D   lt label for  exampleInput  class  btn btn-default  gt  x000D    Click me x000D   lt  label gt  x000D   lt input type  file  id  exampleInput  style  display  none    gt  x000D   x000D   x000D

User · Answer

I m not sure how browsers handle clicks on type  file  elements  security concerns and all   but this should work      input type  file     click      I ve tested this JSFiddle in Chrome  Firefox and Opera and they all show the file browse dialog

User · Answer

lt div id  quot uploadButton quot  gt UPLOAD lt  div gt   lt form action  quot  FILE HANDLER URL  quot  style  quot display none quot  gt        lt input id  quot myInput quot  type  quot file quot    gt   lt  form gt   lt script gt    const uploadButton   document getElementById  uploadButton      const myInput   document getElementById  myInput       uploadButton addEventListener  click        gt        myInput click           lt  script gt

[javascript] Programmatically trigger "select file" dialog box

Examples related to javascript

Examples related to jquery

Examples related to html