Filepond: How to get the relative folder path of the files/folders we upload

[EthosData]

Summary

We are trying to integrate FilePond into our application to add drag&drop capabilities to upload folder structures (files and folders).

To achieve it, we need to get the relative path (the one from the origin) of the files and folders we upload. However seems the plugin does not retrieve this info.

How to reproduce

For example, imagine that we are uploading the following structure:

• FOLDER_A/file1.txt
• FOLDER_B/FOLDER_B1/file2.txt

If we upload this structure via FilePond, the file/folder object does not have the relative path information and from that moment we will not know to which folders/subfolders each file belongs to.

Expected behaviour

FilePond to pass the original folder path so we can retrieve it to the server (backend) to replicate it (create the same folders/subfolders: FOLDER_A, FOLDER_B and FOLDER_B1) in our application once the files are uploaded.

[rikschennink]

I know the path is not available for individual files, I'm happy to check if the relative path is available for directory objects. Will try to take a look later this week. Any info is appreciated.

[JaimeBtab]

Hello Rik,

I am working with David in the integration and to obtain the relative path with the below function when a user Drag&Drop a folder to drop zone. I would like to add the webkitRelativePath property to the File or Item Object but I do not know exactly where to place the code to add it, if before or after processing the file. Now I showing it to console.log by adding to function requestDataTransferItems(dataTransfer)

var uploader, traverseFileTree, map = {};

// replace by your plupload setup, this is just an example
uploader = new plupload.Uploader({
    runtimes : 'html5',
    container: 'drop-target',
    drop_element: 'drop-target',
    browse_button : 'files',
    url : 'http://www.torrentplease.com/dropzone.php',
    init: {
        PostInit: function() {
            document.getElementById('uploadfiles').onclick = function() {
                uploader.start();
                return false;
            };
        },
        BeforeUpload: function (up, file) {
            // send relativePath along
            if(map[file.name] !== undefined) {
                up.setOption('multipart_params', {
                    relativePath: map[file.name].shift()
                });
            }
        }
    }
});
uploader.init();

// all relative paths are built here
traverseFileTree = function (item, path) {
var dirReader = null;
    path = path || '';
    if (item.isFile) {
        item.file(function(file) {
            // careful here, could be several files of the same name
            // we assume files will be in the same order here than in plupload
            if(map[file.name] === undefined) {
                map[file.name] = [];
            }
            map[file.name].push(path);
        });
    } else if (item.isDirectory) {
        dirReader = item.createReader();
        dirReader.readEntries(function (entries) {
            var n = 0;
            for (n = 0; n < entries.length; n++) {
                traverseFileTree(entries[n], path + item.name + "/");
            }
        });
    }
};

I extracted and reused the code from this issue Getting relativePath of all files when folder is drag and dropped in Plupload and from Chrome and folder support page.

Regards

[rikschennink]

Just published version 4.10.0 file objects now have a _relativePath property that is populated when directories are selected using browse or when directories are dropped.

Please note that selecting directories with browse is only possible if allowDirectoriesOnly has been set to true or if the webkitdirectory attribute has been set to the source input element. allowDirectoriesOnly currently does not prevent drag/drop of files.

[JaimeBtab]

We noticed an issue for several extensions like .xls, .log, .7z, etc.
It is not returning the _relativePath for that cases, appears as undefined. I put allowFileTypeValidation to false but seems is not the issue.

[JaimeBtab]

Apparently, the issue occurs when Filepond is not detecting the file as File but as Blob object. A Blob object seems doesn't have the webkitrelativepath property

[rikschennink]

@JaimeBtab I've found the issue, will be fixed in 4.11.0 release

[rikschennink]

@JaimeBtab Fixed in 4.11.0

[JaimeBtab]

So quick and well fixed!
Thanks @rikschennink !!!