Posted on August 20, 2013 by Xuan Nguyen in Tutorials
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!
I write module upload images in front-end, but i do not use getImagesJson(), it alert getValue() not define.
Can you help me!
I upload my code in dropbox, you see. https://www.dropbox.com/sh/hxv94nj9bewdosr/iEMZYGOKOS
Can you give us full example, or can you tell us where to put this code. Tnx.
Can we add more then one uploaders?
is there any way to restrict the image size like width and height while uploading