Nodejs Express upload files from local Directory

Question

So this is my HTML form to upload files ,

                <form action="/upload" method="post" enctype="multipart/form-data">
                    <div class="file-field input-field">
                        <div class="btn">
                            <span>File</span>
                            <input type="file" required name="file_upload">
                        </div>
                        <div class="file-path-wrapper">
                            <input class="file-path validate" type="text">
                        </div>
                    </div>
                    <button style="display: block; margin: 0 auto" class="btn waves-effect waves-light"
                        type="submit">UPLOAD</button>
                </form>

The upload works with my current Express method. But I want to get list of files from my local directory (like in a dropdown list) instead choosing file manually. Here is how i can get file list

const testFolder = 'downloads/';
const fs = require('fs');
router.get('/upload', function (req, res) {
   var files= fs.readdirSync(testFolder)
   console.log(files);  
    res.render('upload.html', { 'title': 'Download Page' })
})  

Answer 1

As I assume you already know, the server-side code you currently show offers a list of files on the server, not on the end user's computer.

Your server cannot access the end-user's file system so you can't build a list of files into the HTML sent from the server-side. So, that means any access to the user's file system will have to come from the features in the browser.

Note: When you're testing you may be running a browser and server on the same computer so you may get slightly confused about what the server can and can't see. The normal deployment case is that the server is running on one location (in a data center somewhere) and the end-user's computer is far way on a different network behind some firewall and the server has no access at all to the end-user's computer or file system.

The browser user interface has a limited set of features for listing files on the local computer. This is for security reasons as some random web page you go to should NOT have the ability to see your local file system as there are all sorts of ways to abuse that information.

As such, a web page has no ability to list files and insert them in your own UI (to make your own file picker). In fact, the web page and the Javascript in the web page are given NO access to the local file system except through the built-in file picker. This assures that the only files that are ever exposed to the web page are files that the end-user themselves specifically picked from a known safe and non-customizable user interface offered by the browser. This is all done for security reasons.

Any further access than this would require a browser plug-in with enhanced privileges that is downloaded and installed by the user into their browser.