Media Library events

Questions
#1

Hello,

I am wondering if there are any events for the media library.

USE case:
If a customer click on an image to insert into mediafinder or something there might be a JS event to maipulate the image before add it to the record/model.

#2

Hi,

Yes, for example, when a file/image is uploaded: upload - October CMS

You can find information about Events in the doc API (FormController - October CMS), section Events.

Another way is to look inside the model Class. You can find inline comments, for instance (modules\media\widgets\MediaManager.php):

/**
             * @event media.file.upload
             * Called after a file is uploaded
             *
             * Example usage:
             *
             *     Event::listen('media.file.upload', function ((\Media\Widgets\MediaManager) $mediaWidget, (string) &$path, (\Symfony\Component\HttpFoundation\File\UploadedFile) $uploadedFile) {
             *         \Log::info($path . " was uploaded.");
             *     });
             *
             * Or
             *
             *     $mediaWidget->bindEvent('file.upload', function ((string) &$path, (\Symfony\Component\HttpFoundation\File\UploadedFile) $uploadedFile) {
             *         \Log::info($path . " was uploaded");
             *     });
             *
             */
#3

@apinard thank you so much.

Well i am looking for JS events. for example here

modules/media/formwidgets/mediafinder/assets/js/mediafinder.js

#4

Right, you are looking to catch JS and not PHP.

Look at this: JavaScript API - October CMS - 3.x

You can basically intercept any ajax call.

I also see for modules\media\widgets\mediamanager\assets\js\mediamanager.js;

this.dropzone.on('addedfile', this.proxy(this.uploadFileAdded))

#5

@apinard thanks.

this is related to dropZone.

may be i explain it wrong.

so following are the steps i took.

  1. add image to media library.

  2. select image in the media library via mediaFinder (form type). a popup apears and here i can select image.

  3. i clicked on insert.

now after clicking insert the image apears in the mediaFinder partial as thumbnail. but before tthis apears i need to call some event to manipulate the image or for example change the image name.

#6

@apinard got it

addEventListener('ajax:update-complete', function(event) {
        const { handler } = event.detail.context;

        console.log(event)

        // If the handler is either of the following
        if (['ocmediamanager::onGetSidebarThumbnail'].includes(handler)) {

            console.log(event)

        }
    });
1 Like