Develop Reference

How to create a popup window to select a file in a local directory?

I want to create a popup window that shows me all the files in a certain directory like ex a /functions directory. I want to be able to click a file in that directory, click ok, and store it's info in variables (not upload it), How would I do this?
I've tried using a form as:
<form action="" method="post" enctype="multipart/form-data">
But with that I can't specify a directory to open specificlly, I have to manually navigate to that directory.
I've tried using window.open()
window.open("file:///" + "home/user/Desktop/demo/functions");
I've tried using an onclick link mechanism:
<a onclick="file:///+ "home/user/Desktop/demo/functions"">Open folder</a>
None of these seem to work, any ways I could approach this problem?

In JavaScript, file handling gets a bit messy. The only way to grab the contents of a folder from JavaScript would be to connect to a server and have a serverside code in a different language relay the folder information back to JavaScript.
The only way I can think that we could be able to fake this result is by placing an index.html file inside of the target directory. This index.html file would then have the names of all the files in the folder within it. However, they would have to be manually plugged into the HTML file. (if you know how to use PHP, it can scan a directory and push the contents to the HTML file)
When a web browser has to navigate to a folder, it asks the server for an index file (usually this will be an HTML or PHP file). This index would then have the contents of the folder inside of it.
If the folder is indeed on the local computer, however, there is one final way we can do this...
If the page navigates to a folder using a window.location of something akin to file:///C://Users/USERNAME/Desktop/My%20Folder/, chrome (or whatever browser you are using) will navigate to the directory and display the contents of the directory. However, since you can't put JavaScript into this browser-generated index page, you won't be able to manipulate it.

The <input type="file"> is probably your best bet, but you can't set a default directory with it (at least not without some JavaScript voodoo, and even then there are security issues between the web and the local user).
I don't know why you would want to do that, anyway, since directory structures are going to be different between different users, and the specification of paths is different between different OS's.

Instead of doing this I will suggest you copy that picture in project/image folder after clicking the upload button.

ckeditor - file renaming issue

Need your kind assistance in fixing the file rename issue. I am using ckeditor to manage the content. When i upload an image say 'blue-kpi.png' and again if i try to upload the same image it renamed the file to 'blue-kpi(1).png'.
This works fine. I want no alert message should be displayed it directly upload the file without any alerts and file renaming functionalities will work as it is.
In short, user will not see the name of the file.

Go to this address and edit it functions
ckeditor\plugins\filemanager\connectors\php\io.php
// Do a cleanup of the file name to avoid possible problems
function SanitizeFileName($sNewFileName).............

How to create File open dialogue box in javascript that will show files on server?

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.

Folder upload without drag-and-drop

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.

How to distinguish a file from a folder while uploading using drag and drop in jquery?

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.