<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadFile.aspx.cs" Inherits="NewBusiness.UploadFile" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.rieDialogs
{
z-index: 10000;
}
#modalPopup_C
{
overflow:hidden !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"></telerik:RadAjaxManager>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
<telerik:RadSkinManager ID="RadSkinManager1" runat="server"></telerik:RadSkinManager>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server"></telerik:RadWindowManager>
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script>
var dialog;
var uploadedFilesCount = 0;
function OnClientFileUploaded(sender, eventArgs) {
uploadedFilesCount++;
}
function validateRadAsyncUpload(source, e) {
if (uploadedFilesCount > 0)
e.IsValid = true;
else
e.IsValid = false;
}
function showImageEditor() {
dialog = $find("<%= RwImageEditor.ClientID %>");
if (dialog) {
dialog.show();
}
else
radalert("Unable to locate image editor window.", 330, 110, "Debug");
}
//Callback function for the custom save button in the ImageEditor
function closeImageEditor(clientData, serverData) {
if (dialog)
dialog.close();
else
radalert("Unable to locate image editor window.", 330, 110, "Debug");
}
//Automatically resize image to 100 x 100 if it is cropped
function imgEditorImageChanged(imgEditor, args) {
setTimeout(function () {
if (args.get_commandName() == "Crop")
imgEditor.resizeImage(100, 100, true);
}, 500);
}
//Create a custom save command for the image editor
Telerik.Web.UI.ImageEditor.CommandList.SavePicture = function (imageEditor, commandName, args) {
imageEditor.saveImageOnServer("Picture", true);
closeImageEditor();
}
</script>
</telerik:RadScriptBlock>
<table>
<tr>
<td>
<telerik:RadAsyncUpload runat="server" ID="RauPicture"
OnClientFileUploaded="OnClientFileUploaded" OnFileUploaded="RauPicture_FileUploaded"
AllowedFileExtensions="jpg,jpeg,png,gif" MaxFileSize="1048576" Width="250px">
</telerik:RadAsyncUpload>
<asp:Button ID="BtnUpload" Text="Upload Image" runat="server"
CausesValidation="False" Width="229px" OnClientClick="showImageEditor()">
</asp:Button>
</td>
</tr>
<tr>
<td>
<telerik:RadTextBox ID="TextBox1" runat="server" CausesValidation="True" Visible="false"
AutoAdjustImageControlSize="false" Height="80px" Width="80px" >
</telerik:RadTextBox>
<asp:CustomValidator ID="CvRauPicture" runat="server" ErrorMessage="Please select a picture." ControlToValidate="TextBox1" ClientValidationFunction="validateRadAsyncUpload" CssClass="errors" Text="รง"></asp:CustomValidator>
</td>
</tr>
</table>
<telerik:RadAjaxPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" EnableAJAX="true">
<telerik:RadWindow ID="RwImageEditor" runat="server" Animation="Fade"
AutoSize="True" Modal="False" VisibleStatusbar="False" Title="Edit Photo" EnableViewState="false" ShowContentDuringLoad="true" VisibleOnPageLoad="false">
<ContentTemplate>
<telerik:RadImageEditor ID="RadImageEditor1" runat="server" OnImageLoading="RadImageEditor1_ImageLoading"
OnClientImageChanged="imgEditorImageChanged">
<Tools>
<telerik:ImageEditorToolGroup>
<telerik:ImageEditorTool CommandName="SavePicture" />
<telerik:ImageEditorToolSeparator />
<telerik:ImageEditorToolStrip CommandName="Undo" />
<telerik:ImageEditorToolStrip CommandName="Redo" />
<telerik:ImageEditorToolStrip CommandName="Reset" />
<telerik:ImageEditorToolSeparator />
<telerik:ImageEditorTool CommandName="Crop" />
<telerik:ImageEditorTool CommandName="Resize" />
</telerik:ImageEditorToolGroup>
</Tools>
</telerik:RadImageEditor>
</ContentTemplate>
</telerik:RadWindow>
</telerik:RadAjaxPanel>
</form>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.rieDialogs
{
z-index: 10000;
}
#modalPopup_C
{
overflow:hidden !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"></telerik:RadAjaxManager>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
<telerik:RadSkinManager ID="RadSkinManager1" runat="server"></telerik:RadSkinManager>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server"></telerik:RadWindowManager>
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script>
var dialog;
var uploadedFilesCount = 0;
function OnClientFileUploaded(sender, eventArgs) {
uploadedFilesCount++;
}
function validateRadAsyncUpload(source, e) {
if (uploadedFilesCount > 0)
e.IsValid = true;
else
e.IsValid = false;
}
function showImageEditor() {
dialog = $find("<%= RwImageEditor.ClientID %>");
if (dialog) {
dialog.show();
}
else
radalert("Unable to locate image editor window.", 330, 110, "Debug");
}
//Callback function for the custom save button in the ImageEditor
function closeImageEditor(clientData, serverData) {
if (dialog)
dialog.close();
else
radalert("Unable to locate image editor window.", 330, 110, "Debug");
}
//Automatically resize image to 100 x 100 if it is cropped
function imgEditorImageChanged(imgEditor, args) {
setTimeout(function () {
if (args.get_commandName() == "Crop")
imgEditor.resizeImage(100, 100, true);
}, 500);
}
//Create a custom save command for the image editor
Telerik.Web.UI.ImageEditor.CommandList.SavePicture = function (imageEditor, commandName, args) {
imageEditor.saveImageOnServer("Picture", true);
closeImageEditor();
}
</script>
</telerik:RadScriptBlock>
<table>
<tr>
<td>
<telerik:RadAsyncUpload runat="server" ID="RauPicture"
OnClientFileUploaded="OnClientFileUploaded" OnFileUploaded="RauPicture_FileUploaded"
AllowedFileExtensions="jpg,jpeg,png,gif" MaxFileSize="1048576" Width="250px">
</telerik:RadAsyncUpload>
<asp:Button ID="BtnUpload" Text="Upload Image" runat="server"
CausesValidation="False" Width="229px" OnClientClick="showImageEditor()">
</asp:Button>
</td>
</tr>
<tr>
<td>
<telerik:RadTextBox ID="TextBox1" runat="server" CausesValidation="True" Visible="false"
AutoAdjustImageControlSize="false" Height="80px" Width="80px" >
</telerik:RadTextBox>
<asp:CustomValidator ID="CvRauPicture" runat="server" ErrorMessage="Please select a picture." ControlToValidate="TextBox1" ClientValidationFunction="validateRadAsyncUpload" CssClass="errors" Text="รง"></asp:CustomValidator>
</td>
</tr>
</table>
<telerik:RadAjaxPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" EnableAJAX="true">
<telerik:RadWindow ID="RwImageEditor" runat="server" Animation="Fade"
AutoSize="True" Modal="False" VisibleStatusbar="False" Title="Edit Photo" EnableViewState="false" ShowContentDuringLoad="true" VisibleOnPageLoad="false">
<ContentTemplate>
<telerik:RadImageEditor ID="RadImageEditor1" runat="server" OnImageLoading="RadImageEditor1_ImageLoading"
OnClientImageChanged="imgEditorImageChanged">
<Tools>
<telerik:ImageEditorToolGroup>
<telerik:ImageEditorTool CommandName="SavePicture" />
<telerik:ImageEditorToolSeparator />
<telerik:ImageEditorToolStrip CommandName="Undo" />
<telerik:ImageEditorToolStrip CommandName="Redo" />
<telerik:ImageEditorToolStrip CommandName="Reset" />
<telerik:ImageEditorToolSeparator />
<telerik:ImageEditorTool CommandName="Crop" />
<telerik:ImageEditorTool CommandName="Resize" />
</telerik:ImageEditorToolGroup>
</Tools>
</telerik:RadImageEditor>
</ContentTemplate>
</telerik:RadWindow>
</telerik:RadAjaxPanel>
</form>
</body>
</html>