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
Related
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>
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.
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.
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