filepreupload event wrong index and undefined fileId when uploading folder

[SebastienGautier]

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• The issue still exists against the latest master branch of bootstrap-fileinput.
• This is not an usage question. I confirm having read the plugin documentation and demos.
• This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• I have attempted to find the simplest possible steps to reproduce the issue.
• I have included a failing test as a pull request (Optional).

Steps to reproduce the issue

1. Setup the library with a webkitdirectory input
2. Add the filepreupload event
3. Inspect index and fileId parameters

Demo : https://jsfiddle.net/groseb/Lp2wb8rg/3/

Expected behavior and actual behavior

When I follow those steps, I see the index always the same and the fileId undefined.

I was expecting the index and the fileId to have the correct values.

For context I'm using the event to append a path to the formdata to upload to a given directory. I need the fileId to get its webkitRelativePath and construct the correct path for each file.
All I could use now is the previewId which is not practical at all and the size of the file but it's not reliable as I could have two files with the same size.

Thanks for your help

Environment

Browsers

• Google Chrome
• Mozilla Firefox
• Internet Explorer
• Safari

Operating System

• Windows
• Mac OS X
• Linux
• Mobile

Libraries

• jQuery version: any
• bootstrap-fileinput version: 5.5.1

Isolating the problem

• This bug happens on the plugin demos page
• The bug happens consistently across all tested browsers
• This bug happens when using bootstrap-fileinput without other plugins
• I can reproduce this bug in a jsbin

[coolblades]

I see similar issue with fileuploaded, the index is wrong. Getting 1 when it should be 0
Looking at the source code, looks i is incremented before the task is executed

$reqDocscontent.find(rec.button).prop('disabled', false).fileinput('destroy').fileinput({
theme: 'bs3',
uploadUrl: rec.url,
allowedFileExtensions: rec.docTypes,
maxFileCount: 1,
showPreview: false,
captionClass: 'input-sm',
browseClass: 'btn btn-primary btn-sm',
cancelClass: 'btn btn-default btn-sm',
removeClass: 'btn btn-danger btn-sm',
uploadClass: 'btn btn-success btn-sm'
}).on('filebeforeload', (event, file) => {
if (rec.days && moment(file.lastModified).isBefore(moment().startOf('day').subtract(rec.days, 'days'))) {
BootstrapDialog.warning(The selected file is more than \${rec.days} days old.);
}
}).on('filepreajax', (e, formdata, previewId, index) => {
formdata.append('modDate', e.target.files[0].lastModified);
}).on('fileuploaded', function (event, data, id, index) {
var fname = data.files[index].name;
var out = '' + 'Uploaded file - ' + fname + ' successfully.' + '';
simpleNotify(out, undefined, 'info', 1500);
setTimeout("resetDocs(packet, $('#step-4 .tabbable'));", 500);
});

Source code: self._uploadSingle(i, id, true, deferrer); is called at a delay but the i++ is already called, so you get 1 for i when self._uploadSingle is called

if (self.uploadAsync) {
i = 0;
var pool = self.ajaxPool = tm.addPool($h.uniqId());
$.each(self.getFileStack(), function (id) {
pool.addTask(id + i, function (deferrer) {
self._uploadSingle(i, id, true, deferrer);
});
i++;
});

            pool.run(self.maxAjaxThreads).done(function () {
                self._log('Async upload batch completed successfully.');
                self._raise('filebatchuploadsuccess', [fm.stack, self._getExtraData()]);
            }).fail(function () {
                self._log('Async upload batch completed with errors.');
                self._raise('filebatchuploaderror', [fm.stack, self._getExtraData()]);
            });
            return;
        }