Simple SAEF Enctype: Extension created for use with nGen File Field and SAEF
Posted: 07 July 2009 02:04 PM   [ Ignore ]  
Grad Student
Avatar
Rank
Total Posts:  63
Joined  03-25-2009

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.  smile

File Attachments
ext.simple_saef_enctype.php.zip  (File Size: 2KB - Downloads: 451)
 Signature 

Pura Vida
John D Wells, Lead Developer
http://onedarnleyroad.com | http://johndwells.com

Profile
 
 
Posted: 09 July 2009 10:47 AM   [ Ignore ]   [ # 1 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  304
Joined  01-02-2008

Nice work, John!

 Signature 

pixelandtonic.com    @brandonkelly

Profile
 
 
Posted: 09 July 2009 12:33 PM   [ Ignore ]   [ # 2 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  519
Joined  10-09-2007

Excellent, thanks!  It will be abundantly used:)

 Signature 

Vancouver Travel & Tourism http://www.discovervancouver.com/

Profile
 
 
Posted: 09 July 2009 03:08 PM   [ Ignore ]   [ # 3 ]  
Grad Student
Avatar
Rank
Total Posts:  51
Joined  05-03-2007

John…very nice. You should to submit this on devot-ee.com

 Signature 

Jason Clewell
http://www.clewell.net
———————————

AIM: jasonwclewell
GTalk: jason.clewell@gmail
http://www.twitter.com/jclewell

Profile
 
 
Posted: 09 July 2009 04:11 PM   [ Ignore ]   [ # 4 ]  
Grad Student
Avatar
Rank
Total Posts:  63
Joined  03-25-2009

Cheers everybody.

Hadn’t even thought to submit to Devot:ee, doing now…

 Signature 

Pura Vida
John D Wells, Lead Developer
http://onedarnleyroad.com | http://johndwells.com

Profile
 
 
Posted: 09 July 2009 05:22 PM   [ Ignore ]   [ # 5 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  180
Joined  06-27-2007

That way Devot:ee can charge us to read about your experience..  rolleyes

But seriously thanks so much for sharing- you just solved several issues I was having.

 Signature 

twitter

Profile
 
 
Posted: 24 July 2009 11:35 AM   [ Ignore ]   [ # 6 ]  
Grad Student
Rank
Total Posts:  90
Joined  06-15-2005

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

 Signature 
Profile
 
 
Posted: 01 October 2009 06:12 PM   [ Ignore ]   [ # 7 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  857
Joined  03-02-2006
eyevariety - 09 July 2009 09:22 PM

That way Devot:ee can charge us to read about your experience..  rolleyes

Eh? You don’t have to pay to browse add-ons at devot-ee.  hmmm

 Signature 

John Faulds - Freelance Web Designer | Member of EE Pro Network

Profile
 
 
Posted: 16 October 2009 09:29 AM   [ Ignore ]   [ # 8 ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  1847
Joined  12-18-2008

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”.

 Signature 

EE Pro Network
eMarketSouth - full service web design, development, and SEO
ExpressionEngine consulting services - SQL queries, .htaccess rewrites, template optimization, jQuery/AJAX, and more!
our add-ons - please “favorite” and rate our products on devot:ee if you like our work. smile

Profile
 
 
Posted: 12 November 2009 08:27 PM   [ Ignore ]   [ # 9 ]  
Summer Student
Total Posts:  6
Joined  02-05-2008
ender - 16 October 2009 01:29 PM

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”.

THANK YOU! You just saved me from a world of grief!

Profile
 
 
Posted: 17 November 2009 11:23 PM   [ Ignore ]   [ # 10 ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  1753
Joined  03-26-2006
eyevariety - 09 July 2009 09:22 PM

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.

 Signature 

ryan masuga
—————
Masuga Design | devot:ee
@masuga | @masugadesign | @devot_ee

Profile
 
 
Posted: 03 December 2009 04:03 PM   [ Ignore ]   [ # 11 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  143
Joined  07-31-2007

Thanks, John. I’m making good use of this extension.

 Signature 

Burst Creative | Member EE Pro Network
Beautiful, usable, Expression Engine powered sites for small to mid-sized businesses.

Profile
 
 
Posted: 18 January 2010 04:49 PM   [ Ignore ]   [ # 12 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  132
Joined  02-24-2006

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:

<p><label>Main Photo:</label><br />
<
input type="file" name="field_id=17" />
<
input type="hidden" name="field_id=17[file_name]"  />
<
input type="hidden" name="field_id=17[existing]"  />
</
p>

<
p><label for="letter-content">Additional Photos:</label><br />
<
input type="file" name="field_id=18" />
<
input type="hidden" name="field_id=18[file_name]"  />
<
input type="hidden" name="field_id=18[existing]"  />
</
p


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?

Profile
 
 
Posted: 29 January 2010 11:05 AM   [ Ignore ]   [ # 13 ]  
Lab Assistant
RankRank
Total Posts:  115
Joined  11-13-2008

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 grin grin

Thank you.

Profile