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.

Oaf

Can you provide demo in plunkr because plugin site is down right now – Ensor

@PareshGami I can't create a snippet right now, but basically it is exactly what it should do. However, I've also asked Kartik and he answered that this is currently not possible: github.com/kartik-v/bootstrap-fileinput/issues/637 – Stingaree

@FlorianMüller is this still unsolved for you? I figure github.com/kartik-v/bootstrap-fileinput/blob/master/js/… is where you should be able to write your retry-logic quite easily :-) – Isentropic

@Isentropic you brought me very near to a solution, I'm on it ;) If you want, answer with that and I'll reward the reputation. – Stingaree

@FlorianMüller thanks! Just realised an update from last night changed my line bookmark for 'fnError' to something else. Posting in a min cheers :) – Isentropic

@Isentropic that movement of your cursor was what solved the problem :-D – Stingaree

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 ;)

Oaf

+1 I still cannot get over the fact that my line marker moved near to a second approach - it is things like this that make computer programming unendingly fun – Isentropic

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!

Isentropic

I solved it a bit quick'n'dirtier (see my answer below), but this approach also fits the needs, thank you very much! – Stingaree