Upload directory doesn't send folder name with file

Question

I tried new feature of directory upload https://stackoverflow.com/a/8218074/2004910 but I am not receiving exact folder structure on the server request.

HTML

<form action="http://localhost:3000/" method="post" enctype="multipart/form-data">
<input id="files" class="file" type="file" name="file[]"  webkitdirectory directory>
<input type="submit" />

Request Payload (network panel)

ExpressJS:

const express = require('express')
const app = express()
var busboy = require('connect-busboy');
var fs = require('fs');
//...
app.use(busboy()); 

app.post('/', function (req, res) {
    var fstream;
    req.pipe(req.busboy);
    req.busboy.on('file', function (fieldname, file, filename) {
        console.log("Uploading: " + filename); 
        fstream = fs.createWriteStream(__dirname + '/files/' + filename);
        file.pipe(fstream);
        fstream.on('close', function () {
            res.redirect('back');
        });
    });
})
app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
})

Please suggest me how to achieve this.

folder structure is private to user. You'll only receive the files, not their location on the user's computer — Salketer, Sep 18 '17 at 09:18
@guest271314 It means that if files are arranged inside sub-folders..I need that information as well so that I can replicate same folder structure on server. It doesn't mean that I need full path from user's computer but should be relative to the folder being uploaded. — Apul Gupta, Sep 18 '17 at 09:24
See [jQuery File Upload Plugin: Is possible to preserve the structure of uploaded folders?](https://stackoverflow.com/questions/37106121/jquery-file-upload-plugin-is-possible-to-preserve-the-structure-of-uploaded-fol/), [How to upload and list directories at firefox and chrome/chromium using change and drop events](https://stackoverflow.com/questions/39664662/how-to-upload-and-list-directories-at-firefox-and-chrome-chromium-using-change-a) — guest271314, Sep 18 '17 at 09:25
@guest271314 Please suggest how to send that to server once created same structure using your post: https://stackoverflow.com/questions/37106121/jquery-file-upload-plugin-is-possible-to-preserve-the-structure-of-uploaded-fol/ — Apul Gupta, Sep 19 '17 at 05:57
You can create a `JSON` string reflecting the structure of the directories and files using pattern at second link at previous comment. Note, the `TODO` at code where a directory contains both files and nested directories. — guest271314, Sep 19 '17 at 15:30
What is the difference between the directory structure received at server and actual directory structure? — guest271314, Sep 19 '17 at 16:19

Salketer · Answer 1 · 2017-09-19T06:26:03.700

from https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory

After the user makes a selection, each File object in files has its File.webkitRelativePath property set to the relative path within the selected directory at which the file is located.

I do not think it is passed in the POST request tough, you'll have to work it on the client side I think.

$('#files').on('change',function(e){
    var files = e.target.files;
    for (let i=0; i<files.length; i++) {
        var path = files[i].webkitRelativePath;
        $('#form').append('<input type="hidden" name="filepath[]" value="'+path+'"/>');
    }
});

This script will append hidden inputs to send the file paths with the POST. Your script could then use it. Look out tough, if I sent you a file with the same filename, but in two different folders, you might not place the right one in the correct folder.

That's the question..How to pass that information on server? What sort of arrangements needed on client side for this. — Apul Gupta, Sep 18 '17 at 09:25
As of now, without making any changes to my javascript/html code, I am getting list of all files..and I need folder structure which is not being received at server but being passed into request payload. — Apul Gupta, Sep 19 '17 at 06:04

Upload directory doesn't send folder name with file

1 Answers1