Simple SAEF Enctype: Extension created for use with nGen File Field and SAEF
Development and Programming
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. 😊
Nice work, John!
Excellent, thanks! It will be abundantly used:)
John…very nice. You should to submit this on devot-ee.com
Cheers everybody.
Hadn’t even thought to submit to Devot:ee, doing now…
That way Devot:ee can charge us to read about your experience.. :roll:
But seriously thanks so much for sharing- you just solved several issues I was having.
I am having problems following these directions… I posted a new topic here: where to put what in SAEF with nGen
any ideas? thanks… t
That way Devot:ee can charge us to read about your experience.. :roll:
Eh? You don’t have to pay to browse add-ons at devot-ee. 😕
Figured I’d bump this with my experience getting a plain image field to work with a stand-alone edit form:
problem: if your entry already has a file assigned to the ngen file field, submitting an edit form with a blank file input will clear the file solution: the field_id_##[file_name] hidden field needs to have the current value of the ngen file field:
<input type="hidden" name="field_id_7[file_name]" value="{field_id_7}"/>it is important to use {field_id_#} and not {field_name} in this case, because you only want the data, not the whole file field “object”.
Figured I’d bump this with my experience getting a plain image field to work with a stand-alone *edit* form: problem: if your entry already has a file assigned to the ngen file field, submitting an edit form with a blank file input will clear the file solution: the field_id_##[file_name] hidden field needs to have the current value of the ngen file field:it is important to use {field_id_#} and not {field_name} in this case, because you only want the data, not the whole file field “object”.<input type="hidden" name="field_id_7[file_name]" value="{field_id_7}"/>
THANK YOU! You just saved me from a world of grief!
That way Devot:ee can charge us to read about your experience.. :roll:
Excuse me? Sounds like you might have some issues that haven’t been solved yet. Sorry to hear..though I can delete your totally free account if you want.
Thanks, John. I’m making good use of this extension.
John,
Thanks very much for your work on this. For some reason though I’m getting the Disallowed Key Characters error when I try to submit the saef, and it’s stemming from these fields:
<label>Main Photo:</label>
<input type="file" name="field_id=17" />
<input type="hidden" name="field_id=17[file_name]" />
<input type="hidden" name="field_id=17[existing]" />
<label for="letter-content">Additional Photos:</label>
<input type="file" name="field_id=18" />
<input type="hidden" name="field_id=18[file_name]" />
<input type="hidden" name="field_id=18[existing]" />
Also, the “Additional Photos” field is a matrix field, and it looks like the css/js is rendering properly because I can’t +/- rows and is unstyled.
Weird thing is hat none of the above problems occur when I do this according to BK’s instructions …. it’s only after I try to remove the “existing file” link as per your method.
Any idea what could be causing these issues?
Hello all here.
This is working a treat thank you… but I have one extra wish that maybe someone has integrated here.
Just as in the nGen file upload functionality, I need to be able to delete a file and upload a new one in my SAEF edit form. Has anyone been able to do this as well ? Can you please explain how this may work on my SAEF edit form.
Just as background info here, my SAEF form is specifically for Podcasts so within my edit SAEF I have the flvplugin which allows the user to play their uploaded Podcast.
So far on my SAEF edit form all I have is the following below the FLV_Player, but this does not work when I simply use the upload field to upload a new file:
<input type="file" name="{field_id_##}" value="" />
<input type="hidden" name="{field_id_##}[file_name]" value="{field_id_##}"/>
<input type="hidden" name="{field_id_##}[existing]" />Note: The value was given in the hidden file_name field so if the user decides to keep the existing upload the value remains on resubmission of the form.
I now need it so that there is an option to delete the current Podcast and upload another.
Any ideas / support here most welcome 😊 😊
Thank you.
Where do you put the Simple SAEF Enctype file in your EE install?: “ext.saef_enctype.php”