JavaScript select a directory

Question

Possible Duplicate:
Directory Chooser in HTML page
How do I use Google Chrome 11's Upload Folder feature in my own code?

I'd like the users to click on a button, then there is a file select dialog, but the user can only select a directory, when selected, I need to get the directory path as a string.

I looked at the HTML5 File API, but can't get how to limit only directory can be selected, and I don't see attributes of the path of the file.

Only need to support Chrome

Imagine if I pointed the dialog to My Documents. Imagine what could happen. — Joseph, May 27 '12 at 18:18
possible duplicate of [Directory Chooser in HTML page](http://stackoverflow.com/questions/2809688/directory-chooser-in-html-page) and [How to take folder as a input in html?](http://stackoverflow.com/questions/1837759/how-to-take-folder-as-a-input-in-html) — Matt Ball, May 27 '12 at 18:19
You want to get the path? If it is possible, then it will be a huge security hole! — Derek 朕會功夫, May 27 '12 at 18:20
@JosephtheDreamer I expect to get the string "C:/User/wong2/My Documents". nothing else.I don't need to read the contents of that directory — wong2, May 27 '12 at 18:20
You can't get the real path or most likely any path at all, you can however prompt for entire folders at once in google chrome with `webkitdirectory` attribute in file input — Esailija, May 27 '12 at 18:21
@MattBall I'm writing a Chrome extension, which automatically download files to different directories according to their type. I'd like the user to custom the map between file type and directory. — wong2, May 27 '12 at 18:27
@wong2 That sounds cool, but I think Derek means you need to write your _own_ plugin. — gengkev, May 27 '12 at 20:34
I'm not sure that Flash can download stuff to specific locations. Wouldn't it be fun if I could download things to c:\windows? — gengkev, May 28 '12 at 04:29
You might want to cache the files you want to save using the File APIs and then the user can download them as a zip file when they need them — gengkev, May 28 '12 at 04:30
@gengkev I just want to use Flash to get the full path of a folder, the download part is done with Chrome's [download api](http://code.google.com/chrome/extensions/trunk/experimental.downloads.html) — wong2, May 28 '12 at 05:57
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/11830/discussion-between-gengkev-and-wong2) — gengkev, May 28 '12 at 16:29

score 0 · Accepted Answer · answered May 28 '12 at 17:28

Breakthrough! These use some experimental features and I have no idea if this will actually work. First, let's find out the path of the downloads directory by downloading a dummy file to it:

chrome.experimental.downloads.download({url:"data:text/plain,",filename:"~dummy.tmp"},
  function (downloadId, error) {
    if (error) { /* do stuff */ }

    // get the DownloadItem object
    chrome.experimental.downloads.search({downloadId: downloadId}, function(items) {

      // this is the absolute filesystem location of where it was downloaded!
      var filename = items[0].filename;

      // if we remove dummy.tmp from the end we have the downloads directory!
      // also in case it's windows replace backslashes with forward slashes.
      var downloads_directory = filename.replace(/~dummy.tmp$/i,"").replace(/\\/g,"/");
    });
});

After this, I anticipate two ways for completing your extension:

(slightly harder) Now that we have the downloads directory, let's get access to the file:/// url. Add the "file://*" permission to your manifest file. You need to tell your user to navigate to chrome://extensions, find your extension, and tick off "Allow access to file:// URLs" next to it. You can check to make sure the user has done this via isAllowedFileSchemeAccess.

Try it by going to file:///home/ or file:///C:/, based on your OS. It should show a directory of the files in your computer. I believe it may be possible to use XMLHttpRequest to get the HTML of these files (hint: use xhr.responseType = "document"), which you can parse to build your own user interface for selecting folders! (For adding folders just download a file to the path you'd like to add.)
You can also simply invoke chrome.experimental.downloads.download with saveAs: true to get the user to download a temporary file to the folder they want to save to. Then, remove the filename from the end, and remove the downloads path from the beginning, to get a relative path, which you can save files to in the future!

I'm quite excited to see how your extension turns out. Good luck!

Some (aka a lot) of credit for the idea goes to https://github.com/antimatter15/chromesearch, uhh @antimatter15 — gengkev, May 28 '12 at 17:30
...and you can erase the temporary files with `chrome.experimental.downloads.erase`, but erase based on the download id to make sure you aren't erasing any of the user's files! — gengkev, May 28 '12 at 18:32

JavaScript select a directory

1 Answers1