Currently using this plugin for uploading pictures on my website and I am struggling to find a way to trigger an event to call my php file when user hit the delete button after they uploaded an image. (How does the delete function work? )

(my upload is working perfectly! Just cannot get the delete part going)

html:

 <input id="input-upload" name="input-upload[]" type="file" multiple="true">

JS code:

$("#input-upload").fileinput({
        uploadUrl: 'uploadImg.php',
        deleteUrl: 'deleteImg.php',
        showCaption: false,
        dropZoneEnabled: false,
        maxFileSize: 7000,
        maxFileCount: 5,
        uploadAsync: false,
        allowedFileExtensions : ['jpg', 'png','gif'],


        previewFileType: "image",
    browseClass: "btn btn-success",
    browseLabel: "Pick Image",
    browseIcon: '<i class="glyphicon glyphicon-picture"></i>',
    removeClass: "btn btn-danger",
    removeLabel: "Delete",
    removeIcon: '<i class="glyphicon glyphicon-trash"></i>',
    uploadClass: "btn btn-info",
    uploadLabel: "Upload",
    uploadIcon: '<i class="glyphicon glyphicon-upload"></i>',
        initialPreviewShowDelete:true,

    });

I also tried various event, like filepredelete and filedeleted functions, but those events were never called when user hit the delete button. Only the fileclear event works, but this is pointless because I will always get an empty list back and it is not useful because I cannot delete those uploaded files on my server.

I want to find a way to get the current list or find out what image the user deleted so that I can remove it in the server. (getting my input-upload array back prior to deletion and after)

Could anyone please help me out here? Thanks in advance!

Currently using this plugin for uploading pictures on my website and I am struggling to find a way to trigger an event to call my php file when user hit the delete button after they uploaded an image. (How does the delete function work? )

(my upload is working perfectly! Just cannot get the delete part going)

html:

 <input id="input-upload" name="input-upload[]" type="file" multiple="true">

JS code:

$("#input-upload").fileinput({
        uploadUrl: 'uploadImg.php',
        deleteUrl: 'deleteImg.php',
        showCaption: false,
        dropZoneEnabled: false,
        maxFileSize: 7000,
        maxFileCount: 5,
        uploadAsync: false,
        allowedFileExtensions : ['jpg', 'png','gif'],


        previewFileType: "image",
    browseClass: "btn btn-success",
    browseLabel: "Pick Image",
    browseIcon: '<i class="glyphicon glyphicon-picture"></i>',
    removeClass: "btn btn-danger",
    removeLabel: "Delete",
    removeIcon: '<i class="glyphicon glyphicon-trash"></i>',
    uploadClass: "btn btn-info",
    uploadLabel: "Upload",
    uploadIcon: '<i class="glyphicon glyphicon-upload"></i>',
        initialPreviewShowDelete:true,

    });

I also tried various event, like filepredelete and filedeleted functions, but those events were never called when user hit the delete button. Only the fileclear event works, but this is pointless because I will always get an empty list back and it is not useful because I cannot delete those uploaded files on my server.

I want to find a way to get the current list or find out what image the user deleted so that I can remove it in the server. (getting my input-upload array back prior to deletion and after)

Could anyone please help me out here? Thanks in advance!

• javascript
• php
• jquery
• html
• upload

1 Answer 1

Add initialPreview

initialPreview: {
    `img src='/images/desert.jpg' class='file-preview-image' alt='Desert' title='Desert'>`",
    `<img src='/images/jellyfish.jpg' class='file-preview-image' alt='Jelly Fish' title='Jelly Fish'>`",
},

Then add Config to this Preview:

initialPreviewConfig:

{
                {
                    caption: 'desert.jpg',
                    width: '120px',
                    url: '/localhost/public/delete', 
                    key: 100,
                    extra: {id: 100}   ***// id of your image***
                   }};