Is it possible to use the native filebrowser to pick a file stored on the server?

Question

I have two usecases, first, users can pick a local file and upload it to the server. Second, users can pick a file that is already on the server (uploaded, emailed etc by them). I know there are lots of libraries that do this, but Is it possible to use the native file browser, and allow them to pick a file, stored on the server, using that? It's okay if all browsers are not supported.

There's [this old article](http://stackoverflow.com/questions/3567369/reading-server-side-file-with-javascript) that maybe can help you ;) Cheers. — Gorka, Sep 03 '16 at 16:44
Do not believe it is possible for `` dialog to reference filesystem other than users local filesystem — guest271314, Sep 03 '16 at 16:49
@Gorka That approach should work, where uploaded `file.name`s are stored in an array or object locally and same file name is stored at server; populate ` — guest271314, Sep 03 '16 at 18:24

score 1 · Answer 1 · answered Sep 03 '16 at 16:56

1

Nope. The file browser is controlled by the browser and OS and you cannot make anything about which folder to show.

answered Sep 03 '16 at 16:56

yogurt

380
1
10

score 0 · Accepted Answer · edited May 23 '17 at 12:01

Do not believe it is possible for <input type="file"> dialog to reference filesystem other than users local filesystem.

It's okay if all browsers are not supported

A workaround would be to save names or references of uploaded files at an array or object, save actual uploaded file at FileSystem using requestFileSystem, provide user with list of uploaded files, when user selects file from list, retrieve File object from FileSystem using requestFileSystem.

See jQuery File Upload Plugin: Is possible to preserve the structure of uploaded folders?

Alternatively, as suggested by @Gorka, you can store uploaded file.names in an array or object locally where uploaded file object is stored at server same file name; populate <select> element with with <option>elements having file.name as value; at change event of select element use XMLHttpRequest or fetch to retrieve selected <option> value from server. For example,

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <input type="file" />
  <select disabled>
    <option>Choose File from server</option>
  </select>
  <br>
  <label></label>
  <br>
  <iframe style="width:95vw;height:98vw"></iframe>
  <script>
    var input = document.querySelector("input[type=file]");
    var select = document.querySelector("select");
    var iframe = document.querySelector("iframe");
    var label = document.querySelector("label");
    var uploads = [];
    select.onchange = function(e) {
      var uploadedFile = uploads.filter(function(file) {
        return file.name === e.target.value;
      }).pop();

      var url = "/uploads/" + uploadedFile.name;

      fetch(url)
        .then(function(response) {
          return response.blob()
        })
        .then(function(file) {
          // do stuff with `file`
          var reader = new FileReader();
          reader.onloadend = function(e) {
            iframe.onload = function() {
              label.textContent = url;
            }
            iframe.src = e.target.result;
          }
          reader.readAsDataURL(file);
        })
    }

    input.onchange = function(e) {
      var file = e.target.files[0];
      // save reference to uploaded file name
      uploads.push({
        name: file.name,
      });
      // post file to server
      var data = new FormData();
      data.append("file", file, file.name);
      var request = new XMLHttpRequest();
      request.open("POST", "/path/to/server");
      request.onload = function() {
        var option = document.createElement("option");
        option.value = file.name;
        option.textContent = file.name;
        select.appendChild(option);
        if (select.disabled) {
          select.removeAttribute("disabled");
        }
        alert(`${file.name} written to server`);
      }
      // save `file` as `file.name` at server,
      // for example, at `/uploads/${file.name}`
      request.send(data);
    }
  </script>
</body>
</html>

plnkr http://plnkr.co/edit/McvuErPOxyNJcpIZXl1G?p=preview

Is it possible to use the native filebrowser to pick a file stored on the server?

2 Answers2