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 : Saturday, September 19, 2015 4:55:13 AM(UTC)
mmount

Rank: Advanced Member

Groups: Member
Joined: 11/30/2012(UTC)
Posts: 61

Thanks: 6 times
Hi,

I am attempting to replace my java uploader with html5. We upload directly to S3 then callback to record the filenames and details in our database. When we upload we change the filename to a GUID to avoid overwriting existing files. To prepare to do so I use this javascript code at the end of the page:
Code:
<script type="text/javascript">
    // Save keys in temporary array
    var uploader = $au.imageUploaderFlash('html5Uploader');
    for (var i = 0, imax = uploader.converters().count() ; i < imax; i++) {
      fileKeys.push(as3.converters().get(i).key());
    }
  </script>

fileKeys is declared in the HEAD as var fileKeys[];

In the java version we assigned the AmazonS3Extender into the as3 variable like thus:
Code:
    private void OnPreRenderComplete(object sender, EventArgs e)
    {
      // Get the preRender client event handler
      var preRender = html5Uploader.ClientEvents.First(ev => ev.EventName == ClientEventNames.PreRender);
      // Add a page variable to reference the amazonS3Extender
      preRender.HandlerName = preRender.HandlerName.Insert(preRender.HandlerName.Length - 1, " window.as3 = as3;");
    }

This does not appear to work for the html5 uploader. How do I gain access to the extender?

Thanks,

Mike
Andrew  
#2 Posted : Sunday, September 20, 2015 8:30:22 PM(UTC)
Andrew

Rank: Advanced Member

Groups: Member, Administration
Joined: 8/2/2003(UTC)
Posts: 870

Thanks: 2 times
Was thanked: 26 time(s) in 26 post(s)
Well, in HTML5 uploader you can receive an instance of the extender from the imageUploadeFlash, like this:

Code:
<script type="text/javascript">
    // Save keys in temporary array
    var uploader = $au.imageUploaderFlash('html5Uploader');
    var as3 = uploader.amazonS3Extender();
    for (var i = 0, imax = uploader.converters().count() ; i < imax; i++) {
      fileKeys.push(as3.converters().get(i).key());
    }
  </script>


However in this particular case you can assign guid instead of the file name much easier. Just set ${guid} (instead of ${filename}) as a key for the extender's key. It will create a unique name for the file name (the extension should be preserved).

Hope this helps.
mmount  
#3 Posted : Monday, September 21, 2015 5:47:54 AM(UTC)
mmount

Rank: Advanced Member

Groups: Member
Joined: 11/30/2012(UTC)
Posts: 61

Thanks: 6 times
This seems to return null for as3.

0x800a138f - JavaScript runtime error: Unable to get property 'converters' of undefined or null reference

I think I still need this javascript because it also is used to post back details of the upload (including original filename) to out internal server when all the files have been uploaded to S3.

Mike

mmount  
#4 Posted : Monday, September 21, 2015 10:56:15 AM(UTC)
mmount

Rank: Advanced Member

Groups: Member
Joined: 11/30/2012(UTC)
Posts: 61

Thanks: 6 times
If I use the ${guid} in the amazonS3Extender().converters() instead of ${filename} how do I know what guid was used? Is it the same one as the files.guid() property?
Andrew  
#5 Posted : Monday, September 21, 2015 9:15:43 PM(UTC)
Andrew

Rank: Advanced Member

Groups: Member, Administration
Joined: 8/2/2003(UTC)
Posts: 870

Thanks: 2 times
Was thanked: 26 time(s) in 26 post(s)
Originally Posted by: mmount Go to Quoted Post
This seems to return null for as3.

0x800a138f - JavaScript runtime error: Unable to get property 'converters' of undefined or null reference


It may mean that this code is running before amazonS3Extender is created and initialized or $au.imageUploaderFlash('your-id') did not find the uploader (see explanations below).

I think it makes sense to do it in the initComplete event handler. In other words, you should wrap your code to a function:

