Here is kind of example what I want on my JSP page,
I can browse a file, but the requirement is to browse a folder.
Can someone please help?
There's the HTMLInputElement.webkitdirectory attribute you can add to input element. It is non-standard implementation; provide a fallback when using it.
Here's a snippet:
function onFolderChange({ target }) {
const files = target.files;
// file is a FileList, array methods are not supported.
[...files].forEach(console.log); // Needs a recursive function since `file` could be another FileList (a folder)
}
const folderInput = document.getElementById("folderInput");
folderInput.addEventListener('change', onFolderChange);
<label>
Select a folder
<input id="folderInput" type="file" webkitdirectory directory multiple>
</label>
Related
I have some specific questions that I still haven't found any material on forums that could help me.
I need to get the name of the folder I select to upload. I know that for security reasons I can't get the full path, but I would like to get at least the name of the folder I selected. Example:
<input type="file" id="fileToUpload" webkitdirectory directory/>
When selecting a folder, I want to get its name, I don't care about the name of the files inside it, only the folder name. Another problem would be that I also need to get the name even if the selected folder doesn't get any files.
EDIT:
<input type="file" id="FileUpload" onchange="selectFolder(event)"
webkitdirectory mozdirectory msdirectory odirectory directory
multiple />
<script type="text/javascript">
function selectFolder(e) {
var theFiles = e.target.files;
var relativePath = theFiles[0].webkitRelativePath;
var folder = relativePath.split("/");
console.log(folder[0]);
}
</script>
With this code below I get what I want, which is the name of the selected folder, but if the selected folder doesn't have any content inside it doesn't return anything.
does this solve your question
<body>
Hello world
<script>
function get_name(){
var check = document.getElementById("fileToUpload").value;
const arr = check.split("\\");
console.log(arr);
console.log("Is this your folder : " , arr.at(arr.length -1) );
console.log(check);
}
</script>
<input type="file" id="fileToUpload" onchange="get_name()" webkitdirectory directory />
</body>
I want to get the path of selected folder. Here is my code:
<input style="display:none;" id="fileDialog" type="file" webkitdirectory />
var chooser = document.querySelector('#fileDialog');
chooser.addEventListener("change", function(evt) {
console.log(this.value);
}, false);
chooser.click();
Using this code i'm getting a fakepath.
Is there anyway in node.js,so i can get the path of my selected folder.
I'm using express framework in node.js.
There's no way for you to get the path of the file selected in an input type="file" at all, full stop. Not on the browser, and not transmitted to the server for you to use in Node/Express. That information is simply not available to you. Browsers let you know the name of the file, but that's it.
I have an input file :
<input onchange="da_show_files();" id="file_send_chat" type="file" class="upload" name="file_send_chat[]" multiple="multiple" />
And my main problem is that I'd like to access (in order to remove) specific files in the input, but I'm only getting the last modified (added) file when using :
$('#file_send_chat').prop("files") or
$('#file_send_chat').files or
$('#file_send_chat').val()
The whole point is to be able to remove one file from the input itself, so that I can add it again (for a better user experience).
How can I do that ?
Thanks.
PS : da_show_files(); only show the filenames when uploading files.
I have 4 file input tags to upload files as follows,
Left File : <input type="file" name="dataFile1" id="fileChooser1" />
Right File : <input type="file" name="dataFile2" id="fileChooser2" />
Config File : <input type="file" name="dataFile3" id="fileChooser3" />
<button type="button" id="execute" onclick="ValidateFile()">Click to Upload files</button>
Now, I want to make sure that only distinct files are are being uploaded.
How do I do this is JS/JQ without using third party plugins?
I've used,
var FileName1 = document.getElementById('fileChooser1').value;
var FileName2 = document.getElementById('fileChooser2').value;
if(FileName1 == FileName2)
{
alert("Same files cannot be uploaded");
}
But this checks only for the names of the files that are being uploaded, if two files with different names but same content are uploaded then they are being identified as different files.
You should be able to get the file size property from the input field with jQuery. See How to check file input size with jQuery?.
If you compare those, you'd have an extra check that you aren't uploading the same files. Although no guarantee.
In your specific case you can get this and more extra information like this:
//Check file data before execution
$('#execute').live('click', function() {
console.log($("#fileChooser1")[0].files[0]);
console.log($("#fileChooser2")[0].files[0]);
console.log($("#fileChooser3")[0].files[0]);
});
Check your console output to see you get the size, type and lastModifiedDate. I think it's reasonable to assume that if all of those are the same you're dealing with the same file (barring files of 0 size).
Test it out on this fiddle
Is any other way to get the slected folder path other than using fileupload control ?
using file upload control i am getting filename but i need to get only selected folder path , is it possible to get folder path ?
Code:
<input id="fileToUpload" type="file" size="45" style="width:300px;" name="fileToUpload" onChange="addFiles(this, this.value,this.value);" class="input">
<select name="mcffiles" id="mcffiles" size=5 style="width:200px; height:100px">
function addFiles(selectObject, seltext, selvalue)
{
alert(seltext);
alert(selvalue);
var optionObject = new Option(seltext,selvalue);
var optionRank = document.getElementById("mcffiles").options.length;
alert(optionRank);
if(optionRank <= 4)
{
document.getElementById("mcffiles").options[optionRank]= optionObject;
}
else
alert('Only 5 files can select')
}
If you mean the folder path on the client then no, javascript can not access the local file system even to read.
If you want to allow upload of the entire folder content (which I guess is why you are asking), then you have to embed flash or something similar.