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.
Related
When a user selects a directory from which to upload all documents, it might contain hidden files created by windows like thumbs.db
Is there any way of detecting, either on the front end or back end, whether a particular file was hidden?
Currently handling files uploads with bootstrap-vue and typescript
<b-form-file id="documentFolder"
accept="allowedFileTypes"
style="display:none;"
#change="handleFolderSelected"
:directory="true" />
handleFolderSelected(files: Array<File>) {
// build form data - post files
}
I assume its just using a regular file input, but can't see anything useful there either
I'm recieving the files as IFormFiles using .net-5.0
Is this possible at all, or do I need to simply inform the user that they should remove all hidden files?
I'm trying to prompt the user to select a local folder with a <input type="file" webkitdirectory directory> in order to get the fullpath to said folder, but the value comes out as "C:\fakepath\folder"
Apparently, the "fakepath" is here for security reasons, but my app involves helping the user find files within his personal folders... How could I do that with such security measures blocking my way?
I could ask the user to manually (copy/paste, type) enter the path... But some users could have a hard time figuring out what a "path" is, let alone understanding how to find it and retrieve it.
Found a solution with document.getElementsByTagName('input')[3].files[0].path; (my file input is the fourth one in my HTML file, thus [3], and since the input only allows one file (/or folder in this case) .files[0]).
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?
I need to browse to a folder to get the directory name by clicking a button, is there any way of getting this? I was thinking I could achieve this by using <input type="file" />
For security reasons you cant. You can get just the file name, the rest is handled by the browser.
Answered here https://stackoverflow.com/a/15201258/1248388
More documentation on the File API https://developer.mozilla.org/en/docs/Using_files_from_web_applications
I've a very small doubt. I've a html tag to browse the file. and as soon as I browse the file from the local server, I want to set that path to the source of image tag. Is it possible to implement?
I've code something like this.
<form name="image" id="image" enctype="multipart/form-data" action="" method="post">
<input type="file" name="img" />
<img src=""></img>
</file>
So as soon as I browse and select the file from the local server,that path should be set to image tag.My intention is to browse the image and display it in that page itself. Any help will be appreciated. Thanks in advance.
Browsers have now allowed you to access the path of a file from the input[type=file] tag for a long time. You can't simply do it like you're trying to. In order to accomplish your goal of showing the file after the user selects it, you actually need to upload it to your server. This typically requires a page-refresh, but there are plenty of javascript libraries that are available in order to make it happen without refreshing the page. Once the file is uploaded, you can "ping back" a URL to view the image, and load that in your image tag.
The jQuery library I've been using recently to do inline file uploads is jQuery File Upload
What you need is the full path to the file on the client side - which is not allowed (see also this thread).
Sorry mate, but without sending the file to the server you can't do anything with it other than getting the file name (not the path), the file type and the file size.