I want to limit 5 images per product at backend. So admin won't be able to upload more than 5 images. How can I achieve this, any idea?

public function saveAction()
    /* START: Handle the max images per product */
    $data = $this->getRequest()->getPost();
    $images = Mage::helper('core')->jsonDecode($data['product']['media_gallery']['images']);
    if($totalImages = count($images)) {
        $maxPhotoPerProduct = 5;
        if($totalImages > $maxPhotoPerProduct) {
            Mage::getSingleton('core/session')->addError($this->__('Max. number of images per product reached, extra images have been removed'));
        $_allowedImages = array_slice($images, 0, $maxPhotoPerProduct);
        //Return the allowed images back to the $_POST
        $_POST['product']['media_gallery']['images'] = Mage::helper('core')->jsonEncode($_allowedImages);
    /* END: Handle the max images per product */
    //Zend_Debug::dump(Mage::helper('core')->jsonDecode($_POST['product']['media_gallery']['images'])); exit;
    //Run standard saveAction()

“app/code/core/Mage/Adminhtml/controllers/Catalog/ProductController.php” controller by using the syntax shown below in Mymodule config.xml file.

                        <sintax before="Mage_Adminhtml">Mycompany_Mymodule_Adminhtml</sintax>
  • Please read my question properly. I'm asking solution for Magento2 version. :) – Deeps Nov 16 '16 at 14:27

When image is uploaded in the product-images section, add: action of module-backend\view\adminhtml\web\js\media-uploader.js is triggered. So we can override this file's add function to control this.

Create a module and after specifying your etc/module.xml and registration.php files

1) Map the media-uploader.js file in your module's requirejs-config.js with your overridden file as follow.

// app\code\[Namespace]\[ModuleName]\view\adminhtml\requirejs-config.js
    var config = {
        map: {
            '*': {

2) Override the media-uploader.js component by copying it to your module and update the add function as follow.

add: function (e, data) {

    // Get the number of images already added to the product
    var numberOfImages = $('#media_gallery_content').children('.image.item:visible').length;

    // Number of new uploading images
    var uploadingImagesLength = data.originalFiles.length;

    //console.log('Total Number of images already uploaded:' + numberOfImages);

    if( (numberOfImages + uploadingImagesLength) > 5 ) {
            content: $.mage.__('You cannot upload images more than 5.')
    } else {
        $.each(data.files, function (index, file) {
            fileSize = typeof file.size == 'undefined' ?
                $.mage.__('We could not detect a size.') :

            data.fileId = Math.random().toString(33).substr(2, 18);

            tmpl = progressTmpl({
                data: {
                    name: file.name,
                    size: fileSize,
                    id: data.fileId


        $(this).fileupload('process', data).done(function () {

in this function, you can check the number of already existing images and also all the information of images uploading in data object.

Or you can use other functions of this component as well to control this!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.