Open File Dialog Box in JavaScript

Open file dialog box in JavaScript

Here is a nice one

Fine Uploader demo

It is an <input type='file' /> 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.

How to open select file dialog via js?

Using jQuery

I would create a button and an invisible input like so:

<button id="button">Open</button>
<input id="file-input" type="file" name="name" style="display: none;" />

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):

<button onclick="document.getElementById('file-input').click();">Open</button>
<input id="file-input" type="file" name="name" style="display: none;" />

Open File Dialog box on a tag

You can only open a "Open File" dialog using a input type=file tag. However the efect you are looking for can be accomplished like this :

<input type="file" id="upload" name="upload" style="visibility: hidden; width: 1px; height: 1px" multiple />
<a href="" onclick="document.getElementById('upload').click(); return false">Upload</a>

open the file upload dialogue box onclick the image

Include input type="file" element on your HTML page and on the click event of your button trigger the click event of input type file element using trigger function of jQuery

The code will look like:

<input type="file" id="imgupload" style="display:none"/> 
<button id="OpenImgUpload">Image Upload</button>

And on the button's click event write the jQuery code like :

$('#OpenImgUpload').click(function(){ $('#imgupload').trigger('click'); });

This will open File Upload Dialog box on your button click event..

How to open a file / browse dialog using javascript?

Here is a non-jQuery solution. Note you can't just use .click() as some browsers do not support it.

<script type="text/javascript">
function performClick(elemId) {
   var elem = document.getElementById(elemId);
   if(elem && document.createEvent) {
      var evt = document.createEvent("MouseEvents");
      evt.initEvent("click", true, false);
      elem.dispatchEvent(evt);
   }
}
</script>
<a href="#" onclick="performClick('theFile');">Open file dialog</a>
<input type="file" id="theFile" />

How to open files dialogue box to choose download destination in eel?

Selecting a custom download location using pure JavaScript can be a pain because browser implementations severely limit the information (and access) they give you about the user's filesystem for security reasons. A web search for something like "HTML set custom download location" will bring up relevant results.

The good news here is that you can delegate that work Python, which will more easily allow you to select a download location (since Python is running outside of the browser's context). Since you already need to expose a Python function in order to get your Python code to run, just put the dialog box in that context... something like:

import tkinter
import eel

from pytube import YouTube
from tkinter import filedialog

root = tkinter.Tk()
root.withdraw() # hide this root window

eel.init("web")

@eel.expose
def download(link):
    download_location = filedialog.asksaveasfile() # this will open the Save As dialog
    video = YouTube(link)
    stream = video.streams.get_highest_resolution()
    stream.download(download_location.name)

eel.start("index5.html")

There are some non-standard/trick alternative options that may be supported on your target browser, so check out webkitdirectory, File_and_Directory_Entries_API, FileSaver.js, and Using HTML5/JavaScript to generate and save a file for more information about those if you want to stick with JavaScript.

How to read a txt from an Open File dialog and load the content in a textarea with javascript (jquery)?

I used HTML 5 File API. And locally it works perfectly.

+1 for Trusktr.

Ref: http://www.html5rocks.com/en/tutorials/file/dndfiles/ (Slicing a File.)

click on input box to show open file dialog but not click on choose file button

You can overlay a transparent <input type="file"/> over a styled button or other element.

<input type="file" style="opacity:0;"/>

See this JSFiddle for a working demo.

---

Related Topics