Back to blog home

Developer’s module for generic file upload in the admin forms

Over these last two weeks I decided to create a generic Magento uploader module for developers. My motivation came from the fact that in my current project I had to build upload functionality for four different modules and basically I found myself repeating the same (or similar) logic four times.

I decided to use a similar idea to the model behaviors in Cake PHP (the framework I created my first web application in eight years ago). Basically in Cake PHP we can add extra functionality to the models by just adding a simple configuration. For example by adding five lines of configuration we can give a model file upload functionality.

The Magento uploader module

I did my research and finally I created a simple developer's extension that provides file upload functionality for the standard Magento admin forms. To get it to work, the developer just needs to install the module and add some configuration to his own module.

You can download / clone the module from here: https://github.com/Jarlssen/Jarlssen_UploaderComponent

The configuration is pretty simple and it has three mandatory components:

  1. Class name of the model, that we want to give file upload functionality to
  2. The name for the <input type="file"> element
  3. File upload directory (currently relative to the Magento media folder)

The extension also has the option to validate the uploaded file's extension, but this is not mandatory. If you don't use this configuration, then the module will accept any file type.

Step by step example how you can make it work:

  1. Add a dependency in your module: 
    <?xml version="1.0"?>
    <config>
        <modules>
            <MyCompany_MyModule>
                <active>true</active>
                <codePool>local</codePool>
                <depends>
                    <Jarlssen_UploaderComponent />
                </depends>
            </MyCompany_MyModule>
        </modules>
    </config>

     

  2. Add configuration in your custom module's config.xml. For example:
    <global>
    ...
      <jarlssen_uploader_component_config>
          <uploads>
              <MyCompany_MyModule_Model_Item>
                  <thumbnail>
                      <upload_dir>my_module/thumbnail</upload_dir>
                      <allowed_extensions>jpg,png,gif</allowed_extensions>
                      <input_name>thumbnail</input_name>
                  </thumbnail>
                  <pdf>
                      <upload_dir>my_module/pdf</upload_dir>
                      <allowed_extensions>pdf</allowed_extensions>
                      <input_name>pdf_file</input_name>
                  </pdf>
              </MyCompany_MyModule_Model_Item>
          </uploads>
      </jarlssen_uploader_component_config>
    ...
    </global>

     

  3. You should already have the file inputs in your admin form (note that this works with 'type' as 'image' and as 'file') 
    
    <?php
    ...
            $fieldset->addField('thumbnail', 'image', array(
                'name'      => 'thumbnail',
                'label'     => Mage::helper('my_module')->__('Thumbnail'),
                'title'     => Mage::helper('my_module')->__('Thumbnail'),
                'required'  => true
            ));
    
            $fieldset->addField('pdf_file', 'file', array(
                'name'      => 'pdf_file',
                'label'     => Mage::helper('my_module')->__('File'),
                'title'     => Mage::helper('my_module')->__('File')
            ));

     

Conclusion:

Basically the configuration should be applied in this XML path: global/jarlssen_uploader_component_config/uploads/{{Your model full class name}}/{{random identifier or it can be the form input name}}

The module also works with the standard Magento image form inputs, so once the image is uploaded you can also use the delete checkbox. So far on delete the module just erases the saved file path in the database, but the file still stays on the file system.

I think that the module will be interesting for some part of the Magento community, so I decided to write some unit tests (thanks to EcomDev_PHPUnit). In that way I can maintain the module more easily. Feel free to send issue reports or feature requests (I would love to get pull requests with unit tests).

I also have some ideas to extend the module further, like creating functionally to fire a callback function after the files are uploaded. In this way you can execute some post file upload operations, for e.g. saving the file's size in the database or resizing the file if the file is an image.

A teammate asked if I think other people will use it. I can't speak for others, but I will definitely use it in my future projects (credit Ville Köykkä for this question).

Proof reading by Oliver Giles.
Thanks!