Hi there
I tried implementing the attached "profilepic.zip" example (it was just what I had been looking for), and got it working perfectly in a "stand alone" page (without master page). Trouble is, it doesn't work if the page has a master page.
Within a master page, the panel with the ImageEditor doesn't appear once the image has uploaded to the temporary folder. I also have a problem if I try to set the initial ImageURL of the Thumbnail (binaryimage) by checking if file exists and get a "Object reference not set to an object" error.
I don't have any of these problems in a stand alone page and all works perfectly. Please could you tell me what I am doing wrong and how to fix it
My code
<asp:Content ID="Content2" ContentPlaceHolderID="cphContent" runat="Server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI"
Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>
<asp:ScriptReference Assembly="Telerik.Web.UI"
Name="Telerik.Web.UI.Common.jQuery.js"></asp:ScriptReference>
<asp:ScriptReference Assembly="Telerik.Web.UI"
Name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:ScriptReference>
</Scripts>
</telerik:RadScriptManager>
<telerik:RadFormDecorator ID="RadFormDecoratorMenu" runat="server" Skin="Windows7" />
<telerik:RadToolTipManager runat="server" ID="ToolTipManager" AutoTooltipify="true"
Position="TopRight" Skin="Web20">
</telerik:RadToolTipManager>
<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
</telerik:RadStyleSheetManager>
<script type="text/javascript">
function fileUploaded(sender, args) {
$find("RadAjaxPanel1").ajaxRequest();
$telerik.$(".invalid").html("");
setTimeout(function () {
sender.deleteFileInputAt(0);
}, 10);
}
function validationFailed(sender, args) {
$telerik.$(".invalid")
.html("Invalid extension, please choose an image file");
sender.deleteFileInputAt(0);
}
function ImageEditorLoad(imgEditor, args) {
//open the Crop tool dialog with a little timeout
setTimeout(function () {
imgEditor.fire("Crop");
}, 0);
}
</script>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
<div class="upload-panel">
<asp:Panel ID="ShowImagePanel" runat="server" Visible="true">
<telerik:RadBinaryImage runat="server" Width="150px" Height="200px" ResizeMode="Fit" ID="Thumbnail" ImageUrl=""
AlternateText="Thumbnail" CssClass="binary-image" CropPosition="Center" />
<span class="invalid"></span>
</asp:Panel>
<asp:Panel ID="EditImagePanel" runat="server" Visible="false">
<telerik:RadImageEditor ID="RadImageEditor1" runat="server" OnImageLoading="RadImageEditor1_ImageLoading"
OnImageSaving="RadImageEditor1_ImageSaving" ExternalDialogsPath="~/ImageEditorDialogs/" Width="720px"
Height="430px" OnClientLoad="ImageEditorLoad" CanvasMode="No">
<Tools>
<telerik:ImageEditorToolGroup>
<telerik:ImageEditorTool CommandName="Undo" />
<telerik:ImageEditorTool CommandName="Redo" />
<telerik:ImageEditorToolSeparator />
<telerik:ImageEditorTool CommandName="Crop" IsToggleButton="true" />
<telerik:ImageEditorTool CommandName="Zoom" IsToggleButton="true" />
<telerik:ImageEditorTool Text="ZoomIn" CommandName="ZoomIn" />
<telerik:ImageEditorTool Text="ZoomOut" CommandName="ZoomOut" />
<telerik:ImageEditorTool Text="Rotate" CommandName="Rotate" IsToggleButton="true" />
<telerik:ImageEditorTool Text="RotateRight" CommandName="RotateRight" />
<telerik:ImageEditorTool Text="Rotate Left" CommandName="RotateLeft" />
<telerik:ImageEditorTool Text="Flip" CommandName="Flip" IsToggleButton="true" />
<telerik:ImageEditorTool Text="FlipVertical" CommandName="FlipVertical" />
<telerik:ImageEditorTool Text="FlipHorizontal" CommandName="FlipHorizontal" />
</telerik:ImageEditorToolGroup>
</Tools>
</telerik:RadImageEditor>
<br />
<telerik:RadButton ID="RadButton1" runat="server" Text="Save Changes" OnClick="RadButton1_Click">
<Icon PrimaryIconCssClass="rbSave" />
</telerik:RadButton>
<telerik:RadButton ID="RadButton2" runat="server" Text="Cancel" OnClick="RadButton2_Click">
<Icon PrimaryIconCssClass="rbSave" />
</telerik:RadButton>
<br />
<br />
</asp:Panel>
<telerik:RadAsyncUpload runat="server" ID="AsyncUpload1" MaxFileInputsCount="1" OnClientFileUploaded="fileUploaded"
OnFileUploaded="AsyncUpload1_FileUploaded" AllowedFileExtensions="jpeg,jpg,gif,png,bmp" OnClientValidationFailed="validationFailed">
<Localization Select="Choose Profile Image" />
</telerik:RadAsyncUpload>
</div>
</telerik:RadAjaxPanel>
</asp:Content>
And my code behind:
Protected Sub Page_Load(sender As Object, e As EventArgs)
TogglePanels()
Dim UserId As String
Dim strSavePath As String
UserId = Membership.GetUser().ProviderUserKey.ToString()
Dim myFilePath As String = Server.MapPath("~/images/users/" + UserId + "/" + "profile.jpg")
Dim Thumbnail As RadBinaryImage = DirectCast(FindControl("Thumbnail"), RadBinaryImage)
strSavePath = Server.MapPath("~/images/users/" + UserId)
If (Not Directory.Exists(strSavePath)) Then
Directory.CreateDirectory(strSavePath)
End If
If File.Exists(myFilePath) Then
Thumbnail.ImageUrl = "~/images/users/" + UserId + "/" + "profile.jpg"
Else
Thumbnail.ImageUrl = "~/images/users/blank.jpg"
End If
End Sub
Protected Sub RadImageEditor1_ImageSaving(sender As Object, args As ImageEditorSavingEventArgs)
Dim UserId As String
UserId = Membership.GetUser().ProviderUserKey.ToString()
args.Image.Image.Save(MapPath("~/images/users/" + UserId + "/" + "profile.jpg"))
args.Cancel = True
Using ms As New MemoryStream()
args.Image.Image.Save(ms, args.Image.RawFormat)
Context.Cache.Insert(Session.SessionID + "UploadedFile", ms, Nothing, DateTime.Now.AddMinutes(20), TimeSpan.Zero)
End Using
Dim imageData = DirectCast(Context.Cache.[Get](Session.SessionID + "UploadedFile"), MemoryStream)
If imageData IsNot Nothing Then
Thumbnail.DataValue = imageData.ToArray()
End If
args.Cancel = True
End Sub
Protected Sub RadButton1_Click(sender As Object, e As EventArgs)
TogglePanels(True)
RadImageEditor1.SaveEditableImage("profile.jpg", True)
End Sub
Private Sub TogglePanels(Optional hideEditImagePanel As Boolean = False)
If hideEditImagePanel Then
EditImagePanel.Visible = False
ShowImagePanel.Visible = True
Return
End If
Dim imageData = Context.Cache.[Get](Session.SessionID + "UploadedFile")
If imageData IsNot Nothing Then
EditImagePanel.Visible = True
ShowImagePanel.Visible = False
Else
EditImagePanel.Visible = False
ShowImagePanel.Visible = True
End If
End Sub
Protected Sub AsyncUpload1_FileUploaded(sender As Object, e As FileUploadedEventArgs)
'Clear changes and remove uploaded image from Cache
RadImageEditor1.ResetChanges()
Context.Cache.Remove(Session.SessionID + "UploadedFile")
Using stream As Stream = e.File.InputStream
Dim imgData As Byte() = New Byte(stream.Length - 1) {}
stream.Read(imgData, 0, imgData.Length)
Dim ms As New MemoryStream()
ms.Write(imgData, 0, imgData.Length)
Context.Cache.Insert(Session.SessionID + "UploadedFile", ms, Nothing, DateTime.Now.AddMinutes(20), TimeSpan.Zero)
End Using
TogglePanels()
End Sub
Protected Sub RadImageEditor1_ImageLoading(sender As Object, args As ImageEditorLoadingEventArgs)
'Handle Uploaded images
If Not [Object].Equals(Context.Cache.[Get](Session.SessionID + "UploadedFile"), Nothing) Then
Using image As New EditableImage(DirectCast(Context.Cache.[Get](Session.SessionID + "UploadedFile"), MemoryStream))
args.Image = image.Clone()
args.Cancel = True
End Using
End If
End Sub
Protected Sub RadButton2_Click(sender As Object, e As EventArgs) Handles RadButton2.Click
TogglePanels(True)
End Sub
End Class
The object reference not set to an object error is caused by this bit of code
I must point out, that if I comment out the above snippet of code then I don't get an error, but no imageeditor appears when I click the "choose avatar/ choose profile image button" I just see the file upload indicator and a cancel button
Please help
Thank you in advance :-)