Wrong data passed in JS call - ajax

Question

I have a weird situation. I am working on extending some 3rd party code and this is done by writing our own provider and then configuring the system to use ours instead of the base provider that came with the code. I have the provider(s) working just fine but when I call it from within a JS block, it is not passing the GUID in the JS call. Both the GUID and Response parameters are coming back WAY screwed up!
The main points to look at are:
function addImage(fileName, fileSize, fileType, guid, response) in the ASCX file
addImage('unk', 'unk', 'unk', '<%: myGuid %>', '<%: fullPath %>'); also in the ASCX file
I put in comments in the below code for where to look (// ************* HERE **** HERE **** HERE ************* //)
Our AJAXImageUploader.ascx code:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<List<RainWorx.FrameWorx.DTO.Media.Media>>" %>
<!--<form enctype="multipart/form-data" method="post">-->
<%:Html.GlobalResource("UploadImages")%> (<%:Html.GlobalResource("MaxImagesInformational", SiteClient.Settings["MaxImagesPerItem"]) %>) - <%:Html.GlobalResource("ImageFees",
Html.SiteCurrency(AccountingClient.GetAllFeeProperties().Where(fp => fp.Processor.Equals("RainWorx.FrameWorx.Providers.Fee.Standard.ImageCount") &&
fp.Event.Name.Equals((string)ViewData["Event"]) &&
fp.ListingType.Name.Equals((string)ViewData["ListingType"]) &&
fp.Name.Equals("FirstImage")).Single().Amount),
Html.SiteCurrency(AccountingClient.GetAllFeeProperties().Where(fp => fp.Processor.Equals("RainWorx.FrameWorx.Providers.Fee.Standard.ImageCount") &&
fp.Event.Name.Equals((string)ViewData["Event"]) &&
fp.ListingType.Name.Equals((string)ViewData["ListingType"]) &&
fp.Name.Equals("AdditionalImages")).Single().Amount)
)%>
<input type="file" id="photo" name="photo" />
<!--</form> -->
<script type="text/javascript">
// ************* HERE **** HERE **** HERE ************* //
// ************* HERE **** HERE **** HERE ************* //
function addImage(fileName, fileSize, fileType, guid, response) {
var thumbnails = $("div#sortablethumbnails");
var newSpan = $("<span class='imagecontainer'/>").appendTo(thumbnails);
var newImg = $("<img/>").appendTo(newSpan).attr("src", guid + response);
$("<input type='hidden' name='media_guid_" + guid + "'/>").appendTo(newSpan).attr("value", guid);
$("<input type='hidden' name='media_ordr_" + guid + "'/>").appendTo(newSpan).attr("class", "order");
$("<a href='#' class='deleteimage'><img src='Content/images/General/Delete.png' alt='<%:Html.GlobalResource("RemoveImage") %>' style='margin-left: -30px;' /></a>").appendTo(newSpan);
RefreshOrder();
}
$(document).ready(function() {
$("#photo").makeAsyncUploader({
upload_url: $.url('Listing/AsyncUpload'),
flash_url: 'Content/swf/swfupload.swf',
button_image_url: 'Content/images/blankButton.png',
disableDuringUpload: 'INPUT[type="submit"]',
button_text: '<%:Html.GlobalResource("ChooseImages") %>'
});
$("div#sortablethumbnails").html($("input#ThumbnailRendererState").val());
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("div#sortablethumbnails").sortable({
opacity: 0.7,
revert: false,
scroll: true,
tolerance: 'pointer',
update: function(event, ui) {
RefreshOrder();
}
});
$("div#sortablethumbnails").disableSelection();
$("a.deleteimage").live("click", function() {
$(this).parent().remove();
RefreshOrder();
return false;
});
<% if (Model != null)
{
//var imageList = Model.Where(a => a.Context == "UploadListingImage").ToList();
var imageList = Model.Where(m => m.Type.Equals("D4I.Providers.MediaLoader.DateHashedURI_AWS")).ToList();
if(imageList.Count > 0)
{
//Get Workflow
Dictionary<string, string> workflowParams = CommonClient.GetAttributeData("MediaAsset.Workflow", "UploadListingImage");
//Load Media
IMediaLoader mediaLoader = RainWorx.FrameWorx.Unity.UnityResolver.Get<IMediaLoader>(workflowParams["Loader"]);
Dictionary<string, string> loaderProviderSettings = CommonClient.GetAttributeData(mediaLoader.TypeName, "UploadListingImage");
foreach (Media media in imageList)
{
string fullPath = mediaLoader.Load(loaderProviderSettings, media, "ThumbCrop");
string myGuid = media.GUID.ToString();
%>
// ************* HERE **** HERE **** HERE ************* //
// ************* HERE **** HERE **** HERE ************* //
addImage('unk', 'unk', 'unk', '<%: myGuid %>', '<%: fullPath %>');
<%
}
}
} %>
});
// function AddImage(src) {
// $("div#sortablethumbnails").append("<span class='imagecontainer'><img src='" + src + "' /><span class='order'></span><a href='#' class='deleteimage'>Delete</a></span>");
// RefreshOrder();
// }
function RefreshOrder() {
var images = $(".imagecontainer");
for (var x = 0; x < images.length; x++) {
$(".imagecontainer .order:eq(" + x + ")").val(x);
}
}
</script>
<%-- <input type=button id=debuginfo value="Debug Info" />--%>
<div id=sortablethumbnails></div>
}
%>
The results:
<span class="imagecontainer">
<img src="http://s3.amazonaws.com/deal4it/dev/ListingImage/20120106/096b341f-2e7c-4ef1-b969-37a62a877e67_thumbcrop.jpg">
<input type="hidden" name="media_guid_http://s3.amazonaws.com/deal4it/dev/" value="http://s3.amazonaws.com/deal4it/dev/">
<input type="hidden" name="media_ordr_http://s3.amazonaws.com/deal4it/dev/" class="order" value="2">
<a href="#" class="deleteimage">
<img src="Content/images/General/Delete.png" alt="Remove Image" style="margin-left: -30px;">
</a>
</span>
Our Loader looks like:
namespace D4I.Providers.MediaLoader
{
public class DateHashedURI_AWS : RainWorx.FrameWorx.Providers.MediaLoader.IMediaLoader
{
public string Load(Dictionary<string, string> providerSettings, Media media, string variationName)
{
Variation variation = media.Variations[variationName];
string path = String.Format("{0:yyyy}{0:MM}{0:dd}", variation.Asset.DateStamp);
if (providerSettings.Count < 6)
providerSettings = DefaultProviderSettings;
return Amazon.GetMediaUrl(path: path
, fileName: variation.Asset.Reference
, providerSettings: providerSettings
, context: media.Context);
}
public Dictionary<string, string> DefaultProviderSettings
{
get
{
Dictionary<string, string> retVal = new Dictionary<string, string>();
// deleted values are our AWS login info //
return retVal;
}
}
public bool VerifyProviderSettings(Dictionary<string, string> providerSettings)
{
return (DefaultProviderSettings.Keys.Except(providerSettings.Keys).Count() <= 0);
}
public string TypeName
{
get { return "D4I.Providers.MediaLoader.DateHashedURI_AWS"; }
}
}
}
The call to make the return value looks like:
public static string GetMediaUrl(string path, string fileName, string context, Dictionary<string, string> providerSettings = null)
{
// Initialize the AWS API...
_providerSettings = providerSettings;
Initialize();
string absoluteURL = String.Format("{0}/{1}/{2}/{3}/{4}/{5}", BaseURL, BucketName, RootFolder.StripSlashes(), context.FixContext(), path, fileName);
Uri uri = new Uri(absoluteURL);
return uri.AbsoluteUri;
}
I can step through every bit of code and see it working just fine except the code in AJAXImageUploader.ascx. I even tried putting the C# code found inside the JS block in the ASCX where I could break on it and I still cannot get to it. In all other cases I can confirm that the media.GUID is in fact a valid GUID and that the Load() function returns a valid URI string for the image on AWS.
Any ideas how to track this down??

Answer 1

Found out that the SWF that the source company wrote contains a call to a JS file that does further changes to data pieces after a successful upload. I got the data I need from RainWorx and voila - it all started working correctly. I love the lack of viable documentation on these hidden gems! < grumble />