Welcome Guest! You need to login or register to make posts.

Notification

Icon
Error

Options
Go to last post Go to first unread
mmount  
#1 Posted : Tuesday, December 4, 2012 8:17:27 AM(UTC)
mmount

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

This 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
Dmitry  
#2 Posted : Tuesday, December 4, 2012 2:57:04 PM(UTC)
Dmitry

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.
File Attachment(s):
aws-s3.zip (4,459kb) downloaded 31 time(s).
Sincerely yours,
Dmitry Sevostyanov

UserPostedImage Follow Aurigma on Twitter!
thanks 1 user thanked Dmitry for this useful post.
mmount on 12/5/2012(UTC)
mmount  
#3 Posted : Wednesday, December 5, 2012 3:30:08 AM(UTC)
mmount

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
mmount  
#4 Posted : Wednesday, December 5, 2012 5:29:45 AM(UTC)
mmount

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
mmount  
#5 Posted : Wednesday, December 5, 2012 9:04:06 AM(UTC)
mmount

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
Dmitry  
#6 Posted : Wednesday, December 5, 2012 1:09:59 PM(UTC)
Dmitry

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

Sincerely yours,
Dmitry Sevostyanov

UserPostedImage Follow Aurigma on Twitter!
Dmitry  
#7 Posted : Wednesday, December 5, 2012 1:12:35 PM(UTC)
Dmitry

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.
Sincerely yours,
Dmitry Sevostyanov

UserPostedImage Follow Aurigma on Twitter!
Users browsing this topic
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.