How can I determine the delete file?

Web Tips Q & ACategory: Krajee PluginsHow can I determine the delete file?
malhayek asked 3 months ago

I am trying to use the Bootstrap file-input plugin to upload single/multiple files to the server using ajax request.
When the request goes to the server, the following steps take place at the server-side

  1. The extension of the files are validated
  2. a new filename is generated
  3. The fine is moved to a permanent place in the server
  4. A record in the database in created for each file along with caption.
  5. After the file name is added to the database, I return the database Id for each file so these ID’s are appended to my HTML form so they are associated with the post request.

After the upload is successful, I hook into the `filebatchuploadsuccess` event, parse out the response from my server and add the database Ids to my HTML form.
So after the files are uploaded successfully I manually add the following HTML hidden input to my form.





 
Now, once a file is deleted, I need to be able to remove the corresponding HTML hidden input from my collection so it is no longer part of the final form submission request.
 
Question How/what event do I need to hook into to be able to figure out the Database id that was removed so I can remove the corresponding hidden input?
Is there is a way I can send data from the server to the client after the file is deleted, I can simple return back the database ID and I can take that id and remove the input with the corresponding value. But I am not sure what event I can hook into to be able to identify that ID.
 
Below is how I initialize the my file uploader
 
“`
   
        $(function () {
            $(“#upload-files”).fileinput({
                uploadUrl: “Attachments/Upload”,
                showBrowse: false,
                uploadAsync: false,
                browseOnZoneClick: true,
                allowedFileExtensions: [‘pdf’,’xls’,’csv’],  
                uploadIcon: ”,
                uploadClass: ‘btn btn-primary’,
                uploadLabel: ‘Upload All’,
                browseIcon: ‘ ‘,
                browseClass: ‘btn btn-primary’,
                removeIcon: ”,
                removeClass: ‘btn btn-danger’,
                removeLabel: ‘Remove All’,
                fileActionSettings : {
                    uploadIcon: ”,
                    uploadClass: ‘btn btn-primary btn-xs’,
                    dragIcon: ”,
                    dragClass: ‘text-info’,
                    removeClass: ‘btn btn-danger btn-xs’,
                    removeIcon: ”,
                    zoomIcon: ”,
                    zoomClass: ‘btn btn-xs btn-info’,
                    indicatorNew: ”,
                    indicatorSuccess: ”,
                    indicatorError: ”,
                    indicatorLoading: ”,
                    zoomIndicator: ”,
                },
                layoutTemplates: {
                    footer: ‘\n’ +
                            ‘   \n’ +
                            ‘       \n’ +
                            ‘   \n’ +
                            ‘   {size} {progress} {actions}\n’ +
                            ”,
                    fileIcon: ‘ ‘,
                },
                previewZoomButtonIcons: {
                    prev: ”,
                    next: ”,
                    toggleheader: ”,
                    fullscreen: ”,
                    borderless: ”,
                    close: ”
                },
                allowedPreviewTypes: null,
                previewFileIcon: ”,
                cancelIcon: ”,
                uploadIcon: ”,
                msgValidationErrorIcon: ”,
                previewFileIconSettings: {
                    ‘doc’: ”,
                    ‘xls’: ”,
                    ‘ppt’: ”,
                    ‘pdf’: ”,
                    ‘zip’: ”,
                    ‘html’: ”,
                    ‘txt’: ”,
                    ‘mov’: ”,
                    ‘mp3’: ”,
                    ‘pic’: ”
                },
                previewFileExtSettings: { // configure the logic for determining icon file extensions
                    ‘doc’: function (ext) {
                        return ext.match(/(doc|docx)$/i);
                    },
                    ‘pic’: function (ext) {
                        return ext.match(/(jpg|jpeg|gif|png|tiff)$/i);
                    },
                    ‘xls’: function (ext) {
                        return ext.match(/(xls|xlsx|csv)$/i);
                    },
                    ‘ppt’: function (ext) {
                        return ext.match(/(ppt|pptx)$/i);
                    },
                    ‘zip’: function (ext) {
                        return ext.match(/(zip|rar|tar|gzip|gz|7z)$/i);
                    },
                    ‘html’: function (ext) {
                        return ext.match(/(htm|html)$/i);
                    },
                    ‘txt’: function (ext) {
                        return ext.match(/(txt|ini|java|php|js|css)$/i);
                    },
                    ‘mov’: function (ext) {
                        return ext.match(/(avi|mpg|mkv|mov|mp4|3gp|webm|wmv)$/i);
                    },
                    ‘mp3’: function (ext) {
                        return ext.match(/(mp3|wav)$/i);
                    },
                    ‘pdf’: function (ext) {
                        return ext.match(/(pdf)$/i);
                    },
                },
                uploadExtraData: function () {
                    var out = {};
                    $(‘.kv-input:visible’).each(function () {
                        $el = $(this);
                        var container = $el.closest(‘.file-preview-frame’);
                        var index = container.data(‘fileindex’);
                        out[‘caption_’ + index] = $el.val();
                        
                    });

                    return out;
                }
            }).on(“filebeforedelete”, function(jqXHR) {

                return !confirm(“Are you sure you want to delete this file?”)

            }).on(‘filebatchuploadsuccess’, function(event, data, previewId, index) {

                console.log(‘FILES WERE UPLOADED’, data, previewId, index);
                addFileToQueue(data.response.keys);

            }).on(‘filedeleted’, function(event, key, jqXHR, data) {
                // Is there a way obtain data sent back from the server after the request is received?
                console.log(data);
            });
        });
   
“`

Login or register to contribute or comment.

Login   Register