1 of 2
1
Simple S3 Uploader (current version: 1.3.2) - improved image resizing algorithm
Posted: 16 July 2010 12:07 PM   [ Ignore ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  1847
Joined  12-18-2008

continued from archived thread: http://expressionengine.com/archived_forums/viewthread/156156/

The Simple S3 Uploader is a file upload field for EE1 and EE2 that stores the files on Amazon S3. It can resize images and generate thumbnails prior to upload. Check out the full feature list and information about this add-on at our site or devot:ee.  This add-on is priced at $29 per license and can be purchased through the devot:ee store.

Documentation:
settings
template tags
release notes

 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: 19 July 2010 02:18 AM   [ Ignore ]   [ # 1 ]  
Summer Student
Total Posts:  10
Joined  02-18-2010

Simple S3 Uploader is so perfect. But I don’t know how to upload file through SAEF. I tried the example form you posted in [EE Forums] Simple S3 Uploader Forum Thread - Archived. It doesn’t work on my web page. I cannot see the file upload control at all - all I can see is the custom field name itself {areaOfInterest}. I noticed that Simple SAEF Enctype is required in SAEF. But it’s only compatiable with EE1. My form is here: here.  I’d appreciate it if you can give me any advice - especially a working example of a form on a web page created using EE2. Thanks in advance!

<link href="{path='css/_ee_saef_css'}" type="text/css" rel="stylesheet" media="screen" /> 



{exp:channel:entry_form channel="{segment_3}" return="forms" preview="site/entry" enctype=“multi”}

{exp
:channel:entries channel="{segment_3}" author_id="CURRENT_USER" status="Open|Closed" show_expired="yes" show_future_entries="yes" use_live_url="no" include_jquery="yes"}

<table border="1">
{custom_fields}
 
<tr>
  <
td>{field_label} {if required}*{/if}</td>
  <
td>
   
{if textarea}
    
<textarea id="{field_name}" name="{field_name}" dir="{text_direction}" cols="50" rows="{rows}">{field_data}</textarea>
   
{/if}
  
   {if textinput}
    
<input type="text" dir="{text_direction}" id="{field_name}" name="{field_name}" value="{field_data}" maxlength="{maxlength}" size="50" />
   
{/if}

   {if pulldown}
    
<select id="{field_name}" name="{field_name}">
     
{options}<option value="{option_value}"{selected}>{option_name}</option>{/options}<br />
    </
select>
   
{/if}

   {if date}
    
<input type="text" id="{field_name}" name="{field_name}" value="{field_data}" maxlength="{maxlength}" size="50" /><br />
   
{/if}

   {if relationship}
    
<select id="{field_name}" name="{field_name}">
     
{options}<option value="{option_value}"{selected}>{option_name}</option>{/options}<br />
    </
select>
   
{/if}

   {if multiselect}
    
<select id="{field_name}" name="{field_name}[]" multiple="multiple">
     
{options}<option value="{option_value}"{selected}>{option_name}</option>{/options}
    
</select>
   
{/if}

   {if checkbox}
    {options}{option_value} 
     
<input type="checkbox" id="{field_name}" name="{field_name}[]" value="{option_value}"{checked} />
    
{/options}
   {
/if}

   {if radio}
    {options}{option_value} 
     
<input type="radio" id="{field_name}" name="{field_name}" value="{option_value}"{checked} />
    
{/options}
   {
/if}

   {if file}
    
<div class="file_set js_hide">
     <
class='filename'><img src="{path:cp_global_img}default.png" alt="default thumbnail" /><br /></p>
     <
class='sub_filename'><a href="#" class="remove_file">Remove File</a></p>
     <
p><input type="hidden" name="{field_name}_hidden" value="{field_data}" /></p>
    </
div>
    <
div class="no_file js_hide">
     <
p><input type="file" name="{field_name}" value="{field_data}" /></p
     <
p><select name="{field_name_directory}">{options}<option value="{option_value}"{selected}>{option_name}</option>{/options}<br /></select></p>
    </
div
    <
div class="modifiers js_show">
     <
class='sub_filename'><a href="#" class="choose_file">Add File</a></p>
    </
div>

   
{/if}

  
</td>
 </
tr>
{/custom_fields}

<input type="hidden" name="status" value="Open" />

</
table>

{areaOfInterest}<br>





<
input type="hidden" name="entry_date" value="{entry_date}" maxlength="23" size="25" />


<
br />
<
input type="submit" name="submit" value="Submit" />
<
input type="button" name="return" value="Return">
<
input type="submit" name="preview" value="Preview" />



{/exp:channel:entry_form} 
Profile
 
 
Posted: 19 July 2010 08:02 AM   [ Ignore ]   [ # 2 ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  1847
Joined  12-18-2008

unfortunately the SAEFs in EE2 don’t have the functionality that the SAEFs in EE1 had when paired with FieldFrame. Currently there is no support for using {custom_field_name} in EE2 for third party fieldtypes.

On the upside, it isn’t too difficult to hard code the necessary functionality for the Simple S3 Uploader fieldtype, since it’s pretty much just a regular old file upload field.

On my test installation, my Simple S3 Uploader custom field is field_id_6 and this is the minimum code to get it to work in a SAEF:

{exp:channel:entry_form channel="content" return="/"}
    
<input type="text" name="title" />

    <
input type="file" name="field_id_6" class="simple_s3_upload" />
    <
input type="hidden" name="field_id_6[filename]" value="" />

    <
input type="submit" name="submit" value="Submit" />
{/exp:channel:entry_form} 

Note that this is only for the initial entry.  A full-blown edit form is going to be somewhat trickier.

Hope this helps.
-Ty

 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: 19 July 2010 09:44 AM   [ Ignore ]   [ # 3 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  724
Joined  11-11-2006

Hi Ty, so if the upload field is hard coded as you pointed out above, will all the other features of S3 Uploader work as normal? Or have I misunderstood?

Thanks
Lee

Profile
 
 
Posted: 19 July 2010 09:51 AM   [ Ignore ]   [ # 4 ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  1847
Joined  12-18-2008

everything should work if you hardcode like this.  you’ll need different code to support editing the entry via standalone edit form, but this will get the file uploaded to S3 and the data will be saved to the entry properly for use in templates.

that said, I tested this for about 5 minutes, so if there are problems please let me know smile

 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: 19 July 2010 10:08 AM   [ Ignore ]   [ # 5 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  724
Joined  11-11-2006

I’ll need to buy it first smile but it’s looking like I will be. Is there any type of file upload progress indicator to let the user know something is going or to indicate when a file has finished uploading?

Profile
 
 
Posted: 19 July 2010 10:16 AM   [ Ignore ]   [ # 6 ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  1847
Joined  12-18-2008

nope, PHP doesn’t give us file upload progress info by default. The workarounds require software installation and PHP recompliation that most users won’t be able to accomplish, flash (eww), or perl scripts.  Currently I’ve also avoided the javascript requirement, though I’m slightly less opposed to bending on that if there’s a good reason.

 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: 19 July 2010 09:08 PM   [ Ignore ]   [ # 7 ]  
Summer Student
Total Posts:  10
Joined  02-18-2010

Currently there is no support for using {custom_field_name} in EE2 for third party fieldtypes.

Thanks for your speedy response.  It looks like Brandon Kelly has only just created P&T Field Pack for EE2

Pardon the ignorance of a newbie however do you think that this will enable us to use a third party field type?

Profile
 
 
Posted: 19 July 2010 10:25 PM   [ Ignore ]   [ # 8 ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  1847
Joined  12-18-2008

nope, don’t believe that changes anything with respect to SAEFs in EE2.

 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: 20 July 2010 11:07 AM   [ Ignore ]   [ # 9 ]  
Administrator
Avatar
RankRankRankRank
Total Posts:  1758
Joined  05-17-2002
ender - 16 July 2010 04:07 PM

(Apologies to EllisLab for posting this here but after getting half a dozen people asking for updates via PM or the contact form at our site all wondering how to talk about this add-on now that the previous forum thread got archived, it’s pretty clear that people were thrown for a bit of a loop.)

No need to apologize. In fact, your post and this discussion are exactly what we are hoping to see in the Community News forums. The way this post/discussion is going is exactly how we hoped. It gives you a place to tell people about the add-on and answer questions, have discussions, etc… We want to encourage conversation and learning, we just ask that actual tech support be done on your own site or privately.

 Signature 
Profile
MSG
 
 
Posted: 20 July 2010 11:12 AM   [ Ignore ]   [ # 10 ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  1847
Joined  12-18-2008

edited original post now that this thread has a permanent home in the proper forum location.

 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: 23 July 2010 02:25 AM   [ Ignore ]   [ # 11 ]  
Summer Student
Total Posts:  10
Joined  02-18-2010

Now I have another question. I set image width as 200 and image height as 100 in S3 settings. Then I uploaded image whose original size is 600*400 and opened the image by using tag {custom_field_name} and {custom_field_name:authenticated_url). The image size wasn’t changed. I also changed thumbnail width and height, and size of thumbnail wasn’t changed either. Why image resize setting doesn’t work?
The webpage is here

{exp:channel:entries entry_id="37"}

Primary tag
<br>
<
img src="{areaOfInterest}"><br>

Authenticated URL:<br>
<
img src='{areaOfInterest:authenticated_url minutes="60" secure="no"}'><br>

Thumnail:<br>
<
img src="{areaOfInterest:thumb_url}"><br>

{/exp:channel:entries} 

Snapshot of settings is attached. Can you have a look at it? Thank you in advance.

Image Attachments
sample.gif
Click thumbnail to see full-size image
Profile
 
 
Posted: 23 July 2010 07:25 AM   [ Ignore ]   [ # 12 ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  1847
Joined  12-18-2008

I copied your settings to my test installation and it resized the image as expected. We’ll have to take this discussion to someplace other than the forums since EllisLab doesn’t want third party support taking place in these threads now. I’ll follow up with you via PM and we can take it from there.

 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: 29 July 2010 08:21 AM   [ Ignore ]   [ # 13 ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  1847
Joined  12-18-2008

Just released version 1.3.2 to the devot:ee store.

I was surfing the web and came across this article discussing some of the finer points of color management and gamma error in image manipulation software. Long story short, version 1.3.2 of the simple s3 uploader now has, in my opinion, the best image resizing algorithm available to ExpressionEngine.  All image resizing now is done using proper color management, and PNG-24 images will have their alpha layer transparency preserved as well.

 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: 11 August 2010 08:54 PM   [ Ignore ]   [ # 14 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  167
Joined  04-25-2008

Hello,

This seems to be the (almost) perfect solution for uploading to S3 in EE. I just have a question.

Is it possible to retrieve the file using CloudFront instead of getting the file directly from the bucket? I’ve been looking in the Settings and in the Documentation but I didn’t find anything about this.

Also, what happens is someone uploads a really huge file? Like a 400MB video, for example. Does it depend on my PHP upload limit?

Profile
 
 
Posted: 11 August 2010 10:24 PM   [ Ignore ]   [ # 15 ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  1847
Joined  12-18-2008

you can set cloudfront to distribute your S3 bucket(s), you’d set this up in the cloudfront console.  when it comes time to output the cloudfront url in your templates you’d use the :s3_filename tag (http://emarketsouth.com/add-ons/simple-s3-uploader/template-tags/) to build the proper url (using the cloudfront domain you set up in the console).

uploading a really huge file is supported to the extent that your server’s php.ini/.htaccess settings allow it (though you can have it limited further by setting a file size limit in the S3 uploader field settings).

 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: 11 August 2010 10:29 PM   [ Ignore ]   [ # 16 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  167
Joined  04-25-2008
ender - 12 August 2010 02:24 AM

when it comes time to output the cloudfront url in your templates you’d use the :s3_filename tag (http://emarketsouth.com/add-ons/simple-s3-uploader/template-tags/) to build the proper url (using the cloudfront domain you set up in the console).

Ah, of course. I didn’t think of this approach.  shut eye

Now excuse me if I’m being ignorant (it’s 4am here and I’m tired), but can I get the :s3_filename AND the :authenticated_url to work at the same time? As in, getting a signed CloudFront URL.

Thank you for your reply. I guess I’ll leave video uploading to the FTP then.

Profile
 
 
Posted: 12 August 2010 08:20 AM   [ Ignore ]   [ # 17 ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  1847
Joined  12-18-2008

cloudfront supports serving private content.  this document describes it better than I could.

basically the :authenticated_url tag is just for authenticating downloads from the bucket.  It cannot be used to authenticate cloudfront urls at this time.

In order to get this to work, you’ll need to create the cloudfront origin access identity, give it access to your S3 files, set up the distribution, remove public read permission from that distribution, create a key pair, require signed urls, and create a signed url for anyone you want to give access to the file each time they request it.

All of this is very possible, it’s just not built into this add-on at this time. You can still use the add-on to upload the files to your bucket.

Let me know if there’s anything I can do to assist.

 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: 20 August 2010 09:31 AM   [ Ignore ]   [ # 18 ]  
Summer Student
Total Posts:  15
Joined  03-31-2010

Hi all,

Just bought this, hoping it will help my project but I can’t seem to get it to work either adding an image file directly though the publish area or from a SAEF.

Do I need the Simple SAEF Enctype extension? I am using EE 2.1.

When I upload an image via the publish entry cpanel area once submitted the view entry preview EE shows outputs this: czowOiIiOw==

Any ideas what I am doing wrong?

Phil

Profile
 
 
   
1 of 2
1