Open file dialog box in JavaScript

Question

I need a solution to display open file dialog in HTML while clicking a div  The open file dialog box must open when the div is clicked   I don t want to display the input file box as part of HTML page  It must be displayed in separate dialog  which is not a part of the web page

User · Answer

May use      lt input type  file    gt    click

User · Answer

AFAIK you still need an  lt input type  file  gt  element  then you can use some of the stuff from quirksmode to style it up

User · Answer

I dont t know why nobody has pointed this out but 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      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

This is what worked best for me  Tested on IE8  FF  Chrome  Safari     x000D   x000D   file-input   x000D    cursor  pointer  x000D    outline  none  x000D    position  absolute  x000D    top  0  x000D    left  0  x000D    width  0  x000D    height  0  x000D    overflow  hidden  x000D    filter  alpha opacity 0      IE  lt  9    x000D    opacity  0  x000D    x000D   input-label   x000D    cursor  pointer  x000D    position  relative  x000D    display  inline-block  x000D    x000D   lt label for  file-input  class  input-label  gt  x000D    Click Me  lt  -- Replace with whatever text or icon you wish to use -- gt  x000D     lt input type  file  id  file-input  gt  x000D   lt  label gt  x000D   x000D   x000D    Explanation  I positioned the file input directly above the element to be clicked  so any clicks would either land on it or its label  which pulls up the upload dialog just as if you clicked the label itself   I had some issues with the button part of the default input sticking out of the side of the label  so overflow  hidden on the input and display  inline-block on the label were necessary

User · Answer

The simplest way    x000D   x000D   file-input   x000D    display  none  x000D    x000D   lt label for  file-input  gt  x000D     lt div gt Click this div and select a file lt  div gt  x000D   lt  label gt  x000D   lt input type  file  id  file-input   gt  x000D   x000D   x000D    What s important  usage of display  none ensures that no place will be occupied by the hidden file input  what happens using opacity  0

User · Answer

Simple answer    1  Put input element type  quot file quot  anywhere on page and set attribute type  quot hidden quot  or style  quot display none quot   Give an id to input element  e g  id  quot myid quot   2  Chose any div  image  button or any element which you want to use to open file dialog box  set an onclick attribute to it  like this- onclick  quot document getElementById  myid   click   quot  That is all

User · Answer

The only without  lt input type  file  gt  is by embedding a transparent flash movie over the div  You can then use a user generated click event  compliant with Flash 10 new security rules  to trigger a call to flash s FileReference browse   It offers an added dependency over the quirksmode way but in return you get alot more events  such as built in progress events

User · Answer

What if javascript is Turned Off on clients machine  Use following solution for all scenarios  You dont even need javascript jQuery     HTML   lt label for  fileInput  gt  lt img src  File upload Img  gt  lt label gt   lt input type  file  id  fileInput  gt  lt  label gt    CSS   fileInput opacity 0    body      background cadetblue      Explanation   for  Your input Id    Triggers click event by default by HTML  So it by default triggers click event  no need of jQuery javascript  If its simply done by HTML why use jQuery jScript  And you cant tell if client disabled JS  Your feature should work even though JS is turned off   Working jsFiddle  You dont need JS   jquery

User · Answer

x000D   x000D          logo   css  opacity   0    x000D       x000D          select logo   click function e   x000D         e preventDefault    x000D             logo   trigger  click    x000D          x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt a href     id  select logo  gt Select Logo lt  a gt   lt input type  file  id  logo  gt  x000D   x000D   x000D    for IE add this       logo   css  filter   alpha opacity   0

User · Answer

Here is a nice one  Fine Uploader demo  It is an  lt input type  file    gt  control itself  But a div is placed over that and css styles are applied to get that feel  Opacity of the file control is set to 0 so that it appears that the dialog window is opened when clicking on the div

User · Answer

Actually  you don t need all that stuff with opacity  visibility   lt input gt  styling  etc  Just take a look    lt a href     gt Just click me  lt  a gt   lt script type  text javascript  gt         a   click function                creating input on-the-fly         var input     document createElement  input             input attr  type    file               add onchange handler if you wish to get the file            input trigger  click       opening dialog         return false     avoiding navigation          lt  script gt    Demo on jsFiddle  Tested in Chrome 30 0 and Firefox 24 0  Didn t work in Opera 12 16  however

User · Answer

First add in the head tags    lt script gt     function showDialog openFileDialog           document getElementById openFileDialog  click            function fileName openFileDialog           return document getElementById openFileDialog  value          function hasFile openFileDialog           return document getElementById openFileDialog  value                function fileNameWithoutFakePath openFileDialog           var fileName   document getElementById openFileDialog  value         return fileName substr fileName lastIndexOf         1           function fakePathWithoutFileName openFileDialog           var fileName   document getElementById openFileDialog  value         return fileName substr 0  fileName lastIndexOf               lt  script gt    if you already have script tags  just add these functions above   In your body or form tags adding    lt input type  file  style  display none  id  yourDesiredOrFavoriteNameForTheNewOpenFileDialogInstance   gt    No matter where in your html  is just like that you ve created a new instance of type OpenFileDialog class as global variable  whose name is the id of the element  no matter where in your code or xaml  but in your script or code  you can t type his name  and then read a property or call a function  because there are global functions that do those that are not defined in the element input type  file   You just have to give these functions the id of the hidden input type  file  which is the name of the OpenFileDialog instance as string   To ease your life in creating open file dialogs instances to your html  you can make a function that does it   function createAndAddNewOpenFileDialog name         document getElementById  yourBodyOrFormId   innerHtml      lt input type  file  style  display none  id      name       gt       and if you want to remove open file dialog  then you can make and use the following function   function removeOpenFileDialog name        var html   document getElementById  yourBodyOrFormId   innerHtml      html   html replace   lt input type  file  style  display none  id      name       gt             document getElementById  yourBodyOrFormId   innerHtml   html      but before you remove open file dialog  ensure that it exists by making and using the following function   function doesOpenFileDialogExist name        return document getElementById  yourBodyOrFormId   innerHtml indexOf   lt input type  file  style  display none  id      name       gt       -1     and if you don t want to create and add the open file dialogs in the body or form tags in the html  because this is adding hidden input type  file s  then you can do it in script using the create function above   function yourBodyOrFormId onload         createAndAddNewOpenFileDialog  openFileDialog1        createAndAddNewOpenFileDialog  openFileDialog2        createAndAddNewOpenFileDialog  openFileDialog3        createAndAddNewOpenFileDialog  File Upload        createAndAddNewOpenFileDialog  Image Upload        createAndAddNewOpenFileDialog  bla          etc and rest of your code     Ensure that near your body or form tags  you added   onload  yourBodyOrFormId onload      You don t have to do this line above  if you did it already   TIP  You can add to your project or website new JScript File  if you don t have yet  and in this file you can put all the open file dialog functions away from the script tags and the html or web form page  and use them in your html or web form page from this JScript file  but don t forget before to link the html or web form page to the JScript File of course  You can do it just by dragging the JScript file to your html page in the head tags  If your page is web form and not simple html  and you don t have head tags  then put it anywhere so that it can work  Don t forget to define global variable in that JScript File  whose value will be your body or form id as string  After you linked the JScript file to your html or web form page  you can onload event of your body of form  set the value of that variable to your body or form id  Then in the JScript File  you don t have to give to the document the id of the body or form of one page anymore  just give it the value of that variable  You can call that variable bodyId or formId or bodyOrFormId or any other name you want   Good luck man

[javascript] Open file dialog box in JavaScript

Examples related to javascript

Examples related to file

Examples related to dialog