I am taking over maintenance of the image upload functionality for our web app. Jumping straight into it, I have very limited understanding of how the OnClientAdded client event of the RadUpload control works. First, here's my Javascript and C# code. Take note of the code in bold:
Javascript:
function addImage(radUpload, args) {
//list of all items available for the dropdown
var items = document.getElementById('<%=this.hvImageTypes.ClientID %>').value.split(",");
var currentRow = args.get_row();
var firstInput = currentRow.getElementsByTagName("input")[0];
//create the table
var table = document.createElement("table");
table.className = 'AdditionalInputs';
//add row for selecting image type
var row = table.insertRow(-1);
var cell = row.insertCell(-1);
var input = CreateDropdown(items);
input.id = input.name = radUpload.getID(input.name);
var label = CreateLabelForControl("Select Type: ", input.id);
cell.appendChild(label);
cell = row.insertCell(-1);
cell.appendChild(input);
//add select file in front of input
var fileInputSpan = currentRow.getElementsByTagName("span")[0];
var firstNode = currentRow.childNodes[0];
label = CreateLabelForControl("Select File: ", radUpload.getID());
//add note field
var NoteRow = table.insertRow(-1);
var NoteLabelCell = NoteRow.insertCell(-1);
var NoteCell = NoteRow.insertCell(-1);
var NoteBox = document.createElement("input");
var NoteLabel = CreateLabelForControl("Notes:", NoteBox.id);
NoteBox.name = "ImageNote";
NoteCell.appendChild(NoteBox);
NoteLabelCell.appendChild(NoteLabel);
//end add note field
currentRow.insertBefore(label, firstNode);
currentRow.insertBefore(table, label);
}
function CreateDropdown(items) {
var selectImageType = document.createElement("select");
selectImageType.name = "jsSelect";
selectImageType.options.length = 0;
for (var i = 0; i <= items.length - 1; i++) {
selectImageType.options[i] = new Option(items[i], items[i]);
}
return selectImageType;
}
codebehind:
private void ProcessFiles()
{
FileProxy fileProxy = new FileProxy();
ProductProxy prodProxy = new ProductProxy();
List<ProductImage> images = new List<ProductImage>();
RadProgressContext progress = RadProgressContext.Current;
progress.PrimaryTotal = 1;
progress.PrimaryValue = 1;
progress.PrimaryPercent = 100;
progress.Speed = "∞";
progress.TimeEstimated = "∞";
//four operations per file - resize full/thumb, save full/thumb, upload collection
this.TotalFiles = this.RadUpload1.UploadedFiles.Count;
this.TotalSteps = (this.RadUpload1.UploadedFiles.Count * 4) + 1;
this.CurrentStep = 0;
//resize each uploaded file and generate a thumbnail for it. then
//save both images to the system and attach to the overall collection
//of image references for a final mass reference.
for (decimal i = 0; i <= this.RadUpload1.UploadedFiles.Count - 1; i++)
{
UploadedFile file = this.RadUpload1.UploadedFiles[Convert.ToInt32(i)];
string fileName = Path.GetFileName(file.FileName);
int newHeight = 0; //new image height once the image processor resizes it
int newWidth = 0; //new image width once the image processor resizes it
int newThumbnailHeight = 0; //new thumbnail height once the image processor resizes it
int newThumbnailWidth = 0; //new thumbnail width once the image processor resizes it
if (!Response.IsClientConnected) break;
this.UpdateProgress("Resizing " + fileName + "...");
//setup the message with the newly resized image stream
FileMessage fullMsg = new FileMessage
{
ContentType = file.ContentType,
File = ImageProcessor.Process(file.InputStream, false, out newHeight, out newWidth),
FileName = fileName
};
this.UpdateProgress("Generating thumbnail for " + fileName + "...");
//setup the message with the new thumbnail version
FileMessage thumbnailMsg = new FileMessage
{
ContentType = file.ContentType,
File = ImageProcessor.ProcessThumbnail(file.InputStream, false, out newThumbnailHeight, out newThumbnailWidth),
FileName = fileName
};
this.UpdateProgress("Saving " + fileName + "...");
fileProxy.UploadFile(fullMsg); //uploads the image stream to the back-end service
this.UpdateProgress("Saving thumbnail for " + fileName + "...");
fileProxy.UploadFile(thumbnailMsg); //uploads the thumbnail image stream to the back-end service
ProductImage image = new ProductImage
{
UserId = hfUserData.GetValueAs<long>(),
ImageIdentifier = fullMsg.Id,
ThumbnailIdentifier = thumbnailMsg.Id,
ImageHeight = newHeight,
ImageWidth = newWidth,
ThumbnailHeight = newThumbnailHeight,
ThumbnailWidth = newThumbnailWidth,
ImageType = (ImageTypes)Enum.Parse(typeof(ImageTypes), file.GetFieldValue("jsSelect").Replace(" ", "")),
Note = file.GetFieldValue("ImageNote")
};
image.Product = new Product { Id = this.Page.GetId().Value };
images.Add(image); //attach image reference
}
this.UpdateProgress("Attaching images...");
prodProxy.InsertImages(images.ToArray());
prodProxy.Close();
fileProxy.Close();
this.CloseWindow("refreshImages()"); //closes the radwindow and tells the parent page to refresh the image list
}
In the codebehind, there's this line:
ImageType = (ImageTypes)Enum.Parse(typeof(ImageTypes), file.GetFieldValue("jsSelect").Replace(" ", "")),
This was originally there and was working fine. However, when I do this:
Note = file.GetFieldValue("ImageNote")
The .Note property is null. I've tried using INPUT and TEXTAREA elements in the Javascript, but can't figure this out. I am just trying to mimic what the other guy did in the CreateDropdown() Javascript function which is to set the name of the SELECT element and then reference it by name in the codebehind to get its value, but it's not doing this with my INPUT or TEXTAREA.
At a glance, can anyone tell me what I am not doing right?