Rank: Advanced Member
Groups: Member
Joined: 11/30/2012(UTC)
Posts: 61
Thanks: 6 times
|
Hi, I have a support ticket open for this currently but am posting here for two reasons; maybe someone already knows how to do these things and can help sooner than support can, and when resolved it can help other people. I'm trying to accomplish a few things: 1. I want to rename each file before it is uploaded to the S3 account 2. I want to update a database after uploading images with some details about the image (namely the upload filename and exif date). I have tried to adapt the PHP code in the FAQ: HOWTO-Rename-files-before-uploading-them-to-Amazon-S3-storageThis has been successful except for the part where I actually rename the file in the BeforeSendRequest event. Here is the javascript code (the createUUID function I have exactly as the FAQ in a linked script file): Code: <script type="text/javascript">
var files;
var fileIndex;
var converterIndex;
function DoBeforeUpload() {
files = [];
var ff = this.files();
// Loop through files and generate unique names for each file
for (var i = 0, imax = ff.count() ; i < imax; i++) {
var origName = ff.get(i).name();
var newName = createUUID() + '.jpg';
// Somehow, I think I need to get the ExifDateTime here but there is no
// metadata property
var exifDateTime; // = ff.get(i).metadata().exif('ExifDateTime');
files.push({
origName: origName,
newName: newName,
exifDateTime: exifDateTime
});
}
}
function DoBeforePackageUpload(index) {
fileIndex = index;
converterIndex = 0;
}
function DoBeforeSendRequest() {
// This gets called at all the right times but I think I'm not getting
// the correct amazonS3Extender
var s3 = $au.amazonS3Extender(this);
var newName = files[fileIndex].newName;
var key = s3.converters().get(converterIndex).key();
var newKey = key.replace(/\$\{filename\}/, newName);
s3.converters().get(converterIndex).key(newKey);
++converterIndex;
}
function DoAfterUpload() {
// Here is where I think I would do a postback to update the database
// I would use info in the files array to create my database records
}
</script>
Additionally, I add the following ClientEvents (I had to do this manually because although there is a collection in the properties editor - it does not appear that changes get written to the file): Code: <ClientEvents>
<cc1:ClientEvent EventName="BeforeUpload" HandlerName="DoBeforeUpload" />
<cc1:ClientEvent EventName="BeforeSendRequest" HandlerName="DoBeforeSendRequest" />
<cc1:ClientEvent EventName="BeforePackageUpload" HandlerName="DoBeforePackageUpload" />
<cc1:ClientEvent EventName="AfterUpload" HandlerName="DoAfterUpload" />
</ClientEvents>
I have added comments to the javascript code where I think I'm heading or going wrong. Any wisdom? Thanks, Mike
|
|
|
|
|
|
Rank: Advanced Member
Groups: Member, Administration, Moderator
Joined: 8/3/2003(UTC)
Posts: 1,070
Thanks: 1 times
Was thanked: 12 time(s) in 12 post(s)
|
Hello, I have already replied you in the support ticket. I decided to attach the sample application illustrating the requested functionality here too. Maybe it will be helpful for somebody in the future. |
|
|
 1 user thanked Dmitry for this useful post.