Code:
<script type="text/javascript">
var myInitComplete = function() { 
    var uploader = this;
    var as3 = uploader.amazonS3Extender();
    for (var i = 0, imax = uploader.converters().count() ; i < imax; i++) {
      fileKeys.push(as3.converters().get(i).key());
    }
}
</script>


And then specify this function name in the control:

Code:
	    <aur:ImageUploaderFlash ID="html5Uploader" runat="server"
			<ClientEvents>
					<aur:ClientEvent EventName="InitComplete" HandlerName="myInitComplete" />
			</ClientEvents>
	    </aur:ImageUploaderFlash>


Please note that the ID of the uploader in JavaScript may differ from the ID specified in ASP.NET code (as usual it prepends some stuff like "ctl00_content_"). That's why when you need to receive the uploader instance, you should not specify it like $au.imageUploaderFlash('your_aspnet_id'). Instead, you should use the ClientID property of the control: $au.imageUploaderFlash(<%= Html5Uploader.ClientID %>). Also, in event handlers, you can get a reference to the uploader using this, like in the code snippet above.

Quote:
I think I still need this javascript because it also is used to post back details of the upload (including original filename) to out internal server when all the files have been uploaded to S3.


BTW, why not to store original filenames as Amazon S3 Metadata? You can easily configure uploader to send them along with files. Our demo application illustrates how to send width/height, but it is easy to do it for the file names as well:

http://demo.aurigma.com/...nS3Metadata/Default.aspx

Here you can find a documentation how to do it:

http://www.aurigma.com/docs/us8...torages-uif.htm#metadata

Quote:
If I use the ${guid} in the amazonS3Extender().converters() instead of ${filename} how do I know what guid was used? Is it the same one as the files.guid() property?


No, unlike of file.guid(), the ${guid} produces really unique identifiers (file.guid() are unique only while a page is loaded and they are "human-readable").

If you explain a bit more detailed how you are using your AWS storage and why you need to post back a list of files you have uploaded to a server, I could suggest an optimal way to do it.

Edited by user Monday, September 21, 2015 9:21:07 PM(UTC)  | Reason: Not specified

mmount  
#6 Posted : Tuesday, September 22, 2015 1:38:15 PM(UTC)
mmount

Rank: Advanced Member

Groups: Member
Joined: 11/30/2012(UTC)
Posts: 61

Thanks: 6 times
Moving the code to the InitComplete got rid of the error.

Now I'm fighting with the restrictions FileMask. It seems to be rejecting the files I am picking. Here is how I have it set:

<Restrictions FileMask="[['Images', '.jpg;*.jpeg;*.jpe']]" MinImageHeight="200" MinImageWidth="200" MaxFileCount="999" />

Have I done something wrong here?

Also, when I resized in the java uploader I could set the target resolution (I set it to 100dpi). Is there a way to do that in the Html5 uploader?

Thanks, Mike
mmount  
#7 Posted : Friday, September 25, 2015 10:20:42 AM(UTC)
mmount

Rank: Advanced Member

Groups: Member
Joined: 11/30/2012(UTC)
Posts: 61

Thanks: 6 times
Originally Posted by: mmount Go to Quoted Post
<Restrictions FileMask="[['Images', '.jpg;*.jpeg;*.jpe']]" MinImageHeight="200" MinImageWidth="200" MaxFileCount="999" />


I found that I had accidentally deleted the first * from *.jpg :(

Mike


Andrew  
#8 Posted : Friday, October 2, 2015 9:50:23 AM(UTC)
Andrew

Rank: Advanced Member

Groups: Member, Administration
Joined: 8/2/2003(UTC)
Posts: 870

Thanks: 2 times
Was thanked: 26 time(s) in 26 post(s)
Michael,

Do you mean that you need an equivalent to this param?

$au.converter().thumbnailResolution()

At this moment, HTML5 uploader does not support it. If you feel that it is important to specify the resolution in JPEG metadata, please let me know and we will see if it is possible to add.
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.