Delete an attachment in the WP media modal window

by

I’m trying to create an option in the WP modal media window to detect duplicate files and delete a newer file if an older duplicate is found. I have the following code working (in conjunction with the ‘attachment_fields_to_edit’ filter) to deselect a duplicate file and select the original file in the media modal. What I’d like to do is, when a user clicks the button, delete the original file (or at least hide it in the media library window so I can delete it later).

( function( $ ) {

    var _AttachmentDisplay = wp.media.view.Settings.AttachmentDisplay;
    wp.media.view.Settings.AttachmentDisplay = _AttachmentDisplay.extend({
        render: function() {
            _AttachmentDisplay.prototype.render.apply(this, arguments);
            currentselection = this.controller.state().get('selection').first().toJSON();
            selection = this.controller.state().get('selection');

            $('button.dmc').on('click', function(e){

                e.preventDefault();

                var id = $(e.currentTarget).data("id");
                if(currentselection.id == id) {

                    currentattachment = wp.media.attachment(id);
                    selection.remove(currentattachment);

                    console.dir(wp.media.view.Attachment);

                    newattachment = wp.media.attachment($(e.currentTarget).data("original"));
                    selection.add(newattachment);

                }
            });
        }
    });

} )( jQuery );

The interface looks like the attached image.

screenshot of duplicate media check

I can see in media-views.js at line 5873 that there’s a deleteAttachment function bound to ‘click .delete-attachment’. How can I access this, given my current setup, by passing in an image ID or attachment object?

2

You just have to call destroy method on the attachment model. This will both remove the attachment from the Media Library view, and send an ajax call to the backend to delete the attachment in the database and all linked files in uploads directory.

You do not need to convert the attachment to JSON to get the id : you can directly manipulate the Backbone models. The selection is a collection of several attachments.

( function( $ ) {

    var _AttachmentDisplay = wp.media.view.Settings.AttachmentDisplay;
    wp.media.view.Settings.AttachmentDisplay = _AttachmentDisplay.extend({
        render: function() {
            _AttachmentDisplay.prototype.render.apply(this, arguments);

            $('button.dmc').on('click', $.proxy(function(e){

                e.preventDefault();
                selection = this.controller.state().get('selection');
                firstAttachment = selection.first();

                var id = $(e.currentTarget).data("id");
                if(currentselection.id == id) {

                    selection.remove(firstAttachment);
                    firstAttachment.destroy();

                    console.dir(wp.media.view.Attachment);

                    newattachment = wp.media.attachment($(e.currentTarget).data("original"));
                    selection.add(newattachment);

                }
            }, this));
        }
    });

} )( jQuery );

I have also added a $.proxy call to be able to use this inside the click event callback.

Leave a Comment