How to use html and javascript to choose a file and and run it in command line with python3 commands at the click of a button

Question

So I have been trying to upload a .xlsx file to a html file (Website) and then re-format the .xlsx file to turn it into a database and then finally be able to search through the database.

I have 3 scripting files for this, validation.py, reader.py and server.py. they coexist to run a search database web app.

I use Terminal commands to run them, and I want to automate this process so that I may:

1. choose a file and run it with validation (python3 validation.py -i (chosen file))

2. read the file (python3 reader.py -i (chosen file) -o (category of file (i.e. chosen file is phone numbers so category would be numbers))

3. run (server.py -m (category of file_model))

This opens up a localhost://8080 file. I want to automate the validation, reader, and server commands, so that I may choose a file and then have the commands occur at the click of a button, and open up my localhost.

What might be a good way to do this?

Answer 1

It sounds like you are trying to make an HTML and JavaScript app that achieves two objectives.

1. Display a file picker
2. Run a set of Python commands

I would recommend you use Electron for this. It allows you to create HTML and JavaScript apps that can interact with terminal commands like Python.

Make sure to get Node.js installed first to use Electron.

To start you will need the Electron Quick Start. I have linked it on GitHub and you can get it like this.

# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install

Within the folder you will find the familiar index.html file. To add a file picker to your app use the below HTML. You can read more about it on the MDN docs.

<input type="file" id="myFilePicker">

In order to have your Python commands run when a file is picked, you can make use of the preload.js file included with the Quick Start. This JavaScript can interact with your HTML and also your computer. Replace it's contents with the below code.

window.addEventListener('DOMContentLoaded', () => {
  document.getElementById('myFilePicker').addEventListener('change', function(event) {

    let filePath = this.files[0].path

    const spawn = require("child_process").spawn;
    const pythonProcess = spawn('python',["path/to/script.py", filePath]);

    pythonProcess.stdout.on('data', (data) => {
      // You have data from Python
    });

  })
})

This JavaScript does the following:

• Waits for the HTML to load
• Listens for the file picker to change
• Gets the path to the file that was chosen
• Runs a python script, passing the file path as a parameter.

The Python script code was used from this answer. Within the arrow function that says You have data from Python, you are free to repeat the Python script code. You can then run your second and third scripts.

You can then run npm start in the terminal to launch your new Electron app.