Using Mark Huot’s File Upload Extension in Expression Engine

Mark Huot has made my life exponentially easier since I began using Expression Engine.  Many of the projects I have used the robust content management system for have required a little more functionality than EllisLab built into EE.  Mark writes simple and useful extensions to fill some of those needs.

The most useful extension to me has been his File Upload tool.  Its very simple- it adds the ability to create a ‘file’ input type within your custom weblog fields.  This is especially helpful when creating standalone entry forms for users outside of the control panel.  In my case, the user would need to upload up to four images with thier listing on a real estate-themed website.  The same need arose for my next project, a used fashion resale website. 

Installing an extension is a piece of cake- place the extension file in your /system/extensions folder and the language file in your system/language folder.  Login to your control panel, navigate to Admin > Utilities > Extenstions Manager and click ‘Enable’ next to the File Extension.  Once the extension is enabled, click Settings and quickly tab through the settings to set the Server and Site Paths to your site, set your file size preferences, and some other basic admin features, and you are all set. 

Next you’ll want to navigate to Admin > Weblog Administration > File Upload Preferences and setup an upload folder (or more than one) for your uploads.  In my case, I created a folder in the development site (/images/listings/) and set the permissions to read/write (777), then setup upload preferences for it in the control panel.  Again these are paths and file size preferences for the most part.  The File Upload extension’s max file size and dimension settings will take precedence here over similar settings.

To create a file input field, navigate to Admin > Weblog Administration > Custom Weblog Fields and choose a weblog to add a field to.  I chose Listings for my site, then clicked Add/Edit Custom Field and then Create New Custom Field on the page of existing custom fields.  In the Field Type choice list, choose File and in the resulting choice list choose the upload directory you defined in the paragraph above.  Set all your other field attributes and save it.

To test it- navigate to Publish > Your Weblog and create a test entry.  You’ll see the familiar ‘Browse’ button next to your file field and can choose a file.  Submitting the form will upload the file, resize it to your settings, create a thumbnail if needed, rename it if necessary (to avoid overwriting another file of the same name), and store the resulting file name in your weblog field.  If you now go to Edit and view the test entry, you’ll see a thumbnail of the image right in the edit screen, with the ability to remove and replace the image if need be.  Its really slick.

When you want to display the image in an {exp:weblog:entries} loop, simply call the field name as you would with any other custom field.  {image1} works if you had named the field image1, and so on.  Note that the field stores an absolute reference to the files- so a full image tag would be <img src=”{image1}” alt=“Alt Text” />.

To access the thumbnail, simply add _thumb. {image1_thumb} is the thumbnail image for {image1}.

Everything worked great within the control panel, however I couldn’t get the extension working in the stand alone entry forms on my development sites.  After reading through 12 pages of forum discussion about the extension and its incremental upgrades (another wonderful feature of Mark’s development), I finally found what I needed.  To use this in stand alone entry forms, you’ll need to open /system/modules/weblog/mod.weblog_standalone.php and add one line of code.

Around line 1444 you should see the following code:

$data = array(
	'hidden_fields' => $hidden_fields,
	'action'		=> $RET,
	'id'			=> 'entryform'
        );

You’ll want to make it look like this:

$data = array(
	'hidden_fields' => $hidden_fields,
	'action'		=> $RET,
	'id'			=> 'entryform',
	'enctype' 		=> 'multipart/form-data'
	);

This just adds an attribute to the top of the rendered form tag for the stand alone entry form.  For forms without a file upload field, it doesn’t change anything in the function of the form- but it makes all the difference if you want to include a file upload field.  Build your form and testing it should reveal the expected file upload functionality.

I hope this short tutorial has been helpful and get you on your way to more robust web applications!