Mtslideshow SUPE8788 getConfig returns null

Question

I am trying to understand why this code in production is not working (it comes from a custom theme):

   protected function _prepareLayout() {
        $uploaderBlock = $this->getLayout()->createBlock('adminhtml/media_uploader');
        if($uploaderBlock != null)
        {
            Mage::log("this is printed");
        }
        $this->setChild('uploader',
                $uploaderBlock
        );

        //THE PROBLEM SHOULD BE HERE
        $config = $this->getUploader()->getConfig();

        if($config != null){
            Mage::log("this is not printed");
            $config->setUrl(Mage::getModel('adminhtml/url')->addSessionParam()->getUrl('*/*/image'))
                ->setFileField('image')
                ->setFilters(array(
                'images' => array(
                        'label' => Mage::helper('adminhtml')->__('Images (.gif, .jpg, .png)'),
                        'files' => array('*.gif', '*.jpg','*.jpeg', '*.png')
                )
            ));
        }


        $this->setChild(
                'delete_button',
                $this->getLayout()->createBlock('adminhtml/widget_button')
                ->addData(array(
                'id'      => '{{id}}-delete',
                'class'   => 'delete',
                'type'    => 'button',
                'label'   => Mage::helper('adminhtml')->__('Remove'),
                'onclick' => $this->getJsObjectName() . '.removeFile(\'{{fileId}}\')'
                ))
        );

        return parent::_prepareLayout();
    }

It seems that getConfig() called on the block returns null, can somebody point me out how to look for something wrong?

---

UPDATE

The code posted is about a magento extension called Mtslideshow. I am using Magento 1.8.1.0 with the latest patches applied.

I modified Image.php file:

protected function _prepareLayout() {
    $this->setChild('uploader',
            $this->getLayout()->createBlock('adminhtml/media_uploader')
    );

    $url = Mage::getModel('adminhtml/url')->addSessionParam()->getUrl('*/*/image');

    if (class_exists("Mage_Uploader_Block_Abstract")) {
        // PATCH SUPEE-8788 or Magento 1.9.3
        $this->getUploader()->getUploaderConfig()
            ->setFileParameterName('image')
            ->setTarget($url);

        $browseConfig = $this->getUploader()->getButtonConfig();
        $browseConfig
            ->setAttributes(
                array("accept"  =>  $browseConfig->getMimeTypesByExtensions('gif, png, jpeg, jpg'))
            );
    } else {
        $this->getUploader()->getConfig()
            ->setUrl($url)
            ->setFileField('image')
            ->setFilters(array(
                'images' => array(
                    'label' => Mage::helper('adminhtml')->__('Images (.gif, .jpg, .png)'),
                    'files' => array('*.gif', '*.jpg','*.jpeg', '*.png')
                )
            ));
    }

    $this->setChild(
            'delete_button',
            $this->getLayout()->createBlock('adminhtml/widget_button')
            ->addData(array(
            'id'      => '{{id}}-delete',
            'class'   => 'delete',
            'type'    => 'button',
            'label'   => Mage::helper('adminhtml')->__('Remove'),
            'onclick' => $this->getJsObjectName() . '.removeFile(\'{{fileId}}\')'
            ))
    );

    return parent::_prepareLayout();
}

The the image.phtml file:

<script type="text/javascript">
//<![CDATA[

<?php if (class_exists("Mage_Uploader_Block_Abstract")): ?>
    var <?php echo $_block->getJsObjectName(); ?> = new SlideShow.Gallery('<?php echo $_block->getHtmlId() ?>', <?php echo $_block->getImageTypesJson() ?>);
<?php else: ?>
    var <?php echo $_block->getJsObjectName(); ?> = new SlideShow.Gallery('<?php echo $_block->getHtmlId() ?>', <?php echo $_block->getUploader()->getJsObjectName() ?>, <?php echo $_block->getImageTypesJson() ?>);
<?php endif; ?>


//]]>

And the mtslideshow.xml file:

<layout version="0.1.0">
<default>
    <reference name="head"> 
        <action method="addJs"><file>lib/uploader/flow.min.js</file></action>
        <action method="addJs"><file>lib/uploader/fusty-flow.js</file></action>
        <action method="addJs"><file>lib/uploader/fusty-flow-factory.js</file></action>
        <action method="addJs"><file>mage/adminhtml/uploader/instance.js</file></action>
        <action method="addJs"><script>magenthemes/mtslideshow/slideshow.gallery.js</script></action>
    </reference>
</default>
<mtslideshow_adminhtml_mtslideshow_index>
    <reference name="content">
        <block type="mtslideshow/adminhtml_mtslideshow" name="mtslideshow" />
    </reference>
