How can I list the files on an FTP from a (stand-alone) .html file?

Question

I am developing a self-contained (stand-alone) HTML form. In one part of the form, I would like to make it possible to select the name of a file that is on an FTP.

In my .html file, I am therefore trying to find a way to list the names of all the files on an FTP.

Based on what I have read so far, it seems there is no conventional way to do this as accessing an FTP should be done using server-side languages such as PHP for example, as explained here or here.

So I am trying to see if I can do this in a different way. An idea I had is to copy the content displayed on an FTP page into a JavaScript variable, as shown here.

I am using as an example the FTP from the German Climate Data Center because it is an open access FTP that doesn’t require any login information. In the code below, I am trying to place the content displayed on a page of that FTP into a <div> inside my .html file, and then display the <div> using console.log. However, as shown below, I haven’t been successful so far:

function start_FTP() {
  var server = "ftp-cdc.dwd.de/test/weather/radar/sites/sweep_vol_z/mem/hdf5/filter_polarimetric/";
  var ftpsite = "ftp://" + server;
  window.open(ftpsite);

  document.getElementById("FTP_content").innerHTML = '<object type="text/html" data=ftpsite ></object>';
  console.log(FTP_content);
}

<h2> List FTP content using JavaScript </h2>
<button type="button" id="FTP_button" name="FTP_button" onclick="start_FTP()">Select File Name</button>
<div id="FTP_content"> </div>

The <div> does not contain any useful information.

This is just a step towards my final goal, which is in fact to create a new window that lists the contents on the FTP page with a checkbox next to each line, such that the user can select the name of the file he needs.

Is this possible using JavaScript? If not, are there any other “tricks” that can be used to reach this goal using JavaScript only?

EDIT

The issue I have is that I can not do anything on the server-side (unfortunately).

I need to develop a stand-alone HTML form that needs to be sent to lots of different end users, who need to be able to use this form “as is”. These end users (clients) need to be able to select the name of a file from a list of files that can be seen on an open access FTP.

So I am trying to copy the names of the files that are visible on an open access FTP page, and add a check box in front of each file name, such that the end user can select the check box that corresponds to the name of the file (that will be used for further data-processing).

Answer 1

Do you Mean something like this? It requires Jquery.

Javascript,css and then the HTML.

function handleFileSelect (e) {
    var files = e.target.files;
    if (files.length < 1) {
        alert('select a file...');
        return;
    }
    var file = files[0];
    var reader = new FileReader();
    reader.onload = onFileLoaded;
    reader.readAsDataURL(file);
}

function onFileLoaded (e) {
    var match = /^data:(.*);base64,(.*)$/.exec(e.target.result);
    if (match == null) {
        throw 'Could not parse result'; // should not happen
    }
    var mimeType = match[1];
    var content = match[2];
    alert(mimeType);
    alert(content);
}

$(function () {
    $('#import-pfx-button').click(function(e) {
        $('#file-input').click();
    });
    $('#file-input').change(handleFileSelect);
});

#file-input {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="import-pfx-button">Browse...</button>
<input type="file" id="file-input" />
<output id="list"></output>