Develop Reference

AJAX Html Editor Extender upload image appearing blank

Using AJAX 4 (latest version) I have been working with the html editor extender trying to upload images with text, I have got the Image to upload however it appears blank and when looking at the source, the source of the image is also blank (image below) how do I resolve this upload my selected image?

Include in HtmlEditorExtender an event handler for the ImageUploadComplete event.
<ajaxToolkit:HtmlEditorExtender
OnImageUploadComplete="MyHtmlEditorExtender_ImageUploadComplete"
...
Within the ImageUploadComplete event handler, you need to do two things:
1) Save the uploaded image
2) Provide the URL to the saved image so the image can be displayed within the HtmlEditorExtender
protected void MyHtmlEditorExtender_ImageUploadComplete(
object sender, AjaxFileUploadEventArgs e)
{
// Generate file path
string filePath = "~/Images/" + e.FileName;
// Save uploaded file to the file system
var ajaxFileUpload = (AjaxFileUpload)sender;
ajaxFileUpload.SaveAs(MapPath(filePath));
// Update client with saved image path
e.PostedUrl = Page.ResolveUrl(filePath);
}
Make sure you checked
http://www.asp.net/AjaxLibrary/AjaxControlToolkitSampleSite/HTMLEditorExtender/HTMLEditorExtender.aspx and
http://stephenwalther.com/archive/2012/05/01/ajax-control-toolkit-may-2012-release

Save current page to image

I'm working on a project which requires to save the current page in an image. I found some examples in Javascript to create a blob of page, but what I would like to do is save the page in a file.
My question is, is it possible to save the content of a page in an image file?
Does a plugin exist to do it directly ?
If not, is it possible to save the blob and render the blob in C# to create an image?

To save a page as an image, you can use http://html2canvas.hertzen.com/
Example:
var canvas = document.getElementById("mycanvas");
var img = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');

How to slide Update Panel content after updating

I have an Update Panel that contains an image and a button. Image control displays one image at a time when clicked on "Next Image" Button and previous image on clicking "Previous Image" button. Code sample is something like this
protected void btnNext_Click(..)
{
Image1.ImageUrl=getNextImageFromDatabase();
UpdatePanel1.Update();
}
protected void btnPrevious_Click(..)
{
Image1.ImageUrl=getPreviousImageFromDatabase();
UpdatePanel1.Update();
}
Now what I want to know is that is there any way I can slide image or whatever content in update panel to left when clicked on "Next Image" and similarly to right when clicked on "Previous Image"? Is there any way using AjaxToolKit or JQuery?

You can you use the jquery fadeIn fadeOut methods which will look like a slide effect
See example here http://api.jquery.com/promise/#example-1

With Jquery you can simply animate margin-left to negative values, so Image would disapear. I personaly use this solution:
User clicks on next/prev button
Show loading image (a gif)
Create image (var img = new Image()) in javascript
set onload action for that image to move old one to left/right and append new image etc.
get next/prev image url
assign src of the created image, so when it's loaded the onload action is executed.
AjaxToolkit might not be the cleanest solution in this case. You will probably need to make some simple service that returns nex/prev image url, but that's only few lines of code...

File Upload doesn't work in a page with Ajax Update Panel

I am using Ajax File Upload control in ASP.NET 4 using c#. The same page has an update panel too but the upload control is not inside the update panel. The upload control is outside of the update panel.
The update panel has a captcha image and submit button which is described here too. The submit button inside contains code for saving the file from upload control.
The problem is that when user has browsed the fife to be uploaded using upload control and then enters a wrong captcha value and submits, then a new captcha image is given asynchronously to the user for entry. Now the upload control still shows the path in the upload bar for the file, but on the programming side it does not detects the file.
The submit button code:
if (AsyncFileUpload.HasFile)
{
// upload logic and other stuff
}
else
{
// lblShow.Text = "There is no file to be uploaded";
}
The above code for example executes the else part to say "There is no file to be uploaded". The page still hasn't refreshed totally and the file upload control has the path of the file displayed. Kindly help me with this problem.

If your code:
if (AsyncFileUpload.HasFile)
{
// upload logic and other stuff
}
else
{
// lblShow.Text = "There is no file to be uploaded";
}
is in the Page_Load event, it will still execute in the context of a partial post-back, e.g. the UpdatePanel refresh. If a full form submit has not been performed from the browser (you mentioned your File Upload is outside of the UpdatePanel) then the page will not detect the file upload.
What I am confused about is why you have called it AsyncFileUpload when it is outside the UpdatePanel?
EDIT:
Based on your answer, I don't think your Captcha implementation is workable with async file upload as you have it now.
The UpdatePanel does an async POST to evaluate captcha result, but you will not POST the file contents yet because its not inside the UpdatePanel. Then your server-side code evaluates the captcha result and will either return html or a redirect in the async-response back to the browser... somewhere you need to eventually submit the form to get the file.
Unless you're prepared to write code to send some javascript back to your page in the async-response to trigger a full form submit, AND re-evaluate CAPTCHA again on the form submit, you're probably better off taking out the UpdatePanel, in my opinion.

If you are using Ajax update panel with file upload control then you have to add postback trigger into update panel triggers. Like:
<Triggers>
<asp:PostBackTrigger ControlID="btnContactSubmit"/>
</Triggers>

Adding Images to an ASPX page

I have an aspx page which I am pasting the code from. This page is a preview gallery which when I create a new gallery in my admin panel it auto updates to this page and places the text name I assign in the admin and assigns a page link which takes users to the actual gallery page for that preview... for instance I log in as admin and select manage free gallery.. enter the gallery name (for example" free preview") upload 8 or 9 images and a slideshow then hit submit. The gallery is then created and a link to that gallery is placed on my page for all free galleries. I want to not only have a link but an actual thumbnail image for these.. how would I do this given the code I am pasting below? I would also be willing to just eliminate the text link and go with a clickable thumbnail with a short description under it which actually would probably look better anyway. Pasted ASPX Code follows:
ok so I cant post the code because I am new... any suggestions??? I can email code or post else where if anyone has some help info.
Thanks

How do you create your text link? I assume you're using a asp:Hyperlink control and you're just setting its Text and NavigateUrl properties?
Then you can do the same thing and also set the control's ImageUrl property to the URL path of the image.