0

We all know there is option of select file/files in html/html5 but I don't want that I want to select folder or directory on Windows/Linux/MacOS in html/Jquery. I have seen some solutions in which select from folder from dialogue box but this doesn't work in firefox or any other browser except chrome.

Please help me out.

edigu
  • 9,878
  • 5
  • 57
  • 80
Sheraz Ali
  • 315
  • 6
  • 19
  • 2
    file API is limited, can do more using flash but it has browser/OS limitations also. What exactly are you wanting to do? – charlietfl Sep 12 '14 at 16:09
  • I actually need to select folder and show all files on page, recursively. – Sheraz Ali Sep 12 '14 at 16:21
  • 2
    currently can't do that with javascript for obvious security reasons. Would you want any website to be able to see all your files? – charlietfl Sep 12 '14 at 16:35
  • Where does Zend Framework play into this? – EHorodyski Sep 12 '14 at 17:52
  • @charlietfl Yes. The requirement is to show all your images on web page without uploading e.g. in c:\images\hollywood. So user can see his own stuff with the help of our website. – Sheraz Ali Sep 12 '14 at 18:08
  • @EHorodyski Mistake. – Sheraz Ali Sep 12 '14 at 18:09
  • well good luck with that. Can do it with flash for systems/browsers that allow flash but sounds like requirement is overstepping cross browser capabilities – charlietfl Sep 12 '14 at 18:16
  • 1
    @SherazAli See response below. Not exactly what you are looking for but should achieve what you'd like to do. For future reference, I recommend being more specific with what you are trying to achieve. Had I known you wanted to show local images on your site without the user having to upload first I would have been able to answer much quicker. – EHorodyski Sep 12 '14 at 22:37

2 Answers2

0

Edit: After a better explanation, I do not think you can simply drag a folder, or select an entire folder using JavaScript's FileAPI. However, if you can alert the user to press CTRL + A inside the directory to select all files you're golden. The example I put together can be achieved by mixing two examples from the FileAPI tutorial from HTML5Rocks:

<div id="drop_zone">Drop files here</div>
<output id="list"></output>

<script>

    function handleFileSelect(evt) {
        evt.stopPropagation();
        evt.preventDefault();

        files = evt.dataTransfer.files; // FileList object.

        // Loop through the FileList and render image files as thumbnails.
        for (var i = 0, f; f = files[i]; i++) {
            // Only process image files.
            if (!f.type.match('image.*')) {
                continue;
            }
            var reader = new FileReader();

            // Closure to capture the file information.
            reader.onload = (function(theFile) {
                return function(e) {
                // Render thumbnail.
                var span = document.createElement('span');
                span.innerHTML = ['<img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
                document.getElementById('list').insertBefore(span, null);
            };
        })(f);
        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
    }

    function handleDragOver(evt) {
        evt.stopPropagation();
        evt.preventDefault();
        evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
    }

    // Setup the dnd listeners.
    var dropZone = document.getElementById('drop_zone');
    dropZone.addEventListener('dragover', handleDragOver, false);
    dropZone.addEventListener('drop', handleFileSelect, false);

</script>

You will need to ensure that the user is using a more modern browser, I tried in Chrome and it works, I can assume Firefox will and I'm not sure what version of IE starts support for the FileAPI.

I'm keeping my original response here for reference, thinking that the request was to get the user's local path as well.

I don't believe there would be a way to do this with JavaScript. Even using the new HTML5 FileAPI it looks like the interface is not implemented to capture the user's local file location, probably for security reasons:

7. The File Interface

//This interface describes a single file in a FileList and exposes its name. It inherits from Blob.
[Constructor(Blob fileBits, [EnsureUTF16] DOMString fileName)]
interface File : Blob {

  readonly attribute DOMString name;
  readonly attribute Date lastModifiedDate;

};
EHorodyski
  • 774
  • 1
  • 8
  • 30
  • Hi @Ehorodyski I have tried this but this is not working if drag the folder "images" (contains 5 jpg images) on windows 8. It is showing the following output "images (n/a) - 0 bytes, last modified: 8/9/2014:" I'm getting the folder name but i need to get full path. And its not limited to just images but for media files as well. – Sheraz Ali Sep 15 '14 at 06:22
  • + I guess it is the case for if we drag only files not folders – Sheraz Ali Sep 15 '14 at 06:25
0

I know this was posted a couple of months ago, but just in case other people are searching for it at least this is an answer how to select directory for Google Chrome.

<input type="file" multiple webkitdirectory id="directory" />

And to show them on your website, you can use the following code (Given that you have a with id "fileOutput".

<script type="text/javascript">
(function(){
        var files, 
            file, 
            extension,
            input = document.getElementById("directory"), 
            output = document.getElementById("fileOutput");

        input.addEventListener("change", function(e) {
            files = e.target.files;
            output.innerHTML = "";

            for (var i = 0, len = files.length; i < len; i++) {
                file = files[i];
                extension = file.name.split(".").pop();
                output.innerHTML += "<li class='type-" + extension + "'>" + file.name + "</li>";
            }
        }, false); 
})();
</script>
sph1nx
  • 1