I’ve spent the afternoon getting nGen File Field to play nicely with SAEF, and thought I’d post my experience here.
The output of the exercise is an extremely basic extension that can easily amend an SAEF to allow for file uploads (by adding enctype=‘multipart/form-data’ to the form’s opening tag). Jump to the end of this post to see an example of usage and download. It is creatively named, Simple SAEF Enctype.
GOAL:
Create a very customised SAEF that contains a simple upload field. The uploaded file is inserted into an nGen field.
BACKGROUND:
As of FieldFrame 1.1.0 and nGen File Field 0.9.8 there has been support for SAEF. Brandon Kelly’s SAEF documentation for FieldFrame says it’s as easy as including the field name in tags, like:
{my_fieldframe_field}
And sure enough, when I inserted the field name that corresponded to the nGen file, it output the entire default CP interface for nGen, i.e. the upload form field plus the “or use an existing file” ability.
This was great, but I’m using my SAEF (plus LogMeIn) to allow anonymous site visitors to upload a video for a competition, so they musn’t be allowed to see what others have uploaded.
And rather than just slap in some CSS to hide the “existing file” bit, I preferred to create the file upload field like so:
<input type="file" name="field_id_35" />
Where “field_id_35” was my nGen field.
SOLUTION:
In two parts:
Part 1 is to include 3 input fields that are required by nGen File Field during SAEF handling:
<input type="file" name="field_id_35" />
<input type="hidden" name="field_id_35[file_name]" />
<input type="hidden" name="field_id_35[existing]" />
The two hidden fields are expected by nGen File Field. Omitting either of these throws up a nasty error, similar to “Undefined index: existing in /ee/system/extensions/fieldtypes/ngen_file_field/ft.ngen_file_field.php on line 371”.
Part 2 involved getting the SAEF to accept file uploads. When using BK’s documented approach, the nGen File Field calls upon a slew of other code to function & display properly, including css and javascript. One of the javascript files, jquery.ngen_file_field.js, uses javascript to retroactively add “enctype=‘multipart/form-data’” to the form so that it can properly handle file uploads.
Because the field type requires jquery to function anyway, this is a reasonable approach. But my front end needs to work with javascript turned off, so this would not do.
So I needed a cleaner way of setting the form’s enctype. By way of Google and Twitter (thanks @drylouvre) I’d found the SAEF Enctype extension, but I disliked the extension because it meant hard-coding the upload location into the extension. And what if I wanted to create a new SAEF form later, uploading this time to a different directory?
Plus, looking into the source of Leevi’s aforementioned LG SAEF File Upload extension, I saw how it was possible to set the form’s enctype without any extra fuss. So I BLATANTLY borrowed code from that extension (thanks Leevi), and baked a simple extension.
The extension is attached: Simple SAEF Enctype. After activating the extension, usage is a snap. Just begin your SAEF form like so:
{exp:weblog:entry_form
weblog="your-weblog"
return="/send/here/after"
enctype="multi"
}
......
PARTING WORDS:
Thanks for even reading this far. Hope it’s useful to someone. ![]()
