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

Question

I know that in tkinter it is possible to open file dialogue box, but is there any way to do it in eel using python or even in javascript so that the download location can be obtained instead of hard coding to change the directory each time.

I used PyTube library of python,

from pytube import YouTube
link = input(" Enter YouTube video URL: ")
video = YouTube(link)
stream = video.streams.get_highest_resolution()
stream.download('local path')

And i created front end using front end technologies, it has only a box to paste url and a submit button. On clicking submit button I'd want chrome to show a dialogue box to choose the download location to pass it inside stream.download('local path')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Downloader</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    
    <div class="container">
        <h1>Downloader</h1>
        <div class="line"></div>
        <form action="">
            <label for="">Enter YouTube video URL</label>
            <input type="text" class="youtubeUrl" placeholder="Paste the URL here">
            <button>Download</button>
        </form>
    </div>

</body>
</html>

Didn't give any class to the form, because it is going to be the only one in the web app.

score 1 · Accepted Answer · answered Jul 27 '21 at 02:22

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 open files dialogue box to choose download destination in eel?

1 Answers1