How to open select file dialog via js

Question

id   click     It doesn t work on Chrome 26 on Mac OS  The problem actually is creation  quot upload quot  widget that can be integrated in a form  Widget will consists of two parts  The first part is div with initiator button and error success messages  I think the way is put another form as the second part with file input and submit file into the iframe  After submition we fill hidden field in first part in main form or show errors in the same  Easy way is adding file-form into main-form  but it s prohibited

User · Answer

For the sake of completeness  Ron van der Heijden s solution in pure JavaScript    lt button onclick  document querySelector   inputFile   click     gt Select File     lt  button gt   lt input class  inputFile  type  file  style  display  none   gt

User · Answer

Using jQuery I would create a button and an invisible input like so   lt button id  quot button quot  gt Open lt  button gt   lt input id  quot file-input quot  type  quot file quot  name  quot name quot  style  quot display  none  quot    gt   and add some jQuery to trigger it      button   on  click   function             file-input   trigger  click         Using Vanilla JS Same idea  without jQuery  credits to  Pascale    lt button onclick  quot document getElementById  file-input   click    quot  gt Open lt  button gt   lt input id  quot file-input quot  type  quot file quot  name  quot name quot  style  quot display  none  quot    gt

User · Answer

In HTML only    lt label gt     lt input type  file  name  input-name  style  display  none     gt     lt span gt Select file lt  span gt   lt  label gt    Edit  I hadn t tested this in Blink  it actually doesn t work with a  lt button gt   but it should work with most other elements   at least in recent browsers   Check this fiddle with the code above

User · Answer

To expand on the answer from  levi  and to show how to get the response from the upload so you can process the file upload   selectFile event        event preventDefault         file input   document createElement  input        file input addEventListener  change   uploadFile  false       file input type    file       file input click        uploadFile         let dataArray   new FormData        dataArray append  file   file input files 0            Obviously  you can substitute with JQuery or whatever     axios post   your super special url   dataArray  then function

User · Answer

READY TO USE FUNCTION  using Promise          Select file s       param  String  contentType The content type of files you wish to select  For instance  image    to select all kinds of images      param  Boolean  multiple Indicates if the user can select multiples file      returns  Promise lt File File   gt   A promise of a file or array of files in case the multiple parameter is true      function  contentType  multiple       return new Promise resolve   gt            let input   document createElement  input            input type    file           input multiple   multiple          input accept   contentType           input onchange       gt                let files   Array from input files               if  multiple                  resolve files               else                 resolve files 0                        input click                TEST IT   x000D   x000D     Content wrapper element x000D  let contentElement   document getElementById  content    x000D   x000D     Button callback x000D  async function onButtonClicked    x000D      let files   await selectFile  image     true   x000D      contentElement innerHTML   files map file   gt    lt img src    URL createObjectURL file    style  width  100px  height  100px   gt    join      x000D    x000D   x000D     ---- function definition ---- x000D  function selectFile  contentType  multiple   x000D      return new Promise resolve   gt    x000D          let input   document createElement  input    x000D          input type    file   x000D          input multiple   multiple  x000D          input accept   contentType  x000D   x000D          input onchange       gt    x000D              let files   Array from input files   x000D              if  multiple  x000D                  resolve files   x000D              else x000D                  resolve files 0    x000D             x000D   x000D          input click    x000D          x000D    x000D   lt button onclick  onButtonClicked    gt Select images lt  button gt  x000D   lt div id  content  gt  lt  div gt  x000D   x000D   x000D

User · Answer

With jquery library   lt button onclick      inputFile   click     gt Select File     lt  button gt   lt input class  inputFile  type  file  style  display  none   gt

User · Answer

JS only - no need for jquery  Simply create an input element and trigger the click   var input   document createElement  input    input type    file   input click      This is the most basic  pop a select-a-file dialog  but its no use for anything without handling the selected file     Handling the files  Adding an onchange event to the newly created input would allow us to do stuff once the user has selected the file   var input   document createElement  input    input type    file    input onchange   e   gt        var file   e target files 0       input click      At the moment we have the file variable storing various information    file name    the file s name including extension file size    the size in bytes file type    file type ex   application pdf    Great   But  what if we need the content of the file   In order to get to the actual content of the file  for various reasons  place an image  load into canvas  create a window with Base64 data url  etc  we would need to use the FileReader API  We would create an instance of the FileReader  and load our user selected file reference to it   var input   document createElement  input    input type    file    input onchange   e   gt            getting a hold of the file reference    var file   e target files 0           setting up the reader    var reader   new FileReader       reader readAsText file  UTF-8           here we tell the reader what to do when it s done reading       reader onload   readerEvent   gt          var content   readerEvent target result     this is the content        console log  content             input click      Trying pasting the above code into your devtool s console window  it should produce a select-a-file dialog  after selecting the file  the console should now print the contents of the file   Example -  Stackoverflow s new background image    Let s try to create a file select dialog to change stackoverflows background image to something more spicy     var input   document createElement  input    input type    file    input onchange   e   gt            getting a hold of the file reference    var file   e target files 0           setting up the reader    var reader   new FileReader       reader readAsDataURL file      this is reading as data url        here we tell the reader what to do when it s done reading       reader onload   readerEvent   gt          var content   readerEvent target result     this is the content        document querySelector   content   style backgroundImage    url    content                input click      open devtools  and paste the above code into console window  this should pop a select-a-file dialog  upon selecting an image  stackoverflows content box background should change to the image selected   Cheers

User · Answer

x000D   x000D  function promptFile contentType  multiple      var input   document createElement  input      input type    file     input multiple   multiple    input accept   contentType    return new Promise function resolve        document activeElement onfocus   function           document activeElement onfocus   null        setTimeout resolve  500              input onchange   function           var files   Array from input files         if  multiple          return resolve files         resolve files 0               input click            function promptFilename       promptFile   then function file        document querySelector  span   innerText   file  amp  amp  file name     no file selected           x000D   lt button onclick  promptFilename    gt Open lt  button gt   lt span gt  lt  span gt  x000D   x000D   x000D

User · Answer

First Declare a variable to store filenames  to use them later    var myfiles         Open File Dialog      browseBtn   click function             lt input type  file  multiple gt    on  change   function              myfiles   this files    save selected files to the array         console log myfiles     show them on console        click          i m posting it  so it may help someone because there are no clear instructions on the internet to how to store filenames into an array

[javascript] How to open select file dialog via js?

Examples related to javascript

Examples related to jquery

Examples related to html