When uploading a directory, how to keep relative path as to retain subdirectories?

[dengste]

Hi, first off: thanks for this great package!

I'm trying to upload a full directory containing subdirectories, and I'd like to keep that structure. I use webkitdirectory="true" as to upload directories, and I can see that the File objects have the proper webkitRelativePath. However, my backend only receives the plain name. I tried to replace name with webkitRelativePath using useRequestPreSend, but that only leads to type errors. I have the feeling I'm missing something obvious, any help appreciated!

[yoavniran]

hey @dengste
I suggest you look at html-dir-content
its used internally by @rpldy/upload-drop-zone
it might help you with what you're looking to do

[reggaebass]

Did you ever figure this out? I am facing a similar issue.

[puneety95]

@yoavniran @dengste @reggaebass any solutions ?

[puneety95]

@yoavniran I am using Chunked upload. Not DnD. I am not able to set up html-dir-content for this chunked upload

[puneety95]

@yoavniran I was able to work around this. I am using useRequestPreSend and passing the relative path in the request header. Doing something like this :-

const UploadButtonWithUniqueIdHeader = () => {
useRequestPreSend((data) => {
let newFileName = data["items"][0]["file"]["webkitRelativePath"]
let batchId = data["items"][0]["batchId"]
return {
options: {
destination: {
headers: {
"X-Unique-Upload-Id": userId-${Date.now()},
"file-name":newFileName,
"Batch-Id":batchId
}
}
}
};
});

Then using UploadButtonWithUniqueIdHeader inside my Chunk Uploader component. Let me know if theres a better way of doing this. Appreciate your help in creating and maintaining this very useful library.

[yoavniran]

hey @puneety95
Except for your nontraditional way of accessing all object properties with [], I'd say your implementation looks good. 😄 requestPreSend is exactly the right hook for these sorts of changes and what I would have suggested.

very nice and thanks!

BTW, I thought you needed to recursively go through the folder structure, that's why I suggested html-dir-content. If you only need one level then you're good.

[puneety95]

@yoavniran webkitdirectory will take all the files present in the folder at any level. I just needed their webkitRelativePath so that when I save them at my backend server, the folder structure is intact.

Also, for accessing object properties, should I have used the dot notation ? :)

[yoavniran]

Thats right, I was confusing the data from drag event. With the file chooser + webkitdirectory it does provide the entire recursive structure.

I would have written like:

const UploadButtonWithUniqueIdHeader = () => {
        useRequestPreSend(({ items  }) => ({
                  options: {
                     destination: {
                         headers: {
                            "X-Unique-Upload-Id": userId-${Date.now()},
                            "file-name": items[0].file.webkitRelativePath,
                            "Batch-Id": items[0].batchId
                         }
                    }
                 } 
        });

but its a matter of style, not correctness :)