Include webkitRelativePath or fullPath property in each file object

• I want to propose a feature

What is the current behavior?

Currently the file list that is returned from the onDrop event is missing the webkitRelativePath and/or the fullPath property. This is what is returned:

{
  name: "Screen Shot 2017-06-05 at 12.33.12 PM.png",
  lastModified: 1496684001000,
  lastModifiedDate: MonJun05201710: 33: 21GMT-0700(PDT),
  webkitRelativePath: "",
  size: 41890,
  type: "image/png",
  webkitRelativePath: ""
}

If I use a standard input or other drag and drop implementations the webkitRelativePath or fullPath property is populated with a value in each file in the file list

What is the expected behavior?

I would expect the file objects in the returned file list to have all available (non deprecated) properties included. I would expect this:

{
  name: "Screen Shot 2017-06-05 at 12.33.12 PM.png",
  lastModified: 1496684001000,
  lastModifiedDate: MonJun05201710: 33: 21GMT-0700(PDT),
  webkitRelativePath: "",
  size: 41890,
  type: "image/png",
  webkitRelativePath: "folder_1/folder_2/folder_3/Screen Shot 2017-06-05 at 12.33.12 PM.png"
}

If this is a feature request, what is motivation or use case for changing the behavior?

I am implementing directory uploads and in order to rebuild the folder structure I need to access the webkitRelativePath or fullPath property in each file object.

Please mention other relevant information such as the browser version, Operating System and react-dropzone version.

Latest react-dropzone version

Thanks for your time and consideration!

[caseychoiniere]

***Edit: Looks like my original comment did get posted

Oh man, I just spent time to write a relevant response to this but then navigated away from the page and lost my work before publishing the comment. So here’s the short version.

The webKitRelativePath property is only available when you have the webkitdirectory attribute set on your input or when using the directory reader in the HTML5 File API to read directories from a dropped folder on the dropzone.

It seems like this functionality is beyond the current intended scope of react-dropzone.

In the past you have said that this functionality should be part of a separate npm package and not part of react-dropzone. #174

I know that @quarklemotion had tried to roll his own directory handling script and was going to publish an npm package. I actually tried using his script and this is where I ran into this problem in the first place. Not sure why webKitRelativePath isn’t exposed there but there are other viable options available to people. It seems like quarkelmotions script should always include the path because of this method here.

I had success using Dropzone.js to just make my own React component in about 30 minutes and it handles directories out of the box. If this doesn’t work for others they could try applying (open source) code from Dropzone.js (Relevant Code Here) or from another open source library like Uppie.js to react-dropzone in there own project to get the functionality they need.

Anyways, hope this helps some folks.

[caseychoiniere]

I’m pretty sure that issue #477 is just referring to single files and not directories. I believe that Dropzone.js retrieves the full path only when dropping folders into the dropzone. They use webkitGetAsEntry() to get directories and then directory.createReader() and directory.readEntries() which returns the files and directories including a fullPath property.

So I think this doesn’t really fall under the scope of react-dropzone as you’ve said in past issues that “this functionality should not be the part of this repository but a separate npm package” issue #174

I think that is where I ran into the problem in the first place. I was using some code from @mfields-gpsw @quarklemotion which didn’t seem to include the webKitRelativePath or fullPath props.

I think if users want this functionality they should consider using (or applying the code to react-dropzone) open source code from Dropzone.js or from a simple library like Uppie.js

Dropzone.js does this:

Dropzone.prototype._addFilesFromDirectory = function(directory, path) {
      var dirReader, errorHandler, readEntries;
      dirReader = directory.createReader();
      errorHandler = function(error) {
        return typeof console !== "undefined" && console !== null ? typeof console.log === "function" ? console.log(error) : void 0 : void 0;
      };
      readEntries = (function(_this) {
        return function() {
          return dirReader.readEntries(function(entries) {
            var entry, j, len;
            if (entries.length > 0) {
              for (j = 0, len = entries.length; j < len; j++) {
                entry = entries[j];
                if (entry.isFile) {
                  entry.file(function(file) {
                    if (_this.options.ignoreHiddenFiles && file.name.substring(0, 1) === '.') {
                      return;
                    }
                    file.fullPath = path + "/" + file.name;
                    return _this.addFile(file);
                  });
                } else if (entry.isDirectory) {
                  _this._addFilesFromDirectory(entry, path + "/" + entry.name);
                }
              }
              readEntries();
            }
            return null;
          }, errorHandler);
        };
      })(this);
      return readEntries();
    };