Auto upload multiple images by Magento uploader

Hello everyone, I hope that I can share you more information and useful knowledge when working with Magento, a wonderful platform for shopping cart. My latest project is to upgrade Gallery Media extension and added multiple upload images feature. I tried some different ways by integrating other libraries.

However, now I think that there is no reason to do that cause Magento has already supported a great images uploader used to upload product images. Following this post, you can learn how to use it if you need (and if you are a developer, of course).

In this tutorial, I will use our Gallery Media module as an example. My purpose is to display Magento images uploader (where you can select images and upload) into a tab in backend. In this file, you need to add following code.

public function __construct() {
    parent::__construct();
    $this->setTemplate('gallerymedia/edit/tab/image.phtml');   
  }
protected function _prepareLayout() {
    $this->setChild("uploader", $this->getLayout()->createBlock("adminhtml/media_uploader"));
    $this->getUploader()->getConfig()
			->setUrl(Mage::getModel('adminhtml/url')->addSessionParam()->getUrl('*/*/upload'))
			->setFileField('image')
			->setFilters(array(
				'images' => array(
				'label' => Mage::helper('gallerymedia')->__('Images (.gif, .jpg, .png)'),
				'files' => array('*.gif', '*.jpg','*.jpeg', '*.png')
			)
    ));
    $this->setChild(
			'upload_button',
			$this->getLayout()->createBlock('adminhtml/widget_button')
				->addData(array(
					'id'      => $this->_getButtonId('upload'),
					'label'   => Mage::helper('adminhtml')->__('Upload Files'),
					'type'    => 'button',
					'onclick' => $this->getJsObjectName() . '.upload()'
				))
    );

    $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();
  }
  
public function getUploader() {
    return $this->getChild('uploader');
  }

public function getUploaderHtml() {
    return $this->getChildHtml('uploader');
  }

  public function getJsObjectName() {
    return $this->getHtmlId() . 'JsObject';
  }
public function getAddImagesButton() {
    return $this->getButtonHtml(
    Mage::helper('gallerymedia')->__('Add New Images'),
    $this->getJsObjectName() . '.showUploader()',
    'add',
    $this->getHtmlId() . '_add_images_button'
    );
  }
  public function getUploadButtonHtml()
  {
    return $this->getChildHtml('upload_button');
  }
public function getImagesJson() {

    $_result = array();
    if(count($_result)>0){
      return Zend_Json::encode($_result);
    }
    return '[]';
  }

  public function getImagesValuesJson() {
    $values = array();

    return Zend_Json::encode($values);
  }

public function getImageTypes() {
    $type = array();
    $type['gallery']['label'] = "media";
    $type['gallery']['field'] = "media";

    $imageTypes = array();

    return $type;
  }

  public function getImageTypesJson() {
    return Zend_Json::encode($this->getImageTypes());
  }

  public function getCustomRemove() {
    return $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}}\')'
    ))
    );
  }

  public function getDeleteButtonHtml() {
    return $this->getChildHtml('delete_button');
  }

  public function getCustomValueId() {
    return $this->setChild(
    'value_id',
    $this->getLayout()->createBlock('adminhtml/widget_button')
    ->addData(array(
    'id'      => '{{id}}-value',
    'class'   => 'value_id',
    'type'    => 'text',
    'label'   => Mage::helper('adminhtml')->__('ValueId'),
    ))
    );
  }

  public function getValueIdHtml() {
    return $this->getChildHtml('value_id');
  }

Next step, you will need to edit in image.phtml file. You will create a file which can generate look and field of upload page.

Create a controller file to process upload process.

public function uploadAction(){
    try {
      $uploader = new Mage_Core_Model_File_Uploader('image');
      $uploader->setAllowedExtensions(array('jpg','jpeg','gif','png'));
      $uploader->setAllowRenameFiles(true);
      $uploader->setFilesDispersion(true);
      $result = $uploader->save(
      Mage::getSingleton('gallerymedia/config')->getBaseMediaPath()
      );

      $result['tmp_name'] = str_replace(DS, "/", $result['tmp_name']);
      $result['path'] = str_replace(DS, "/", $result['path']);

      $result['url'] = Mage::getSingleton('gallerymedia/config')->getMediaUrl($result['file']);
      $result['file'] = $result['file'];
      $result['cookie'] = array(
      'name'     => session_name(),
      'value'    => $this->_getSession()->getSessionId(),
      'lifetime' => $this->_getSession()->getCookieLifetime(),
      'path'     => $this->_getSession()->getCookiePath(),
      'domain'   => $this->_getSession()->getCookieDomain()
      );

    } catch (Exception $e) {
      $result = array(
      'error' => $e->getMessage(),
      'errorcode' => $e->getCode());
    }
    Mage::register('data_media',$result);
    $this->getResponse()->setBody(Mage::helper('core')->jsonEncode($result));
  }

It's not easy, I know. But I hope the tutorial can give you a point so that you know where and how to start. Enjoy coding!