How to use ASPxUploadControl to upload an image and display it on a web page

This example demonstrates how to use ASPxUploadControl to upload an image to the server and then show it on the page.
To do this, please follow these steps:
- Place ASPxUploadControl on the pageand set the ASPxUploadControl.ShowUploadButton property to true.
- Set the ASPxUploadControl.ValidationSettings.AllowedFileExtensions property to ".jpg,.jpeg,.jpe,.gif".
- Place an html image (<img /> tag) on the page.
- Create the "Images" folder in the root folder of your project.
- Set the src property of the image to "Images/DefaultImage". You may place there any image. After the first file upload, the src property will be changed.
- Set the imagealt property to "Please load image" (or another text that will inform a user that there is no image to be displayed).
- Handle both the client-side and server-side ASPxUploadControl.FileUploadComplete events.
- In the server-side event handler, save the uploaded file to the directory "~/Images/". To easily create a unique filename, we recommend using the current date and time (DateTime.Now()).
- Set the FileUploadCompleteEventArgs.CallbackData property to "Images/<filename>", where <filename> is a full name of the file you saved. Please note that you need to save the file to directory "~/Images/", where "~/" is the root folder of your project, but set the FileUploadCompleteEventArgs.CallbackData property to "Images/<filname>" excluding the root folder.
- In the client-side event handler, use the document.getElementById method to find your html image by the assigned id.
- Set the src property of the found image to ASPxClientUploadControlFileUploadCompleteEventHandler.callbackData received from server.