.fileinput('upload') Method does not work in 5.0.9

[AngelJakimovski]

Prerequisites

• [x] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• [x] The issue still exists against the latest master branch of bootstrap-fileinput.
• [x] This is not an usage question. I confirm having read the plugin documentation and demos.
• [x] This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• [x] 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. call upload method within other JS function .fileinput('upload')
2. it does not trigger async upload
3. upload URL is set properly
4. the same code worked just fine with 5.0.1
5. if I set showUpload: true, and click on it after I select the file, the upload starts

Expected behavior and actual behavior

When I follow those steps, I see...

I was expecting...

Environment

Browsers

• [x] Google Chrome
• [ ] Mozilla Firefox
• [ ] Internet Explorer
• [ ] Safari

Operating System

• [x] Windows
• [ ] Mac OS X
• [ ] Linux
• [ ] Mobile

Libraries

• jQuery version:
• bootstrap-fileinput version: 5.0.9

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

[AngelJakimovski]

also, I get this message in the console, after I select the file bootstrap-fileinput: "inputShiurimFiles": Invalid thumb frame with id: "thumb-inputShiurimFiles-5289384_file_example_MP3_5MG.mp3". There was an issue with it, and it seemed to be resolved, but I can see it in 5.0.9

[kartik-v]

Cannot reproduce your issue - please share a JS Fiddle to reproduce your issue.

[jaimestuardo]

I think the explanation of this issue is not clear enough for you to understand.

I have just also found the issue in version 5.0.9 so I will try to be more clear.

The problem is when you call upload method to actually upload a file in the queue and after the process is complete, you try to select another file by clicking the preview zone. Preview zone will not allow to click again. Notice that this behaviour only happens when calling upload method. If one clicks in the upload icon, it will work all the time.

For better understanding, I have created this fiddle with the code I am using to test: https://jsfiddle.net/desytec/a2bhog10/35/

Unfortunately, I have not found a CDN with version 5.0.9, so I have created the test case with version 5.0.8, which works, but with that code, you can easily reproduce the behaviour using version 5.0.9.

In summary, you can follow these steps using the JSFiddle above:

1. Click the preview zone. File browser dialog will open so that you can select a file (in the JSFiddle you can select XLS, XLSX, CSV or TXT)
2. Once the file is in preview area, please click the green Upload button
3. In the JSFiddle, the upload process will fail but it does not matter for the test case
4. Now, please click again in a blank part of the preview area. Click will not work so you will not be able to select another file.
5. In order to allow to upload a second file, you will need to recreate the fileinput control.

P.S. I have tested only on Chrome

[Kwaadpepper]

@jaimestuardo I tested you fiddle following your instructions, I can't reproduce this on Firefox. If I click on a blank space after failure, the browser will open.

Edit: just tested on chromium also (linux plateform)

[kartik-v]

@jaimestuardo you can cross check ajax demo # 12 to check your use case for latest plugin release (currently v5.0.9) - it works fine there.

@AngelJakimovski I am not sure you checked your issue still is relevant on v5.0.9 - let know if the issue persists.

[jaimestuardo]

@kartik-v Sorry, but I don't see the call to upload method in the demo you pointed me to.

[jaimestuardo]

@Kwaadpepper Did you use version 5.0.9? notice that fiddle is using 5.0.8 which works, as I explained. You need to do the test using version 5.0.9.

[kartik-v]

@kartik-v Sorry, but I don't see the call to upload method in the demo you pointed me to.

@jaimestuardo if you need that you can have a look at ajax demo # 6 - this includes a call to fileinput('upload') immediately after files are selected via filebatchselected event. The browseOnZoneClick property is set to true for the example.

As a side note - I see you are trying to load fileinput dynamically in a modal - that could be a problem - where your plugin initialization maybe duplicated every time you open the modal window (without being destroyed properly prior to open). Also have a look at how you are initializing that - it could be the issue .

[jaimestuardo]

Hello @kartik-v . That demo is not the same scenario.

Furthermore, I have checked that the control is initialized only once, when the modal is shown. And what issue do you see in the initilization? Comparing to the demo, I see only one significant difference, the use of uploadAsync. Could that be a problem?

Finally, I have used fileinput version 5.0.8 and it works.

[Kwaadpepper]

@jaimestuardo So the issue would be async upload with v5.0.9 as I understand. Have you encountered this issue on these conditions on your end ?

[AngelJakimovski]

if I place setTimeout(function() {fileinput('upload');}, 500), then the upload starts without any issue, so I'd say some async method delays and does not finish on time. Can't go deeper into this right now, as I finally got it to work, and I'm behind on the schedule. But as soon as I get some more time, I will try to recreate it in Fiddle.

[Kwaadpepper]

I have set a fiddle.js with the last version of master https://jsfiddle.net/Kwaadpepper/z6whtLf5/1/

please give it a try.

Also, what browser are you using ?

[kartik-v]

Currently closing this issue as cannot reproduce. If there is a method to reproduce this let know and will reopen. BTW...the new version 5.1.0 will be released as I type this.

[ItsReddi]

We also discovered this Bug. Thanks for the timeout hint. @kartik-v maybe of the 'destroy' initiated by WidgetTrait?

[kartik-v]

@ItsReddi thanks for the update - probably this is related to the Yii2 Extension based on this plugin and related to the widget initialization and not this plugin itself... Maybe it can be taken up in the Yii2-Fileinput widget section.

@jaimestuardo confirm if this is an issue you are also facing with the Yii2 widget and I can close this here and an issue can be opened up in that extension repo.

[kartik-v]

@jaimestuardo - I edited your fiddle to modify a few things - first anomaly is you are initializing the fileinput multiple times every time a modal dialog is opened which would cause undesirable behavior. So a destroy method has been incorporated every time modal dialog is opened and then the plugin is reinitialized. Also there are multiple click events being registered for the UPLOAD button every time the modal is opened - you may want to check that (check my inline script comments).

Secondly latest stable plugin release 5.1.4 has been used. You can test on the fiddle. Once you receive any error you have to clear the errored files in order to be able to pick another file (only if using browseOnZoneClick - note that for all other cases the user can still select files using drag and drop files OR using the browse button even if error encountered)

Refer the updated FIDDLE here - am closing this issue - if there is something missed please let know to reopen - or if the issue is different please log a new issue.