How to get the name of the uploaded files

Question

I'm using Bootstrap File Upload plugin writen by Krajee (http://plugins.krajee.com/file-input/plugin-options). I'm trying to get the name of the uploaded files. I didn't see a method for it. How can i manage ?

Answer 1

Looking in the Bootstrap File Upload docs (specifically the Events), I've found that when you upload a file it also loads a preview of it (if you have that option enabled). When that happens is that it emits the following event:

$('#input-id').on('fileloaded', function(event, file, previewId, index, reader) {
    console.log("fileloaded");
});

The second parameter file is actually a Javascript Object that has the name property, as the docs state here: https://developer.mozilla.org/en-US/docs/Web/API/File so you could try something like:

$('#input-id').on('fileloaded', function(event, file, previewId, index, reader) {
    console.log(file.name);
});

More info here: https://developer.mozilla.org/en-US/docs/Web/API/File/name

Also, you could try to see if the change event, that fires when you upload a file regardless of preview or not, has additional parameters (this is not in the docs):

$('#input-id').on('change', function(event) { // add the second parameter file
    console.log("change"); // try to log file.name here and see if it works
});