We Keep Coding

Allow user to select a folder

For a custom WordPress plugin, I'm trying to allow my users to select a folder and use it as the file download path.
Example: If the user selects the folder "C://Users/Kahiego/Desktop/img", may it be empty or not, when they'll try to download files from the plugin, everything will get downloaded in there.
So far all I can achieve right now is allowing to select a folder:
<form action="" method="post" enctype="multipart/form-data">
<input type="file" id="ctrl" webkitdirectory directory multiple/>
<input type="submit" value="Upload Image">
</form>
(but it will only count as a multiple file select). I checked on various posts already but none can tell me how to achieve this (with some saying they don't see how this could be useful).
Any idea?
Thanks in advance.
Edit:
What I mean by this: I want the admin to be able to pick a folder. I just want to retrieve the path, and use it somewhere else; not necessarily right afterward.
After retrieving the uploaded file, I currently use:
move_uploaded_file($_FILES["file"]["tmp_name"], "../../../img/" . $_FILES["file"]["name"]);
to store the files. I just wanted to allow to store the path in a variable through an input and use it afterwards in this case.
I'm not talking about browsing user's folders, but allowing the server to pick the location where files are downloaded, on the server itself, without writing the path, just by letting the admin selecting it by browsing files.
The flagged duplicated post does not answer or not totally answer what I'm looking for, since it's either selecting a folder - with every files in there - or not allowing to select a folder which is empty. Would be perfect to reproduce the functionality of those "select a directory" functions when you first install a software.
I hope I clarified enough, I'm really bad at explaining things.

Javascript input type=file is there any way to define target directory?

[EDIT] I'm working on a web UI with the following attributes:
The web server runs locally on the user's machine
The location of the csv files in question are static, and never change
The UI uses javascript to communicate with a Java REST controller, which then handles the heavy lifting for the file reading/editing/writing
In the UI itself the user selects a csv file, then that file gets loaded into the UI for viewing, editing, etc. I wanted to pass the path to a REST controller, then have the receiving Java application read the file, etc. but it appears you can't get the path using input type file for security reasons. For my purposes though this would work just as well if I can limit the directory access since the files will always be local and always be located in the same place. Basically, the user can select csv files from one of several directories:
.../CSVType1/*.csv
.../CSVType2/*.csv
.../CSVType3/*.csv
So if the current type being edited is CSVType1 I'm trying to prevent the user from accessing the other directories in order to prevent them from trying to load the wrong type. If the path could be accessed I could do a quick check and throw up an alert if they're in the wrong directory, but limiting access would work fine too. Right now I've got it so that it only accepts csv files:
<input type="file" accept=".csv" ng-model="CsvFileInfo.selectedFilename" id="csvFile" style="display:none" />
But is there a way to say 'only accept csv files within this directory and its subdirectories'?

An image in the HTML img tag is to be set as the value of file input of HTML while clicking the img tag

<img class='preview' src='preview.png'>
This is an input for image upload:
<input type='file' class='img-upload' accept='image/*'>
When I clicked on the preview image(<img class='preview' src='preview.png'>), I have to change the value of the file input (<input type='file' class='img-upload' accept='image/*'>). The value of the file input should be the preview image.

Short answer: you cannot.
Long answer: The problem is that the file inputs are very sandbox'ed and will not allow user scripts to change their value. The goal is to make sure the user needs to click and acknowledge that he is sending a file from his computer.
Now, the user cannot send the image he clicked on mostly because it is not on his computer (well, technically yes, but even then he would need to know where it is stored and choose it by manually going over the folder). Another thing is, why would you want him to send over a file that you have served him? You could simply get the name of the file or an ID of any sort and use that internally.
Let's take the example of an user avatar. The user gets the possibility to pick between 10 different "preset" pictures, or to upload his own. What you'd do is have 2 form fields, one for the uploaded picture and one for the chosen preset. On server side you would see if the user uploaded a picture, and use that one. If not, use the picture he chose from your server.
I hope I got your question right...
EDIT: If you really, really, really needed to upload the displayed picture, you could get the image data (with ajax I guess), store it into a Blob and send it for upload.
But that has some serious drawbacks. And I think you'll be limited by crossdomain policies so basically you'll only be able to access files that your server can access directly...
Even if you got all that covered, it would be a painfully slow process for the user while all that is required is just sending the name of the picture and the server does the rest.

input type="file" can only be set by the user. Not by a script (not HTML, nor javascript, ...).
Every exe on a windows pc has the capacity to access your files. Including renaming, deleting, encrypting, ... them. For example that's what Wannacry (randsomware) does.
(similar for Mac and Linux, I guess)
A webbrowser is an executable, thus has all those capacities. For security reasons most of these features are turned off, on purpose.
Long ago I wrote a program in C++ (or C#, not sure), with Visual Studio. VS has a webbrowser component. The purpose was to upload multiple albums of photos to a website, but the exe on my pc did have the capacity to use a script to set the input type="file".
So my program could read all subfolders, find all images, automatically upload them, and then the php server saved the albums/images.
In order to stop people like you and me from doing these kind of things, real webbrowsers disabled all these abilities.

When a file is uploaded to a website, can the website see the file path it's uploaded from?

When uploading a file, before pressing the upload button, the folder/file path is visible in the website's upload form.
.
Is the website able to record that data?
Normally a website could possibly record any data typed into a web form - is this any different?

It doesn't appear to work. I created the following fiddle https://jsfiddle.net/5samkn5a/
Basically I took an input
<input type="file" id="input"/>
And set a listener to its value
$(function(){
$("#input").change(function(){
console.log($(this).val());
})
})
Then I tried it in the latest chrome/firefox/edge
They all give a fake path as value. The only thing that's real is the file name. May be that some browsers actually expose the full path, but not the ones I tested.
It makes sense that the browser is shielding this information since at least on windows when you are choosing a document it will most likely reside in your current user directory. So the path will contain your local user name and that's not something you want to give to a random website, right?

Read all files in a local folder offline without using ActiveXObject or php

I'm a beginner! I need to read data inside txt files in a local folder offline. I know the folder path, but I don't know the name of every single file.
C:\mypath\first.txt
C:\mypath\second.txt
C:\mypath\third.txt
...
To read a sigle file now I use:
$.ajax({url:"C:\mypath\first.txt",
success:function(result){
//...code for storing the data in a variable...
}
});
How can i read multiple file at once without know their name? something like:
$.ajax({url:"C:\mypath\*.txt",
success:function(result){
//...code for storing the data in a variable...
}
});
Thank you for any help!

You can use a file picker control (ie, <input type="file" multiple />) in a supported browser and have the user select the set of files to iterate. User input is the only way to get the list of files - you can't just go mucking about in a user's file system over the internet. All you can learn about the user's system is what the user tells you (eg, through <input type="file" multiple />).
And even then, you won't be able to read the file with a simple Ajax request. Same origin policies apply to local files. It may work if you test it on your own machine, but as soon as it hits the web, it will fail.
The only way to look through a client file system without user interaction is by using a Scripting.FileSystemObject ActiveXControl on windows in a non-internet based HTML Application (.hta file). So, since you don't want to use ActiveXControls, user input is your only option.
Edit: If you are creating a FireFox add-on, you can access the file system. See the documentation at mozilla.org for details.