</mtslideshow_adminhtml_mtslideshow_index>

It kinda worked, however even if the image gets uploaded to the server, it seems that in the db the slide is not present (I imagine there is a problem when the uploader calls back the controller with the image data).

Can anybody suggest me where to look for the portion of code called by the uploader after the image upload?

Answer 1

I finally fixed it by editing the magenthemes/mtslideshow/slideshow.gallery.js on the basis on a diff with the mage/adminhtl/product.js file with respect to the one used before the SUPE 8788 patch.

The updated file now is:

var SlideShow = [];

SlideShow.Gallery = Class.create();
SlideShow.Gallery.prototype = {
    images : [],
    file2id : {
        'no_selection' :0
    },
    idIncrement :1,
    containerId :'',
    container :null,
    imageTypes : {},
    initialize : function(containerId, imageTypes) {
        this.containerId = containerId, this.container = $(this.containerId);
        this.imageTypes = imageTypes;

        document.on('uploader:fileSuccess', function(event) {
            var memo = event.memo;
            if(memo && this._checkCurrentContainer(memo.containerId)) {
                this.handleUploadComplete([{response: memo.response}]);
            }
        }.bind(this));

        this.images = this.getElement('save').value.evalJSON();
        this.imagesValues = this.getElement('save_image').value.evalJSON();
        this.template = new Template('<tr id="__id__" class="preview">' + this
                .getElement('template').innerHTML + '</tr>', new RegExp(
                '(^|.|\\r|\\n)(__([a-zA-Z0-9_]+)__)', ''));
        this.fixParentTable();
        this.updateImages();
        varienGlobalEvents.attachEventHandler('moveTab', this.onImageTabMove
                .bind(this));
    },
    _checkCurrentContainer: function(child) {
        return $(this.containerId).down('#' + child);
    },
    onImageTabMove : function(event) {
        var imagesTab = false;
        this.container.ancestors().each( function(parentItem) {
            if (parentItem.tabObject) {
                imagesTab = parentItem.tabObject;
                throw $break;
            }
        }.bind(this));

        if (imagesTab && event.tab && event.tab.name && imagesTab.name == event.tab.name) {
            this.container.select('input[type="radio"]').each(function(radio) {
                radio.observe('change', this.onChangeRadio);
            }.bind(this));
            this.updateImages();
        }

    },
    fixParentTable : function() {
        this.container.ancestors().each( function(parentItem) {
            if (parentItem.tagName.toLowerCase() == 'td') {
                parentItem.style.width = '100%';
            }
            if (parentItem.tagName.toLowerCase() == 'table') {
                parentItem.style.width = '100%';
                throw $break;
            }
        });
    },
    getElement : function(name) {
        return $(this.containerId + '_' + name);
    },
    showUploader : function() {
        this.getElement('add_images_button').hide();
        this.getElement('uploader').show();
    },
    handleUploadComplete : function(files) {
        files.each( function(item) {
            item.response = item.response.replace(/\\/g, '/');
            if (!item.response.isJSON()) {
                try {
                    console.log(item.response);
                } catch (e2) {
                    alert(item.response);
                }
                return;
            }
            var response = item.response.evalJSON();
            if (response.error) {
                return;
            }
            var newImage = {};
            newImage.url = response.url;
            newImage.file = response.file;
            newImage.link = '';            
            newImage.title = '';
            newImage.description = '';
            newImage.order = '';
            newImage.disabled = 0;
            newImage.removed = 0;
            newImage.title_animate = '';
            newImage.file_animate = '';
            newImage.desc_animate = '';
            newImage.link_animate = '';
            this.images.push(newImage);
        }.bind(this));
        this.container.setHasChanges();
        this.updateImages();
    },
    updateImages : function() {
        this.getElement('save').value = Object.toJSON(this.images);
        this.images.each(function(row) {
            if (!$(this.prepareId(row.file))) {
                this.createImageRow(row);
            }
            this.updateVisualisation(row.file);
        }.bind(this));
        this.updateUseDefault(false);
    },
    onChangeRadio: function (evt) {
        var element = Event.element(evt);
        element.setHasChanges();
    },
    createImageRow : function(image) {
        var vars = Object.clone(image);
        vars.id = this.prepareId(image.file);
        var html = this.template.evaluate(vars);
        Element.insert(this.getElement('list'), {
            bottom :html
        });

        $(vars.id).select('input[type="radio"]').each(function(radio) {
            radio.observe('change', this.onChangeRadio);
        }.bind(this));
    },
    prepareId : function(file) {
        if (typeof this.file2id[file] == 'undefined') {
            this.file2id[file] = this.idIncrement++;
        }
        return this.containerId + '-image-' + this.file2id[file];
    },
    getNextPosition : function() {
        var maxPosition = 0;
        this.images.each( function(item) {
            if (parseInt(item.position) > maxPosition) {
                maxPosition = parseInt(item.position);
            }
        });
        return maxPosition + 1;
    },
    updateImage : function(file) {
        var index = this.getIndexByFile(file);
        this.images[index].link = this.getFileElement(file, 'cell-link input').value;
        this.images[index].title = this.getFileElement(file, 'cell-title input').value;
        this.images[index].description = this.getFileElement(file, 'cell-description textarea').value;
        this.images[index].removed = (this.getFileElement(file, 'cell-remove input').checked ? 1 : 0);
        this.images[index].order = this.getFileElement(file, 'cell-order input').value;
        this.images[index].disabled = (this.getFileElement(file, 'cell-disable input').checked ? 1 : 0);
        this.images[index].title_animate = this.getFileElement(file, 'cell-title select').value;
        this.images[index].file_animate = this.getFileElement(file, 'cell-image select').value;
        this.images[index].desc_animate = this.getFileElement(file, 'cell-description select').value;
        this.images[index].link_animate = this.getFileElement(file, 'cell-link select').value;
        this.getElement('save').value = Object.toJSON(this.images);
        this.container.setHasChanges();
    },
    loadImage : function(file) {
        var image = this.getImageByFile(file);
        this.getFileElement(file, 'cell-image img').src = image.url;
        this.getFileElement(file, 'cell-image img').show();
        this.getFileElement(file, 'cell-image .place-holder').hide();
    },
    setProductImages : function(file) {
        $H(this.imageTypes)
                .each(
                        function(pair) {
                            if (this.getFileElement(file,
                                    'cell-' + pair.key + ' input').checked) {
                                this.imagesValues[pair.key] = (file == 'no_selection' ? null
                                        : file);
                            }
                        }.bind(this));

        this.getElement('save_image').value = $H(this.imagesValues).toJSON();
    },
    updateVisualisation : function(file) {
        var image = this.getImageByFile(file);
        this.getFileElement(file, 'cell-link input').value = image.link;        
        this.getFileElement(file, 'cell-title input').value = image.title;
        this.getFileElement(file, 'cell-description textarea').value = image.description;
        this.getFileElement(file, 'cell-remove input').checked = (image.removed == 1);
        this.getFileElement(file, 'cell-order input').value = image.order;
        this.getFileElement(file, 'cell-disable input').checked = (image.disabled == 1);
        this.getFileElement(file, 'cell-title select').value = image.title_animate;
        this.getFileElement(file, 'cell-image select').value = image.file_animate;
        this.getFileElement(file, 'cell-description select').value = image.desc_animate;
        this.getFileElement(file, 'cell-link select').value = image.link_animate;
        $H(this.imageTypes)
                .each(
                        function(pair) {
                            if (this.imagesValues[pair.key] == file) {
                                this.getFileElement(file,
                                        'cell-' + pair.key + ' input').checked = true;
                            }
                        }.bind(this));
    },
    getFileElement : function(file, element) {
        var selector = '#' + this.prepareId(file) + ' .' + element;
        var elems = $$(selector);
        if (!elems[0]) {
            try {
                console.log(selector);
            } catch (e2) {
                alert(selector);
            }
        }

        return $$('#' + this.prepareId(file) + ' .' + element)[0];
    },
    getImageByFile : function(file) {
        if (this.getIndexByFile(file) === null) {
            return false;
        }

        return this.images[this.getIndexByFile(file)];
    },
    getIndexByFile : function(file) {
        var index;
        this.images.each( function(item, i) {
            if (item.file == file) {
                index = i;
            }
        });
        return index;
    },
    updateUseDefault : function() {
        if (this.getElement('default')) {
            this.getElement('default').select('input').each(
                    function(input) {
                        $(this.containerId).select(
                                '.cell-' + input.value + ' input').each(
                                function(radio) {
                                    radio.disabled = input.checked;
                                });
                    }.bind(this));
        }

        if (arguments.length == 0) {
            this.container.setHasChanges();
        }
    },
    handleUploadProgress : function(file) {

    },
    handleUploadError : function(fileId) {

    }
};

Answer 2

If you installed SUPEE-8788 this code is deprecated.

I suggest you follow this post in order to make your module SUPEE-8788 compatible: https://magento.stackexchange.com/a/142013/2380