Bootstrap Fileinput does not send file again on second upload

Question

When I upload a file with Krajees Bootstrap Fileinput, I perform a server side validation of the file. When something goes wrong, I output a JSON-Object simply with {error:'Something went wrong'}. The Plugin displays the error perfectly.

But then: When I press again "upload" just after that, the $_FILES array in the called submit PHP script is empty. This means, the plugin does not send the file again even if it has notified that an error has occurred.

Why would the plugin only upload the file once even if it detects that there was an error? Are there any methods that can "reset" the "uploaded state" of the file? (I'm only uploading one file).

I already checked the file events but none of them brought me to the desired result, instead they kind of destroyed the whole upload form with certain buttons being suddenly disabled and so on.

Answer 1

I finally found out the exact point, where the problem could be solved:

On line 1705 in the function updateUploadLog, the function self.updateStack is called. This call simply clears the file stack and causes a later process to empty the form input. Simply commenting out this line does the trick, but only if you reload after success, because somehow fnSuccess is also called when an error is found.

@Angad thank you very much for your solution triggering input, thanks to that I found a place to start the search again ;)

Answer 2

I see that the Github Issue says this isn't currently supported, but it seems relatively uncomplicated to fork this project and bend it to your needs. All the fnError ='s you'll find in a Cmd + F search inside fileinput.js are where you need to look.

Take for instance here: https://github.com/kartik-v/bootstrap-fileinput/blob/d5ed3ee989edbd5d67b8cf4bdadc9f3c18609965/js/fileinput.js#L1897

This is for the batch file-upload that currently looks like this:

fnError = function (jqXHR, textStatus, errorThrown) {
    var outData = self._getOutData(jqXHR), errMsg = self._parseError(jqXHR, errorThrown);
    self._showUploadError(errMsg, outData, 'filebatchuploaderror');
    self.uploadFileCount = total - 1;
    if (!self.showPreview) {
        return;
    }
    self._getThumbs().each(function () {
        var $thumb = $(this), key = $thumb.attr('data-fileindex');
        $thumb.removeClass('file-uploading');
        if (self.filestack[key] !== undefined) {
            self._setPreviewError($thumb);
        }
    });
    self._getThumbs().removeClass('file-uploading');
    self._getThumbs(' .kv-file-upload').removeAttr('disabled');
    self._getThumbs(' .kv-file-delete').removeAttr('disabled');
};

I'd try modifying this to:

fnError = function (jqXHR, textStatus, errorThrown) {
    if (!myError.equals(textStatus)) { // A service-like impl. injection would be sexier
        var outData = self._getOutData(jqXHR), errMsg = self._parseError(jqXHR, errorThrown);
        self._showUploadError(errMsg, outData, 'filebatchuploaderror');
        self.uploadFileCount = total - 1;
        if (!self.showPreview) {
            return;
        }
        self._getThumbs().each(function () {
            var $thumb = $(this), key = $thumb.attr('data-fileindex');
            $thumb.removeClass('file-uploading');
            if (self.filestack[key] !== undefined) {
                self._setPreviewError($thumb);
            }
        });
        self._getThumbs().removeClass('file-uploading');
        self._getThumbs(' .kv-file-upload').removeAttr('disabled');
        self._getThumbs(' .kv-file-delete').removeAttr('disabled');
    } else {
        self._ajaxSubmit(fnBefore, fnSuccess, fnComplete, function() {
            // TODO: Second time failure - handle recursively or differently? :-)
        );
    }
};

Hope this helps!