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