Unable To Get Full Path Of File Dropped In Browser Due To Security Reasons. What To Do?

I'm developing a web-application with Django, which should manage and process a huge amount of user' files in local intranet. As the Django app and user files will host in the same

Solution 1:

I have encountered same problem while working on this.

When I think on your options

1- There is no need to re-write whole app

• Create an api endpoint on server side
• Create a script(program) on client that will push real paths to server

  Your files should be accessible over network

Here is the script code that I used: Tested with python Python 3.7.4 Prints realpath of all the selected files as a list. source

import tkinter as tk
from tkinter import filedialog
import pathlib

root = tk.Tk()
root.withdraw()

root.attributes("-topmost", True)
file_path = filedialog.askopenfilenames()
# print(file_path) #debug
files = list(file_path)
print(files)

Then you need to import either a requests and generate a Json request to your server endpoint.Or just call a curl with subprocess.

2- By your definition I assume the intranet network is trusted.So is authentication necessary.And there is a question of How many users will use same file after it is processed in server.If its one then there is no need for a django app.

Solution 2:

Well... I've solved my problem. With much less blood than expected, which I'm happy of. :)

First, I installed Electron and one of minimal boilerplates into a new folder in my project.

In boilerplate there is a file called main.js (or index.js, depends on boilerplate), which defines Electron application window and its contents. Inside is the line which loads content to Electron BrowserWindow object:

mainWindow.loadFile(path.join(__dirname, 'index.html'));

Fortunately, BrowserWindow object does have method loadURL, which can be used to load webpage instead of local html file:

mainWindow.loadURL('http://127.0.0.1:8000');

It means that all pages rendered by Django will be shown in Electron browser, which runs node.js instead of standard browser javascript engine. Thus, this code in Django page template will work perfectly:

<h1id="holder">DROP FILES HERE</h1><pid="dropped"></p><script>const dropZone = document.getElementById('holder');

    dropZone.addEventListener('drop', (e) => {
      e.preventDefault();
      e.stopPropagation();
      let filesList = '\n';
      for (const f of e.dataTransfer.files) filesList += f.path + '\n';
      document.getElementById('dropped').innerHTML = `Full file paths: ${filesList}`;
    });

    dropZone.addEventListener('dragover', (e) => {
      e.preventDefault();
      e.stopPropagation();
    });
</script>