A few days ago I tried to use Uploadify in Magento, but it failed because of jQuery noConflict, so I decided to try Magento’s default uploader, the Flex Uploader.
I couldn’t find a good documentation or tutorial about it, so I did a little research.
In the template you should put:
<?php $htmlId = "someHtmlId"; ?> <div id="<?php echo $htmlId ?>" class="uploader"> <div class="buttons"> <div id="<?php echo $htmlId ?>-install-flash" style="display:none"> <?php echo Mage::helper('media')->__('This content requires last version of Adobe Flash Player. <a href="%s">Get Flash</a>', 'http://www.adobe.com/go/getflash/') ?> </div> </div> <div class="clear"></div> <div id="<?php echo $htmlId ?>-template" class="no-display"> <div id="{{id}}" class="file-row"> <span class="file-info">{{name}} ({{size}})</span> <span class="delete-button"><button id="{{id}}-delete" title="<?php echo $this->__("Delete")?>" type="button" class="scalable delete" onclick="uploader.removeFile('{{fileId}}')" style=""><span><span><span><?php echo $this->__("Delete") ?></span></span></span></button></span> <span class="progress-text"></span> <div class="clear"></div> </div> </div> <div id="<?php echo $htmlId ?>-template-progress" class="no-display"> {{percent}}% {{uploaded}} / {{total}} </div> </div>
Practically this will be the place where the uploader will show you the progress of the upload. You will also need to place a javascript code which should look like:
var uploader = new Flex.Uploader('<?php echo $htmlId ?>', '<?php echo $this->getSkinUrl('media/uploader.swf') ?>', <?php echo $this->getConfigJson('some_parameter_for_you') ?>); uploader.onFilesComplete = function(completedFiles) { completedFiles.each(function(file) { doSomethingWithTheResponse(file.response); uploader.removeFile(file.id); } ); MediabrowserInstance.handleUploadComplete(); } // hide flash buttons if ($('<?php echo $htmlId ?>-flash') != undefined) { $('<?php echo $htmlId ?>-flash').setStyle({float:'left'}); } //specify maximum file upload size (very important!) var maxUploadFileSizeInBytes = 10 * 1024 * 1024; var maxUploadFileSize = '10M';
Attention! $ is Prototype (not jQuery) in the example above.
We will need to configure the Flex uploader in the block class of the template file:
public function getConfigJson($field) { $this->getConfig()->setParams( array( 'form_key' => $this->getFormKey(), "field" => $field ) ); $this->getConfig()->setFileField('Filedata'); $this->getConfig()->setUrl(Mage::getModel('adminhtml/url')->addSessionParam()->getUrl("*/*/upload", array("param1" => "value1"))); $this->getConfig()->setFilters(array( 'pdf documents' => array( 'label' => Mage::helper('adminhtml')->__('Portable Document Format (.pdf)'), 'files' => array('*.pdf') ) )); return Mage::helper('core')->jsonEncode($this->getConfig()->getData()); } public function getConfig() { if(is_null($this->_config)) { $this->_config = new Varien_Object(); } return $this->_config; }
You can specify multiple file filters with the setFilters method, not just one as in my example. Also, with the setUrl method you will set the target URL, which will do the processing of the upload. In my example I set it as */*/upload. This means that in the controller of the current page you will have to set something similar to this:
public function uploadAction() { if (!empty($_FILES)) { $result = array(); try { $uploader = new Varien_File_Uploader("Filedata"); $uploader->setAllowRenameFiles(true); $uploader->setFilesDispersion(false); $uploader->setAllowCreateFolders(true); $path = "put_your_path_to_save_here";//ex. Mage::getBaseDir('base') . DS ."my_uploads" . DS $uploader->setAllowedExtensions(array('pdf')); //server-side validation of extension $uploadSaveResult = $uploader->save($path, $_FILES['Filedata']['name']); $result = $uploadSaveResult['file']; } catch(Exception $e) { $result = array( "error" => $e->getMessage(), "errorCode" => $e->getCode(), "status" => "error" ); } $this->getResponse()->setBody(Mage::helper('core')->jsonEncode($result)); } }
Don’t forget to load the required javascript libraries. You can do it in your layout xml file:
<your_layout> <reference name="head"> <action method="addJs"> <js>lib/flex.js</js> </action> <action method="addJs"> <js>lib/FABridge.js</js> </action> <action method="addJs"> <js>mage/adminhtml/flexuploader.js</js> </action> </reference> </your_layout>
That’s all folks!
It is a pity when looking for more documentation about this, I arrive a my colleagues blog
I have gone through this tutorial but this is not woking. It gives “Flex is not defined and Flex.Uploader is not a constructor”. Please elebroate this.
Make sure that the /js/lib/flex.js is included in the header of the html. If it is already included, then probably there is a javascript error in one of your scripts.
I did include flex.js , still javascript issue is “Flex.Uploader is not a constructor” remain. I did check flex.js,
there is no function defined like flex.Uploader
I’ve searched for the Flex.Uploader. It is declared in /js/mage/adminhtml/flexuploader.js. Try to include that one also.
New issue is occuring i.e. “FABridge is not defined”
Include /js/lib/FABridge.js
How to show uploading bar…?
Well, you could try something like <div id="<?php echo $htmlId ?>-template-progress”><div style=”background-color:green;width:{{percent}}%;”></div></div>
CSS is not add on progress bar?
The flex component will replace the {{percent}} with the current percent, so the previous example should be enough for a very simple progress bar. Try playing with it.
var uploader = new Flex.Uploader(‘”.$htmlId.”‘, ‘”.$this->getSkinUrl(‘media/uploader.swf’).”‘, ‘”.$this->getConfigJson(‘some_parameter_for_you’).”‘);
what do you mean by “some_parameter_for_you” in above line. What should i have to input there?
Well, you are trying to upload a file. In many cases an uploaded file should be connected with something (an article, some ids from the database, etc.). In the getConfigJson method you can specify the POST parameters which will be sent together with the uploaded file. In the example above it means that in uploadAction the $this->getRequest()->getParam(“field”) will have the value “some_parameter_for_you”. You can change the “field” to be also something else in the getConfigJson method. If you don’t need any parameter to be sent, just leave it blank.
Thank you !
You’re welcome!