We Keep Coding

Need browse button on my JSP page to select folder (not files)

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>

How can i upload files on dropzone.js with style="display: none;" using Selenium?

I'm trying to upload files on a website which using dropzone.js for file uploads.
I've found the file upload field in form, but the script stops without throwing any error.
I've also used find_elements_by_id("upload-input") to make sure there are not multiple fields with same id.
elem = driver.find_element_by_id("upload-input")
driver.implicitly_wait(2)
elem.send_keys("C:\KVR.pdf")
This is how html looks like:
<div id="fallback" style="display: none;">
<input id="upload-input" type="file" name="file" multiple="multiple">
<div id="upload-progress" class="upload-progress"></div>
</div>

As per the HTML you have shared the <input> tag is having style set to display: none;. You can use the following code block to upload the file :
element = driver.find_element_by_xpath("//div[#id='fallback']")
driver.execute_script("arguments[0].removeAttribute('style')", element)
driver.find_element_by_xpath("//input[#id='upload-input']").send_keys("C:\\KVR.pdf")

DropzoneJS hides the <input type="file">
You can find those with the instruction below:
dz_inputs = driver.find_elements(By.XPATH, "//input[#type='file' and #class='dz-hidden-input']")
Then for example, to add a file to the first dropzone on the page, you should proceed as below:
dz_inputs[0].send_keys("/File/path/file_name.extension")

How to get the path of selected folder in javascript or node js

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.

Javascript file compare

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

File Uploading - Limit File Types in "File Upload" Window

I have a question regarding file uploading, I need to limit file types, but I like to do it in the “File Upload” window, so the user can’t even see files that are not allowed for uploading, I like to do it in js or jquery.
I know it’s possible for example, uploadify plugin does this, but I don’t want to use it for a number of reasons.

Try this link out. It should give you about what you need. It just uses straight javascript, I don't think there are any JQuery options for this yet.
http://www.codestore.net/store.nsf/unid/DOMM-4Q8H9E
<script type="text/JavaScript">
<!-- Begin
function TestFileType( fileName, fileTypes ) {
if (!fileName) return;
dots = fileName.split(".")
//get the part AFTER the LAST period.
fileType = "." + dots[dots.length-1];
return (fileTypes.join(".").indexOf(fileType) != -1) ?
alert('That file is OK!') :
alert("Please only upload files that end in types: \n\n" + (fileTypes.join(" .")) + "\n\nPlease select a new file and try again.");
}
// -->
</script>
I've updated this answer with the actual code from the posted link. As the poster notes this is not a "secure" solution to this problem. As this is client side javascript the extension of the file can be changed easily with web development tools. Always check uploaded files on the server side to prevent malicious files from being uploaded.

As per my knowledge, we can do that as shown below, but still the dialogue contains all file types :
<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
But, you can restrict the file upload of wrong type with Jquery/Javascript, i guess before sending the file to server by checking the extension.

Why don't you do this from your HTML using the input tag?
Try this:
<input type="file" id="fileUpload" accept=".pdf, .jpg, .png">
This will allow you to upload files with .PDF, .JPG, .PNG extensions only.
This one worked for me, no need to JS