Delete files not working for ResumableUpload

gb5256 commented 1 year ago

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

I am using the latest 5.5.2 version

Using this code:

  <label for="input-res-2">File Gallery</label>
  <div class="file-loading">
  <input id="input-res-2" name="input-res-2[]" type="file" multiple accept="image/*">
</div>

  <script>
      $(document).ready(function() {
          $("#input-res-2").fileinput({
              uploadUrl: "/import/upload-file",
              enableResumableUpload: true,
              deleteUrl: '/import/file-delete',
          });
      });
  </script>

The Ajax return I get (for a file which is smaller like the chunk size, so only one batch in this case): (please note that the URL to the delete path is correctly returned from server):

    {
        "chunkIndex": "0",
        "initialPreviewConfig": [
            {
                "type": "other",
                "caption": "sample_640×426.tiff",
                "key": "818184_sample_640_C3_97426.tiff",
                "fileId": "818184_sample_640_C3_97426.tiff",
                "size": "818184",
                "url": "/import/file-delete"
            }
        ],
        "append": true
    }

Clicking on the Delete button on the preview thumbnail will not fire any Ajax to the server.
I have also noted that the events for delete are not fired as well (not included in above code)
There are NO js console errors in my browser at all.

Expected behavior and actual behavior

When I follow those steps, I see no Ajax call

I was expecting to see an Ajax call.

Environment

Browsers

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

Operating System

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

Libraries

jQuery version:
bootstrap-fileinput version: 5.5.2

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

gb5256 commented 1 year ago

Just tested a bit more and it seems to be related to the event listeners. If I add this to the above code so that there are two images already shown, like this:

          'overwriteInitial' => false,
          'initialPreview'=> [
              "<img class='kv-preview-data file-preview-image' src='https://picsum.photos/id/260/1920/1080'>",
              "<img class='kv-preview-data file-preview-image' src='https://picsum.photos/id/261/1920/1080'>",
          ],
          'initialPreviewConfig'=> [
              ['caption' => "Nature-1.jpg", 'width'=> "120px", 'url'=> "/site/file-delete", 'key'=> 1],
              ['caption' => "Nature-2.jpg", 'width'=> "120px", 'url'=> "/site/file-delete", 'key'=> 2]
          ],

Then the events for delete button will work for these initial two images. But the event listener seems not to be attached to new images uploaded manually afterwards.

kartik-v commented 1 year ago

Yes this is a programming you need to handle as the developer in your app for your use case. Based on when you are uploading and when upload is complete on your server - you need to refresh initialPreview and initialPreviewConfig for your use case so that the server delete URL calls and events can be triggered from the plugin.

gb5256 commented 1 year ago

Ok, thanks for your quick reply. Can you elaborate on the "refresh" part? Do you suggest that after upload is done, I would need to refresh the page but then already pre-seed the fileinput with the already existing files? Hmm. If that is what you suggest then I would loose the possibility to show a preview thumbnail for those files as the files will not be uploaded to a webroot accessible folder (for security reasons). I liked it a lot that with this uploader the previews are rendered client side. Or do I understand wrong?

kartik-v / bootstrap-fileinput