<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) {

} 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) {

function CuteWebUI_AjaxUploader_OnPostback() {

alert("OnPostBack");

window.filesuploaded = true;

var submitbutton = document.getElementById('<%=SubmitButton.ClientID %>');

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>