How would one go about implementing folder uploading without using drag-and-drop? I'm looking to be able to select folders the same way one would select files.
Also, what are the upper-bounds of the number of files and folder depth?
Thanks
This is possible, but the solution is a bit awkward, which is why Fine Uploader doesn't natively support this. A file input element can either allow you to select folders OR files, not both simultaneously. So, if you want your users to choose, you will need to either provide a separate file input specifically for selecting folders, or maintain one file input element that is modified on-the-fly once the user's intentions are known.
Fine Uploader will likely provide support for selecting folders via the chooser dialog in the future as part of case #819. In the meantime, if you want to provide the ability to allow your users to select folders via the chooser dialog, you will need to provide an alternate file input element exclusively for folders, and then send the selected files in the folder to Fine Uploader via Fine Uploader's addFiles API method.
Here's an example:
<input type="file" id="directoryFileInput" webkitdirectory>
<div id="myFineUploaderContainer"></div>
$('#myFineUploaderContainer').fineUploader({
request: {
endpoint: 'my/endpoint'
}
});
$('#directoryFileInput').change(function() {
var fileList = this.files;
$('#myFineUploaderContainer').fineUploader('addFiles', fileList);
});
Of course, you may want to also style this specific file input. Once Fine Uploader case #819 is complete, you will be able to ask Fine Uploader to style and track any additional file inputs for you. Until then, if this is important to you, you will need to make any additional file input element opaque and wrap it in a styled div.
Related
I'm using Bootstrap-Vue and Vue2. I would like to use the Form File Input to allow users to upload the files. But the format of the files should be PDF only. So I used accept="application/pdf":
<b-form-file
v-model="fileLoc"
browse-text="choose"
accept="application/pdf"
/>
But when browsing, I can still choose "All" and choose non PDF file:
How can I make sure that the users uploads only files in PDF format?
Actually, the answer is in the link you provided :-)
"Note: Not all browsers support or respect the accept attribute on file inputs."
If you want to make sure that the user uploaded a pdf file, I suggest you to write a function for that (and please make also a server validation since the user could have switched the extension of a file to pdf).
So I have a basic form input with the type "file" however I want the user to be able to select a folder location and not a file.
How can I get this input to select a folder and not a file, or is there another way to do it?
Stumbled on this page as well, and then found out this is possible with just javascript (no plugins like ActiveX or Flash)
Basically, they added support for a new attribute on the file input element "webkitdirectory". You can use it like this:
<input type="file" id="ctrl" webkitdirectory directory multiple/>
It allows you to select directories. The multiple attribute is a good fallback for browsers that support multiple file selection but not directory selection.
When you select a directory the files are available through the dom object for the control (document.getElementById('ctrl')), just like they are with the multiple attribute. The browsers adds all files in the selected directory to that list recursively.
You can already add the directory attribute as well in case this gets standardized at some point (couldn't find any info regarding that)
Update 2022:
You can do it now:
https://developer.mozilla.org/en-US/docs/Web/API/Window/showDirectoryPicker
async function getDir() {
const dirHandle = await window.showDirectoryPicker();
// run code for dirHandle
}
You're most likely looking at using a flash/silverlight/activeX control. The <input type="file" /> control doesn't handle that.
If you don't mind the user selecting a file as a means to getting its directory, you may be able to bind to that control's change event then strip the filename portion and save the path somewhere--but that's about as good as it gets.
Keep in mind that webpages are designed to interact with servers. Nothing about providing a local directory to a remote server is "typical" (a server can't access it so why ask for it?); however files are a means to selectively passing information.
Eventhough it is an old question, this may help someone.
We can choose multiple files while browsing for a file using "multiple"
<input type="file" name="datafile" size="40" multiple>
I have a webpage in which the clients should be able to open files on server, I need to open a file open dialog box, similar to:
<input type= "file" id = "select_file" onchange = "openfunction();"</input>
but this shows files available on local machine, it should list files available on server.
Your best option is to use already existing solutions like elfinder, because it's already solved problem and you certainly don't want to implement all this UI/UX yourself again.
There is no tag in HTML which will allow you to select file from server. You will have to implement everything from scratch.
Using <input type="file"> you cannot read server files since it is a post action to post the whole file and there is no such option at all to read file from server!!
The possible solution would be either to create a HTML UI for all the files existing in the server like dropdown or checkbox and then ask user to select the files required and perform necessary option.
I'm using JQuery FileUpload in my web application. Things are working fine. Now i want to extend the behavior and get the folder name from uploaded file. Requirement is to get the folder name when user drop a file on page or select it through the file selection dialog. For this i tried to use callback "fileuploadchange" and "fileuploaddrop". Both worked and i was able to get the selected file collection i.e data.files but data.files[0] didn't contains any information about the source folder. Any idea on how this can be achieved ?
Thanks in advance.
You can only get info on what the user decides to "give" you, for security reasons. You might get that functionality by using some flash plugin, but with html/js you are not allowed into the users pc, not even folder names (thankfully)
If a user tries to drag and drop a folder to my file uploader control for uploading it, then I need to show an error message to the user saying that only files can be uploaded. The problem is I couldn't distinguish a file from a folder.
One way I thought was to check for file type property of jQuery. Supposing that the name of the file is "test.txt", then file type would return "text/plain". For a normal folder name such as "TestFolder", file type would be blank and its file size would return 0. However if the folder name included an extension like "TestFolder.txt", then file type would return "text/plain".
So I could have checked for file type and file size but it would not work correctly for folder name like "TestFolder.txt". Could any one suggest me a good solution to fix this using jQuery or other methods?
The ability to determine if a folder has been dropped is dependent on the user agent's support of the Filesystem API. If the user agent DOES support the Filesystem API (currently only Chrome 21+), you can make use of the Entry interface, which has two child interfaces: DirectoryEntry and FileEntry. The interface itself has isDirectory and isFile functions. Without support for this interface, there is no way to determine if dropped items are folders when examining the DataTransfer object.
Since you are not going to allow folder to drag and drop, first check if it's folder or file, second only if it's not folder then check for file extension. But IE < 11 does not support file API to handle. Hope it helps.
As far as I'm aware the browser (And javascript inherently) doesn't have access to any file access methodologies for security purposes so you cannot check what the file actually is.
I have worked with this problem myself in the past and the best option I have found that works is to handle the file server-side, and return the error back to the page after upload has completed.
I would be happy to see better alternatives myself though.