I am using Uploadify v2.1.4 to upload images using ASP.Net C# FM 4.0.
In this page i have other controls also, but i want a functionality in such a way that when i upload images it should automatically refresh the UpdatePanel1 to show image uploaded
Default.aspx FILE
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>
<asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" RepeatDirection="Horizontal" >
<ItemTemplate>
<br /><img src='http://test.kashmirsouq.com/ImageUploads/<%# Eval("ImageID") %>' width="100px" height="100px" vspace="2" hspace="2" border="1" />
<br /><asp:LinkButton ID="lnkBtnDeleteImage" CommandArgument='<%# Eval("sno") %>' CommandName="Delete" runat="server">
Delete</asp:LinkButton>
<br />
</ItemTemplate>
</asp:DataList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:SQLConnectionString %>"
SelectCommand="SELECT [sno], [ImageID] FROM [User_Images]">
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
Page example is here test.kashmirSouq.com
I am calling FileUplaad.aspx file to upload image using jQuery
<script type="text/javascript">
$(document).ready(function () {
$('#fuFiles').uploadify({
'uploader': 'Scripts/uploadify.swf',
'script': 'FileUploads.aspx',
'cancelImg': 'Scripts/cancel.png',
'auto': 'true',
'multi': 'true',
'fileExt': '*.jpg;*.gif;*.png',
'buttonText': 'Browse...',
'queueSizeLimit': 5,
'simUploadLimit': 2
});
});
</script>
and in FileUpload.aspx.cs file i save the file on the server and database, I need a way so that i can refresh the updatepanel1 from function saveData() which is in FileUpload.aspx.cs
protected int saveData()
{
String strSql = "INSERT INTO HMS_User_Images(ImageID,UserID,ImageCreationDate) ";
strSql += " VALUES ('" + filename + "','123456789', '" + DateTime.Now + "')";
int result = DataProvider.intConnect_Select(strSql);
}
So when i upload images it should refresh do partial page update of the grid. Please give me a example how i can do it using C#
Please advice how i can do this code sample would be highly appreciated.
Regards
Try by showing the image by using the response after the Onupload complete event.So when the user as soon as he uploads you will find the image.
This is the script:
<script type="text/javascript">
$(window).load(
function () {
$("#fileInput1").uploadify({
'uploader': 'scripts/uploadify.swf',
'cancelImg': 'images/cancel.png',
'buttonText': 'Browse Files',
'script': 'Upload.aspx',
'folder': 'uploads',
'fileDesc': 'Image Files',
'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
'queueSizeLimit': 9999,
'simUploadLimit': 2,
'sizeLimit': 4000000,
'multi': true,
'auto': true,
'onComplete': function (event, queueID, fileObj, response, data) {
$("#thumbnail").append(response)
},
'onError': function (event, ID, fileObj, errorObj) {
alert(errorObj.type + ' Error: ' + errorObj.info);
}
});
}
);
</script>
This is the Handler:
<%@ WebHandler Language="VB" Class="UploadVB" %>
Imports System
Imports System.Web
Imports System.IO
Imports System.Drawing
Public Class UploadVB : Implements IHttpHandler
Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
Dim postedFile As HttpPostedFile = context.Request.Files("Filedata")
Dim savepath As String = ""
Dim tempPath As String = ""
tempPath = System.Configuration.ConfigurationManager.AppSettings("FolderPath")
savepath = context.Server.MapPath(tempPath)
Dim filename As String = postedFile.FileName
If Not Directory.Exists(savepath) Then
Directory.CreateDirectory(savepath)
End If
If Not Directory.Exists(savepath + "\thumbs") Then
Directory.CreateDirectory(savepath + "\thumbs")
End If
postedFile.SaveAs((savepath & "\") + filename)
Dim fullImage As System.Drawing.Image = New System.Drawing.Bitmap((savepath & "\") + filename)
Dim newWidth As Integer = 100
Dim newHeight As Integer = 80
Dim temp As New Bitmap(newWidth, newHeight)
Dim newImage As Graphics = Graphics.FromImage(temp)
newImage.DrawImage(fullImage, 0, 0, newWidth, newHeight)
temp.Save((savepath + "\thumbs" & "\") + "t_" + filename)
context.Response.Write("<a href='" + (tempPath & "/") + filename + "'><img src='" + tempPath + "/thumbs" & "/" + "t_" + filename + "'/></a>")
context.Response.StatusCode = 200
'context.Response.Write("OK")
End Sub
Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
Get
Return False
End Get
End Property
End Class
In the above code you can find thumbnails appended as soon as the user uploads you find a thumbnail of the image.