Using socketio-file-upload to upload multiple files

Question

Im using NodeJS with socket.io and socketio-file-upload to upload multiple files, it works great! However I'm having an issue where I'm trying to save the name attribute of the input these files come to save them into my DB.

When I upload 1 or more files, I can't seem to access the input field name or something that shows me which of the files come from which input field.

Here is my front:

var uploader = new SocketIOFileUpload(socket);

var array_files_lvl_3 = [
    document.getElementById("l3_id_front"),
    document.getElementById("l3_id_back"),
    document.getElementById("l3_address_proof_1"),
    document.getElementById("l3_address_proof_2"),
    document.getElementById("l3_passport")
];

uploader.listenOnArraySubmit(document.getElementById("save_level_3"), array_files_lvl_3);

And here is my back:

var uploader = new siofu();
uploader.dir = "uploads/userL3";
uploader.listen(socket);

uploader.on('saved', function(evnt){
    console.log(evnt);
    //this "event" variable has a lot of information 
    //but none of it tells me the input name where it came from.
});

This is what the "evnt" variable holds:

Tarun Lalwani · Accepted Answer · 2017-10-24 12:05:21Z

Unfortunately the library doesn't send that information. So there is nothing existing config you can do. So this needs code modification.

client.js:374

var _fileSelectCallback = function (event) {
    var files = event.target.files || event.dataTransfer.files;
    event.preventDefault();
    var source = event.target;
    _baseFileSelectCallback(files, source);

client.js:343

var _baseFileSelectCallback = function (files, source) {
    if (files.length === 0) return;

    // Ensure existence of meta property on each file
    for (var i = 0; i < files.length; i++) {
        if (source) {
            if (!files[i].meta) files[i].meta = {
                sourceElementId: source.id || "",
                sourceElementName: source.name || ""
            };
        } else {
            if (!files[i].meta) files[i].meta = {};
        }
    }

After these changes I am able to get the details in event.file.meta

sffc · Accepted Answer · 2019-04-10 06:26:21Z

0

I'm the author of socketio-file-upload.

It looks like the specific input field is not currently being recorded, but this would not be a hard feature to add. Someone opened a new issue and left a backpointer to this SO question.

A workaround would be to directly use submitFiles instead of listenOnArraySubmit. Something like this might work (untested):

// add a manual listener on your submit button
document.getElementById("save_level_3").addEventListener("click", () => {
  let index = 0;
  for (let element of array_files_lvl_3) {
    let files = element.files;
    for (let file of files) {
      file.meta = { index };
    }
    uploader.submitFiles(files);
    index++;
  }
});

answered Apr 10, 2019 at 6:26

sffc

6,4543 gold badges50 silver badges78 bronze badges

Collectives™ on Stack Overflow

Using socketio-file-upload to upload multiple files

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related