[FIXED] Building a web application that can work with local files

Issue

I'd like to build an application (local, not online) by using front-end web technology for the UI, the application simply displays PDFs and has a few text fields for the user to fill in with regards to the current PDF they're viewing, the user can then export their notes and a file path to the document in CSV file format.

comment about file, some more notes, C:\somefolder\doc1.pdf

comment about file, some more notes, C:\somefolder\doc2.pdf

My first issue, JavaScript can't access the local file system, so I used a file upload form which worked except the filepaths were shown as blob filepaths and not the actual system file path. Other than that my "application" worked as intended.

I went and learned Flask in hopes of using python for the back end, which works great except when I pass in the file path to the pdf C:\SomeFolder\doc1.pdf inside the 'src' attribute for an Chrome says it can't access local files. SO I'm back to sqaure one!

How can I go about building this application with local file access?

Solution

If you need to access the local files, you can create an endpoint in flask that launches a file dialog GUI. This only works because you application is hosted locally. You can use either tkinter or the native windows API using win32ui.

Assuming you are using the standard Flask format:

from app import app

@app.route('/file_select', methods=['GET', 'POST'])
def file_select():
    from tkinter import Tk
    from tkinter.filedialog import askopenfilename
    root = Tk()
    root.withdraw()
    # ensure the file dialog pops to the top window
    root.wm_attributes('-topmost', 1)
    fname = askopenfilename(parent=root)
    return jsonify({'filepath': fname})

or using the win32ui API

@app.route('/file_select', methods=['GET', 'POST'])
def file_select():
    import win32ui
    winobj = win32ui.CreateFileDialog(1, ".pdf", "", 0, 
        "PDF Files (*.pdf)|*.pdf|All Files (*.*)|*.*|")
    winobj.DoModal()
    return jsonify({'filepath': winobj.GetPathName()})

Now just add a button that points to the /file_select route and you will open a file dialog via the python local server and return the selected file.

Answered By - James