If I dont upload anything, I cant delete initialPreview items #830

buglinjo · 2016-12-30T18:12:02Z

I have a problem. When I try to delete image from the edit list delete button does not work, but if I upload anything than works. I have configured fileinput like this:

fileInput.fileinput({
            uploadUrl: "{{ route('admin.products.upload-temp-image') }}",
            uploadAsync: true,
            maxFileCount: 10,
            allowedFileExtensions: ['jpg', 'png', 'gif'],
            showBrowse: false,
            showUpload: false,
            browseOnZoneClick: true,
            initialPreviewAsData: true,
            initialPreviewFileType: 'image',
            uploadExtraData: {
                '_token': '{{csrf_token()}}',
            },
            deleteExtraData: {
                '_token': '{{csrf_token()}}',
            },
            initialPreview: [
                        '/uploads/products/{{ $obj->part_number }}/images/{{ $img->src }}',
            ],
            initialPreviewConfig: [
                            caption: "{{ $img->src }}",
                            size: '{{ \File::size(public_path().'/uploads/products/'.$obj->part_number.'/images/'.$img->src) }}',
                            width: "120px",
                            url: "/site/file-delete",
                            key: '{{ $img->id }}'
                        },
            ]
        })`

Please Help.

kartik-v · 2017-01-21T17:52:22Z

I am not sure I understand your query correctly. If you are meaning, that you cannot delete the intialPreview thumbnails without uploading - then it is not correct. You can delete the initialPreview thumbnails irrespective of whether you upload a file or not. Each item in initialPreviewConfig will contain a url for the thumbnail - which will determine the AJAX server-action to delete the file (for example for your use case it is /site/file-delete). This should be called whenever you click the delete icon on a file thumbnail. You can cross check with some of the plugin demos which include an initialPreviewConfig and allows file deletion.

jaysanati · 2017-01-27T07:49:24Z

I have the same issue. If I use initialPreview to add images, I can't delete the images unless I upload an image. The delete button is there but it doesn't do anything. Please fix.

kartik-v · 2017-01-27T10:19:03Z

Can you share what is the use case to reproduce and why you cannot delete - because this does not seem to be the correct case?

As an example you can cross check ajax scenario 3 example. You can actually delete the initial preview files without needing to upload any file. (cross check the browser console network for the delete ajax URL action being called once you press delete).

jaysanati · 2017-01-29T00:52:51Z

I see the delete works in your demos and that is so weird that I can't make it work.
Zoom is not working also.
I also tried to hide zoom icon but it doesn't hide.

This is my code:

<script type="text/javascript">
    $("#Photos").fileinput({
        initialPreview: ["<img src='/Site_Data/Property/1/PIC1.jpg' class='file-preview-image' style='width:240px; height:160px' alt='Property Photo' title='Property Photo'>","<img src='/Site_Data/Property/1/PIC2.jpg' class='file-preview-image' style='width:240px; height:160px' alt='Property Photo' title='Property Photo'>","<img src='/Site_Data/Property/1/PIC3.jpg' class='file-preview-image' style='width:240px; height:160px' alt='Property Photo' title='Property Photo'>","<img src='/Site_Data/Property/1/PIC4.jpg' class='file-preview-image' style='width:240px; height:160px' alt='Property Photo' title='Property Photo'>","<img src='/Site_Data/Property/1/PIC5.jpg' class='file-preview-image' style='width:240px; height:160px' alt='Property Photo' title='Property Photo'>","<img src='/Site_Data/Property/1/PIC6.jpg' class='file-preview-image' style='width:240px; height:160px' alt='Property Photo' title='Property Photo'>","<img src='/Site_Data/Property/1/PIC7.jpg' class='file-preview-image' style='width:240px; height:160px' alt='Property Photo' title='Property Photo'>"],
        uploadUrl: "/ManageProperties/uploadPhotos?propertyId=1",
        uploadAsync: false,
        allowedFileExtensions: ['jpg', 'png'],
        overwriteInitial: false,
        autoReplace: true,
        maxFileSize: 300,
        showCaption: true,
        showDrag: true,
        showUpload: true,
        showZoom: false,
        browseClass: "btn btn-primary btn-lg",
        slugCallback: function (filename) {
            return filename.replace('(', '_').replace(']', '_');
        }
    });
</script>

uagrace · 2017-01-29T16:57:17Z

@mohammadsj, Try version 4.3.5

kartik-v · 2017-01-29T18:06:11Z

Folks who have the problem mentioned above... please try sharing a JS fiddle to reproduce your use case. That itself may give you the solution. Currently closing this as not reproducible... will reopen based on feedback.

cicadabear · 2017-08-17T10:34:51Z

Pressing the delete button doesn't do anything in the latest version 4.4.2. But changing to version 4.3.5, it's ok. And in the demo ajax scenario 3 example, that doesn't work as well. Please check. @kartik-v

buglinjo · 2017-08-22T18:02:05Z

@cicadabear I have downgraded it too because of that.

kartik-v · 2017-08-23T01:58:10Z

Get the latest build from dev master guys...

kvermeille · 2018-04-23T14:00:29Z

Bump

vasanthsr · 2018-06-06T04:26:02Z

Hi Kartik, Remove button is not visible on recent versions (v4.4.8 and v4.4.9) when initialPreview is displayed.
Is there a workaround to get Remove button displayed when displaying the image from server on page load.

Thanks

barera14 · 2018-07-23T23:23:16Z

Hello Friend. I have a question I am using to upload files but at the moment of deleting it, the filepredelete action does not work for me. I have to preload in the initialPreview to be able to eliminate it should not leave that option without nesecidad of that
thanks

Dannyson · 2018-07-30T16:40:04Z

The button is being rendered but it is hidden by css
.file-input-ajax-new .fileinput-remove-button { display: none; }

Currently I am using the fileinput for user avatar like in the example. Despite not quite understanding whats going on, I dug into the .js and found two things, maybe someone can explain me :-)

First thing is, why some function called _setFileDropZoneTitle sets whether input is new or not. So I added condition if no initial preview is set. But I think that there has to be some beter place to check if the input is new or another logic into css has to be added. Maybe file-input-ajax-new should be added only if file-input-new was present.

_setFileDropZoneTitle: function () {
...
if (!self._hasInitialPreview()) {
   self.$container.removeClass('file-input-new');
   $h.addCss(self.$container, 'file-input-ajax-new');
}

But _asInitialPreview() also didnt work as expected, because we have initial preview only if it cant be overwritten? So i removed this part of condition

_hasInitialPreview: function () {
    var self = this;
    return self.previewCache.count();
}

and now it works as expected. If some picture is set as initial preview, the remove button is displayed, when pushed or no initial preview is set, remove button is not visible.

itajackass · 2018-11-28T09:32:54Z

Some problem like @Dannyson ! I've an avatar preview initialized. If I want to remove the pic, I can't cause button Remove is not initialized. I've to upload a new image then remove button appear and i can't remove pic. (no-ajax version).
Any fix?

kartik-v · 2018-11-28T11:27:41Z

The main remove button is intended only to remove files that are selected from client and not for files uploaded to server (hence it will be available only typically when you have selected some files from client)
The thumbnail specific remove button will be displayed for files selected from client as well as the server uploaded files which you have set an initialPreview and set the deleteUrl - this will call the deleteUrl ajax action to delete files from server
For non ajax avatar upload scenario use the avatar example demo 1 or avatar example demo 2. You can add a custom DELETE button instead of the CUSTOM tag button to call a server specific image delete (and optionally choose to hide the main default remove button by setting showRemove to false)

SalehDehqanpour · 2020-01-31T19:48:39Z

If we don't provide deleteUrl (or url in initialPreviewConfig) the event "filebeforedelete" does not even triggered!

Is there any solution for my simple use case: Check a checkbox whenever user clicked "remove" action on initial preview file. then sending this as a form value when form is posted. server reads that and delete the file if should (or update it if user sends a file)

kukulgun · 2021-07-11T00:37:39Z

same problem

jack-gaojz · 2021-10-15T15:48:58Z

Make sure the "initialPreviewShowDelete" is true.
Make sure the "deleteUrl" is correct.
Make sure the file "key" in the "initialPreviewConfig" array.

sample codes as below:

var defaultConfig = {
  "language": "zh",
  "theme": "fa",
  "required": false,
  "hideThumbnailContent": false,
  "showClose": false,
  "showCancel": false,
  "showBrowse": true,
  "showDrag": false,
  "showRemove": true,
  "showUpload": false,
  "showPreview": true,
  "autoReplace": false,
  "overwriteInitial": false,
  "showUploadedThumbs": false,
  "autoOrientImage": false,
  "dropZoneEnabled": false,
  "browseOnZoneClick": false,
  "uploadAsync": false,
  "uploadUrl": null,
  "deleteUrl": "**************",
  "allowedFileExtensions": null,
  "allowedPreviewTypes": [
    "image",
    "html",
    "text",
    "video",
    "audio",
    "flash",
    "object"
  ],
  "disabledPreviewExtensions": null,
  "allowedPreviewExtensions": null,
  "minFileCount": 0,
  "maxFileCount": 1,
  "maxFileSize": 20480,
  "resizeImage": false,
  "resizeImageQuality": 100,
  "resizePreference": "width",
  "minImageWidth": null,
  "minImageHeight": null,
  "maxImageWidth": null,
  "maxImageHeight": null,
  "initialPreviewFileType": "image",
  "initialPreviewAsData": false,
  "initialPreviewShowDelete": false,
  "initialPreview": ["<img src='**************' class='file-preview-image' />"],
  "initialPreviewConfig": [{
		key: "5"
	}]
};
var fileInput = $("#DataFile").fileinput(defaultConfig);

gerbert92 · 2022-12-18T09:36:13Z

The main remove button is intended only to remove files that are selected from client and not for files uploaded to server (hence it will be available only typically when you have selected some files from client)

The thumbnail specific remove button will be displayed for files selected from client as well as the server uploaded files which you have set an initialPreview and set the deleteUrl - this will call the deleteUrl ajax action to delete files from server

For non ajax avatar upload scenario use the avatar example demo 1 or avatar example demo 2. You can add a custom DELETE button instead of the CUSTOM tag button to call a server specific image delete (and optionally choose to hide the main default remove button by setting showRemove to false)

Hi Kartik, how can I remove the selected image(item) from the initial preview without deleting the item from the Database? I want to handle the deleting on the server side after form submission. Thanks for your assistance top guy

kartik-v closed this as completed Jan 21, 2017

kartik-v reopened this Jan 21, 2017

kartik-v closed this as completed Feb 1, 2017

kartik-v added a commit that referenced this issue Aug 17, 2017

Updates to release v4.4.3 fixes #830 fixes #1038

23f8c75

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

If I dont upload anything, I cant delete initialPreview items #830

If I dont upload anything, I cant delete initialPreview items #830

buglinjo commented Dec 30, 2016 •

edited by kartik-v

Loading

kartik-v commented Jan 21, 2017 •

edited

Loading

jaysanati commented Jan 27, 2017

kartik-v commented Jan 27, 2017 •

edited

Loading

jaysanati commented Jan 29, 2017

uagrace commented Jan 29, 2017

kartik-v commented Jan 29, 2017 •

edited

Loading

cicadabear commented Aug 17, 2017 •

edited

Loading

buglinjo commented Aug 22, 2017 •

edited

Loading

kartik-v commented Aug 23, 2017

kvermeille commented Apr 23, 2018

vasanthsr commented Jun 6, 2018

barera14 commented Jul 23, 2018

Dannyson commented Jul 30, 2018 •

edited

Loading

itajackass commented Nov 28, 2018

kartik-v commented Nov 28, 2018 •

edited

Loading

SalehDehqanpour commented Jan 31, 2020

kukulgun commented Jul 11, 2021

jack-gaojz commented Oct 15, 2021 •

edited

Loading

gerbert92 commented Dec 18, 2022

If I dont upload anything, I cant delete initialPreview items #830

If I dont upload anything, I cant delete initialPreview items #830

Comments

buglinjo commented Dec 30, 2016 • edited by kartik-v Loading

kartik-v commented Jan 21, 2017 • edited Loading

jaysanati commented Jan 27, 2017

kartik-v commented Jan 27, 2017 • edited Loading

jaysanati commented Jan 29, 2017

uagrace commented Jan 29, 2017

kartik-v commented Jan 29, 2017 • edited Loading

cicadabear commented Aug 17, 2017 • edited Loading

buglinjo commented Aug 22, 2017 • edited Loading

kartik-v commented Aug 23, 2017

kvermeille commented Apr 23, 2018

vasanthsr commented Jun 6, 2018

barera14 commented Jul 23, 2018

Dannyson commented Jul 30, 2018 • edited Loading

itajackass commented Nov 28, 2018

kartik-v commented Nov 28, 2018 • edited Loading

SalehDehqanpour commented Jan 31, 2020

kukulgun commented Jul 11, 2021

jack-gaojz commented Oct 15, 2021 • edited Loading

gerbert92 commented Dec 18, 2022

buglinjo commented Dec 30, 2016 •

edited by kartik-v

Loading

kartik-v commented Jan 21, 2017 •

edited

Loading

kartik-v commented Jan 27, 2017 •

edited

Loading

kartik-v commented Jan 29, 2017 •

edited

Loading

cicadabear commented Aug 17, 2017 •

edited

Loading

buglinjo commented Aug 22, 2017 •

edited

Loading

Dannyson commented Jul 30, 2018 •

edited

Loading

kartik-v commented Nov 28, 2018 •

edited

Loading

jack-gaojz commented Oct 15, 2021 •

edited

Loading