The code
<asp:UpdatePanel ID="UploadPanel" class="window" ClientIDMode="Static" UpdateMode="Conditional" runat="server" style="padding:25px; min-width:500px; width:auto; max-width:1000px; display:none; " >
<ContentTemplate>
<script type="text/javascript">
function submitbutton_click() {
alert("submitbutton_click");
var submitbutton = document.getElementById('<%=SubmitButton.ClientID %>');
var uploadobj = document.getElementById('<%=FileUploader1.ClientID %>');
if (!window.filesuploaded) {
if (uploadobj.getqueuecount() > 0) {
uploadobj.startupload();
} else {
var uploadedcount = parseInt(submitbutton.getAttribute("itemcount")) || 0;
if (uploadedcount > 0) {
return true;
}
alert("Please browse files for upload");
}
return false;
}
window.filesuploaded = false;
return true;
}
function CuteWebUI_AjaxUploader_OnSelect() {
if (selectArea) {
selectArea.cancelSelection();
}
}
function CuteWebUI_AjaxUploader_OnPostback() {
alert("OnPostBack");
window.filesuploaded = true;
var submitbutton = document.getElementById('<%=SubmitButton.ClientID %>');
submitbutton.click();
return false;
}
</script>
<asp:Label ID="Uploader1_FileUploadedLabel" runat="server" Text="Label"></asp:Label>
<asp:Label ID="Uploader1_UploadCompletedLabel" runat="server" Text="Label"></asp:Label>
<h2 style="border:thin solid black; width:300px; ">Image Cropper</h2>
<CuteWebUI:Uploader ID="FileUploader1" ClientIDMode="Static" MaxFilesLimit="1" runat="server" InsertButtonID='Uploader1Insert' ProgressCtrlID='Uploader1Progress' CancelButtonID='Uploader1Cancel' TempDirectory="~/UploaderTemp" ProgressPanelWidth="300" InsertText="Select Image" onuploadcompleted="Uploader1_UploadCompleted" onfileuploaded="Uploader1_FileUploaded" >
<ValidateOption AllowedFileExtensions=".png,.jpg,.bmp,.jpeg,.gif, ," />
<ValidateOption MaxSizeKB="1164" />
</CuteWebUI:Uploader>
<asp:Image runat="server" ID="Uploader1Insert" AlternateText="Upload File" ImageUrl="../Images/upload.png" Style="float:left; margin:0px;" /><br />
<asp:Panel runat="server" ID="Uploader1Progress" BorderColor="Orange" BorderStyle="dashed" BorderWidth="2" Style="float:left; margin:0px; padding:0px; ">
<asp:Label ID="Uploader1ProgressText" runat="server" ForeColor="Firebrick"></asp:Label><br />
</asp:Panel><br />
<asp:Image runat="server" ID="Uploader1Cancel" AlternateText="Upload File" ImageUrl="../Images/cancel.png" /> <br />
<asp:Button runat="server" ID="SubmitButton" OnClientClick="return submitbutton_click()" Text="Submit" style="display:none;" />
<br style="clear:both;" /> <br />
<asp:Panel ID="ImagePanel" ClientIDMode="Static" runat="server" Visible="false" style="margin:20px; padding:20px; border:thick solid black; " >
<div style="float:left; border:thin dashed orange; width:200px; ">
<asp:Label ID="Label2" runat="server" Text="Image Name" CssClass="label" ></asp:Label><br />
<asp:TextBox ID="ImageNameTextBox" CssClass="text_box" runat="server"></asp:TextBox><br />
<asp:Label ID="ErrorLabel" ClientIDMode="Static" CssClass="error" runat="server" Text="* Field Required" style="display:none;" ></asp:Label><br />
</div>
<div id="Div1" style="float:right; margin-top:0px; border:thin dashed green;" >
<label style="float:left;" class="label" >Button Preview</label><br />
<div id="Image3Div" style="float:left; width:33px; height:33px; overflow:hidden; margin-top:0px; margin-left:0px; border:thin solid white;-moz-border-radius:5px; border-radius:5px; background-image:url(../images/workarea2.png); background-repeat:repeat-y;" ></div>
<p class="label" style="float:left; margin:0px; margin-top:22px;">32px</p>
<div id="Image2Div" style="float:left; width:24px; height:24px; overflow:hidden; margin-top:10px; margin-left:10px; border:thin solid white; -moz-border-radius:5px; border-radius:5px; background-image:url(../images/workarea2.png); background-repeat:repeat-y; "></div>
<p class="label" style="float:left;margin:0px; margin-top:22px;">24px</p>
<div id="Image1Div" style="float:left; width:16px; height:16px; overflow:hidden; margin-top:17px; margin-left:0px; border:thin solid white; -moz-border-radius:5px; border-radius:5px; background-image:url(../images/workarea2.png); background-repeat:repeat-y; "></div>
<p class="label" style="float:left; margin:0px; margin-top:21px;">16px</p>
</div>
<br />
<br style="clear:both; margin:0px;" />
<p style="clear:both; margin:0px; margin-top:10px;" class="label" >Please select the area from the image you want to use for button</p>
<div id="ImageDiv" style="padding:0px; border:thin solid red; background-image:url(../images/workarea.png); background-repeat:repeat-y;" >
<asp:Image ID="resizebleImage" ClientIDMode="Static" ImageUrl="" runat="server" />
</div>
<br style="clear:both;" />
</asp:Panel>
<asp:ImageButton ID="CancelAddImage" ClientIDMode="Static" ImageUrl="~/Images/cancel.png" runat="server" style="float:left;" OnClientClick="CancelAddImage(); return false;" />
<asp:ImageButton ID="SaveButton" ClientIDMode="Static" ImageUrl="~/Images/save.png" runat="server" Visible="false" style="float:right;" onclick="SaveButton_Click1" />
<asp:ImageButton ID="ImageButton1" ClientIDMode="Static" ImageUrl="~/Images/continue.png" runat="server" style="float:right;" OnClientClick="ContinueAddImage(); return false;" />
<br style="clear:both;" />
<asp:HiddenField ID="SelectionX1" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="SelectionY1" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="SelectionWidth" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="SelectionHeight" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="CurrentFile" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="ImageId" ClientIDMode="Static" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="SaveButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>