|
|
|
|
Rank: Advanced Member
Groups: Member
Joined: 11/30/2012(UTC)
Posts: 61
Thanks: 6 times
|
Thank you Dmitry - I'm not sure I would have ever guessed the prerender code in the .cs file :)
Is there someplace I can grab the ExifDateTime in this process?
Mike
|
|
|
|
|
|
Rank: Advanced Member
Groups: Member
Joined: 11/30/2012(UTC)
Posts: 61
Thanks: 6 times
|
To simplify for other folks: To do the filename change for S3 we need to add a few lines of code to the aspx.cs file and add some javascript code to the aspx file. photos_upload.aspx (see javascript sections at top and bottom of code): Code:<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="photos_upload.aspx.cs" %>
<%@ Register Assembly="Aurigma.ImageUploader" Namespace="Aurigma.ImageUploader" TagPrefix="cc1" %>
<%@ Register Assembly="Aurigma.ImageUploader" Namespace="Aurigma.ImageUploader.AmazonS3" TagPrefix="cc1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%">
<head runat="server">
<title>Photos</title>
<script type="text/javascript">
var fileKeys = [];
var files;
var fileIndex;
var converterIndex;
function createUUID()
{
// Generate RFC4122 compliant UUID
// Reference: http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript
var mask = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx';
var result = mask.replace(/[xy]/g, function (c) {var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8); return v.toString(16);});
return result;
}
function DoBeforeUpload() {
files = [];
var ff = this.files();
// Loop through files and generate unique names for each file
for (var i = 0, imax = ff.count() ; i < imax; i++) {
var origName = ff.get(i).name();
var newName = createUUID() + '.jpg';
files.push({
origName: origName,
newName: newName,
});
}
}
function DoBeforePackageUpload(index) {
fileIndex = index;
converterIndex = 0;
}
function DoBeforeSendRequest() {
var newName = files[fileIndex].newName;
var key = fileKeys[converterIndex];
var newKey = key.replace(/\$\{filename\}/, newName);
as3.converters().get(converterIndex).key(newKey);
++converterIndex;
}
function DoAfterUpload() {
// Callback and pass files array to update your database here
}
</script>
</head>
<body style="height: 100%; margin: 0px">
<form id="form1" runat="server" style="height: 100%">
<div style="height: 100%; overflow-y: hidden ! important">
<cc1:Uploader ID="Uploader1" runat="server" Height="100%" Width="100%" LicenseKey="<%$ appSettings: aurigma.LicenseKey %>" BorderStyle="None" EnableFileViewer="True">
<ActiveXControl ClassId="" ProgId=""></ActiveXControl>
<Converters>
<cc1:Converter ThumbnailCopyExif="True" ThumbnailHeight="1500" ThumbnailResizeQuality="High" ThumbnailResolution="100" ThumbnailWidth="1500" Mode="*.*=Thumbnail" />
<cc1:Converter ThumbnailHeight="600" ThumbnailResizeQuality="High" ThumbnailResolution="100" ThumbnailWidth="600" Mode="*.*=Thumbnail" />
<cc1:Converter ThumbnailHeight="175" ThumbnailResizeQuality="High" ThumbnailResolution="100" ThumbnailWidth="175" Mode="*.*=Thumbnail" />
</Converters>
<ClientEvents>
<cc1:ClientEvent EventName="BeforeUpload" HandlerName="DoBeforeUpload" />
<cc1:ClientEvent EventName="BeforeSendRequest" HandlerName="DoBeforeSendRequest" />
<cc1:ClientEvent EventName="BeforePackageUpload" HandlerName="DoBeforePackageUpload" />
<cc1:ClientEvent EventName="AfterUpload" HandlerName="DoAfterUpload" />
</ClientEvents>
</cc1:Uploader>
<cc1:AmazonS3Extender runat="server" ID="AmazonS3Extender1" TargetControlID="Uploader1"
AWSAccessKeyId="<%$ appSettings: s3.AccessKeyId %>"
Bucket="<%$ appSettings: s3.Bucket %>"
SecretAccessKey="<%$ appSettings: s3.SecretAccessKey %>"
PolicyExpiration="6000">
<cc1:FileSettings Acl="public-read" Key="large/${filename}" ContentType="image/jpeg">
</cc1:FileSettings>
<cc1:FileSettings Acl="public-read" Key="medium/${filename}" ContentType="image/jpeg">
</cc1:FileSettings>
<cc1:FileSettings Acl="public-read" Key="small/${filename}" ContentType="image/jpeg">
</cc1:FileSettings>
</cc1:AmazonS3Extender>
<script type="text/javascript">
var uploader = $au.uploader('Uploader1');
for (var i = 0, imax = uploader.converters().count(); i < imax; i++) { fileKeys.push(as3.converters().get(i).key()); }
</script>
</div>
</form>
</body>
</html>
photos_upload.aspx.cs: Code: public partial class photos_upload : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
this.PreRenderComplete += new EventHandler(OnPreRenderComplete);
}
private void OnPreRenderComplete(object sender, EventArgs e)
{
// Expose as3 variable to global
var preRender = Uploader1.ClientEvents.First(ev => ev.EventName == ClientEventNames.PreRender);
preRender.HandlerName = preRender.HandlerName.Insert(preRender.HandlerName.Length - 1, "window.as3 = as3;");
}
}
Hopefully this helps someone in the future. Thanks Dmitry and developers for providing this example. Mike
|
|
|
|
|
|
Rank: Advanced Member
Groups: Member
Joined: 11/30/2012(UTC)
Posts: 61
Thanks: 6 times
|
Dmitry,
Out of curiousity, all your examples for generating a unique filename involve using the createUUID javascript function, but I noticed that the files().get(i) has a guid method that returns a guid for that file. Is there a reason not to just use that guid for the filename?
Thanks,
Mike
|
|
|
|
|
|
Rank: Advanced Member
Groups: Member, Administration, Moderator
Joined: 8/3/2003(UTC)
Posts: 1,070
Thanks: 1 times
Was thanked: 12 time(s) in 12 post(s)
|
Mike, Quote:Is there someplace I can grab the ExifDateTime in this process? Unfortunately this use case is not implemented in the library. ExifDateTime cannot be extracted via JavaScript API at run time. It can only be uploaded to a server which receives uploads (Amazon S3). If you need to store these values in your DB, the only way would be to get them from Amazon S3 after the upload completes. Edited by user Wednesday, December 5, 2012 1:11:29 PM(UTC)
| Reason: Not specified |
|
|
|
|
|
|
|
Rank: Advanced Member
Groups: Member, Administration, Moderator
Joined: 8/3/2003(UTC)
Posts: 1,070
Thanks: 1 times
Was thanked: 12 time(s) in 12 post(s)
|
Quote:Out of curiousity, all your examples for generating a unique filename involve using the createUUID javascript function, but I noticed that the files().get(i) has a guid method that returns a guid for that file. Is there a reason not to just use that guid for the filename? It should work. |
|
|
|
|
|
|
|
Forum Jump
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.