How to open a file browse dialog using javascript

Question

Is there any way to open the browse for files dialog box when a  lt a href gt  link is clicked using javascript  It should function like a normal browse for files button and give the names list of files selected in response

User · Answer

Here s is a way of doing it without any Javascript and it s also compatible with any browser     EDIT  In Safari  the input gets disabled when hidden with display  none  A better approach would be to use position  fixed  top  -100em      lt label gt    Open file dialog    lt input type  file  style  position  fixed  top  -100em  gt   lt  label gt      Also  if you prefer you can go the  correct way  by using for in the label pointing to the id of the input like this    lt label for  inputId  gt file dialog lt  label gt   lt input id  inputId  type  file  style  position  fixed  top  -100em  gt

User · Answer

Create input element  Missing from these answers is how to get a file dialog without a input element on the page  The function to show the input file dialog  function openFileDialog  accept  callback        this function must be called from  a user                                                  activation event  ie an onclick event              Create an input element     var inputElement   document createElement  quot input quot            Set its type to file     inputElement type    quot file quot           Set accept to the file types you want the user to select          Include both the file extension and the mime type     inputElement accept   accept          set onchange event to call callback when user has selected file     inputElement addEventListener  quot change quot   callback              dispatch a click event to open the file dialog     inputElement dispatchEvent new MouseEvent  quot click quot          NOTE the function must be part of a user activation such as a click event  Attempting to open the file dialog without user activation will fail  NOTE input accept is not used in Edge  Example  Calling above function when user clicks an anchor element   x000D   x000D     wait for window to load window addEventListener  load   windowLoad       open a dialog function function openFileDialog  accept  multy   false  callback         var inputElement   document createElement  input        inputElement type    file       inputElement accept   accept     Note Edge does not support this attribute     if  multy            inputElement multiple   multy            if  typeof callback      function              inputElement addEventListener  change   callback             inputElement dispatchEvent new MouseEvent  click            onload event function windowLoad             add user click event to userbutton     userButton addEventListener  click   openDialogClick         userButton click event function openDialogClick             open file dialog for text files     openFileDialog   txt text plain   true  fileDialogChanged         file dialog onchange event handler function fileDialogChanged  event            this files  forEach file   gt            var div   document createElement  div            div className    fileList common           div textContent   file name          userSelectedFiles appendChild div             x000D   common       font-family  sans-serif      padding  2px      margin   2px      border-radius  4px      fileList       background   229      color  white     userButton       background   999      color   000      width  8em      text-align  center      cursor  pointer      userButton hover      background    4A4     color   white    x000D   lt a id    userButton  class    common  title    Click to open file selection dialog  gt Open file dialog lt  a gt   lt div id    userSelectedFiles  class    common  gt  lt  div gt  x000D   x000D   x000D   Warning the above snippet is written in ES6

User · Answer

I know this is an old post  but another simple option is using the INPUT TYPE  FILE  tag according to compatibility most major browser support this feature

User · Answer

Here is a non-jQuery solution  Note you can t just use  click   as some browsers do not support it    lt script type  text javascript  gt  function performClick elemId       var elem   document getElementById elemId      if elem  amp  amp  document createEvent          var evt   document createEvent  MouseEvents          evt initEvent  click   true  false         elem dispatchEvent evt           lt  script gt   lt a href     onclick  performClick  theFile     gt Open file dialog lt  a gt   lt input type  file  id  theFile    gt

User · Answer

Use this    lt script gt    function openFileOption       document getElementById  file1   click       lt  script gt        lt input type  file  id  file1  style  display none  gt        lt a href     onclick  openFileOption   return   gt open File Dialog lt  a gt

User · Answer

I worked it around through this  hiding  div       lt div STYLE  position absolute display none   gt  lt INPUT type  file  id  file1  name  files    gt  lt  div gt

User · Answer

How about make clicking the a tag  to click on the file button   There is more browser support for this  but I use ES6  so if you really want to make it work in older and any browser  try to transpile it using babel  or just simply use ES5    x000D   x000D  const aTag   document getElementById  open-file-uploader    x000D  const fileInput   document getElementById  input-button    x000D  aTag addEventListener  click        gt  fileInput click     x000D   input-button   x000D    position  abosulte  x000D    width  1px  x000D    height  1px  x000D    clip  rect 1px 1px 1px 1px   x000D    clip  rect 1px  1px  1px  1px   x000D    x000D   lt a href     id  open-file-uploader  gt Open file uploader lt  a gt  x000D   lt input type  file  id  input-button    gt  x000D   x000D   x000D

User · Answer

Unfortunately  there isn t a good way to browse for files with a JavaScript API   Fortunately  it s easy to create a file input in JavaScript  bind an event handler to its change event  and simulate a user clicking on it   We can do this without modifications to the page itself       lt input type  file  multiple gt    on  change   function        console log this files      click      this files on the second line is an array that contains filename  timestamps  size  and type

User · Answer

you can t use input click   directly  but you can call this in other element click event   html   lt input type  file  gt   lt button gt Select file lt  button gt    js  var botton   document querySelector  button    var input   document querySelector  input    botton addEventListener  click   function  e        input click          this tell you Using hidden file input elements using the click   method

[javascript] How to open a file / browse dialog using javascript?

Examples related to javascript

Examples related to jquery