How to Upload Bulk Image and Drag and Drop the Images

Design Code:

<%@ Page Title="" Language="C#" MasterPageFile="~/admin/AdminMaster.Master" AutoEventWireup="true"

CodeBehind="FinalUploadtoFTP.aspx.cs" Inherits="MyCityEats.admin.FinalUploadtoFTP" %>

<%@ Register Assembly="Krystalware.SlickUpload" Namespace="Krystalware.SlickUpload.Web.Controls"

TagPrefix="cc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

/* hide initially */.su-fileselector, .su-folderselector, .su-filelisttemplate, .su-uploadprogressdisplay

{

display: none;

zoom: 1;

}

/* fileselector cursor, link color */.su-fileselector, .su-fileselector *, .su-folderselector, .su-folderselector *

{

color: Gray;

cursor: pointer;

}

/* hover links */a

{

text-decoration: none;

}

a:hover, .su-hover a

{

text-decoration: underline;

}

#table

{

border-bottom-width: medium;

border-left-width: medium;

border-right-width: medium;

border-top-width: medium;

}

.cssPager span

{

background-color: #4f6b72;

font-size: 14px;

font-weight: bold;

}

.cssPager a

{

padding: 4px;

}

.panel

{

text-align: center;

padding: 0px 130px 30px 30px;

}

.texalign

{

text-align: center;

}

</style>

function cancelUpload() {

kw("<%=slickUpload.ClientID %>").cancel();

}

function onSessionStarted(data) {

document.getElementById("<%=uploadButton.ClientID %>").style.display = "none";

document.getElementById("<%=cancelButton.ClientID %>").style.display = "block";

}

function onBeforeSessionEnd(data) {

document.getElementById("<%=cancelButton.ClientID %>").style.display = "none";

}

</script>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<div>

<font face="Arial" size="4"><b>Final Upload to FTP</b></font>

<br />

<asp:Label ID="ErrorLabel" runat="server" Visible="false" Text="Deleted successfully"

Style="color: Red; font-family: Verdana;"></asp:Label>

<br />

<cc1:UploadConnector ID="UploadConnector1" runat="server" OnUploadComplete="UploadConnector1_UploadComplete" />

<cc1:SlickUpload ID="slickUpload" runat="server" FileListStyle="clear:both" FileSelectorStyle="height:180px;width:500px;"

Style="overflow: hidden; zoom: 1" UploadProgressDisplayStyle="clear:both" OnClientUploadSessionStarted="onSessionStarted"

OnClientBeforeSessionEnd="onBeforeSessionEnd">

<a href="javascript:;">Add files</a>

<br />

<tr>

Drag Files Here...

</td>

</tr>

</table>

</SelectorTemplate>

<a href="javascript:;">Add folder</a>

</SelectorFolderTemplate>

<cc1:FileListElement runat="server" Element="FileName" />

–

<cc1:FileListElement runat="server" Element="FileSize" />

<cc1:FileListRemoveCommand runat="server" href="javascript:;">

<asp:ImageButton ID="ImgBtnDelete" runat="server" ImageUrl="../admin/images/del.gif" />

</cc1:FileListRemoveCommand>

<cc1:FileListElement runat="server" Element="ValidationMessage" Style="color: #f00" />

</FileItemTemplate>

<div>

Uploading

<cc1:UploadProgressElement runat="server" Element="FileCount" />

file(s),

<cc1:UploadProgressElement runat="server" Element="ContentLengthText">

(calculating)</cc1:UploadProgressElement>

</div>

<div>

Currently uploading:

<cc1:UploadProgressElement runat="server" Element="CurrentFileName" />

file

<cc1:UploadProgressElement runat="server" Element="CurrentFileIndex" />

<cc1:UploadProgressElement runat="server" Element="FileCount" />

</div>

<div>

Speed:

<cc1:UploadProgressElement runat="server" Element="SpeedText">

(calculating)</cc1:UploadProgressElement>

</div>

<div>

<cc1:UploadProgressElement runat="server" Element="TimeRemainingText">

(calculating)</cc1:UploadProgressElement>

</div>

<cc1:UploadProgressBar runat="server" Style="background-color: #00ee00; width: 0;

height: 1.5em;" />

<div class="progressBarText" style="text-align: center; position: absolute; top: .15em;

width: 100%;">

<cc1:UploadProgressElement runat="server" Element="PercentCompleteText">

(calculating)</cc1:UploadProgressElement>

</div>

</ProgressTemplate>

</cc1:SlickUpload>

<br />

<asp:Button ID="uploadButton" runat="server" Text="Upload" />     

<asp:Button ID="cancelButton" runat="server" Text="Cancel" Style="display: none"

OnClientClick="cancelUpload();return false;" />

<br />

<asp:Label ID="uploadResult" runat="server" Text="uploadResult"></asp:Label>

<asp:Repeater ID="uploadFileList" runat="server" EnableViewState="False">

<ul>

</HeaderTemplate>

<li>

<%# DataBinder.Eval(Container.DataItem, "ClientName")%></li></ItemTemplate>

</ul></FooterTemplate>

</asp:Repeater>

<br />

</div>

<hr />

<br />

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<asp:GridView ID="GridFinalUpload" runat="server" DataSourceID="ODSFinalUpload" AutoGenerateColumns="False"

Width="600px" AllowPaging="True" OnRowCommand="GridFinalUpload_RowCommand">

<asp:TemplateField HeaderText="Image" ItemStyle-HorizontalAlign ="Center" ItemStyle-VerticalAlign ="Middle" SortExpression="Filename">

<asp:Image ID="imgLogo" align="center" CssClass="texalign" runat="server" Width="120px"

Height="70px" ImageUrl='<%# Eval("Filename","uploads/{0}") %>' />

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="File Name" ItemStyle-HorizontalAlign ="Left" ItemStyle-VerticalAlign ="Middle">

<asp:Label ID="lblBusinessName" CssClass="texalign" runat="server" Text='<%# Eval("Filename")%>'></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Delete">

<asp:ImageButton ID="DeleteImageButton" CommandArgument='<%# Bind("id") %>' CommandName="cmddelete"

ImageUrl="~/admin/images/del.gif" runat="server" ToolTip="Delete" />

<ajaxControlKit:ConfirmButtonExtender ID="ConfirmButtonExtender2" runat="server"

TargetControlID="DeleteImageButton" OnClientCancel="ButtonCancel" DisplayModalPopupID="MPAlert">

</ajaxControlKit:ConfirmButtonExtender>

<ajaxControlKit:ModalPopupExtender ID="MPAlert" runat="server" TargetControlID="DeleteImageButton"

PopupControlID="PNL" OkControlID="ButtonOk" CancelControlID="ButtonCancel" BackgroundCssClass="modalBackground">

</ajaxControlKit:ModalPopupExtender>

<asp:Panel ID="PNL" CssClass="panel" runat="server" Style="display: none; z-index: 100;

text-align: center; width: 250px; background-color: Gray; border-width: 2px;

border-color: Black; border-style: solid; padding: 10px 20px 20px 30px">

Are you sure you want to delete this <b>'<%# DataBinder.Eval(Container.DataItem, "Filename")%>'</b>

<asp:Button ID="ButtonOk" runat="server" CssClass="adminbutton" Text="OK" />

<asp:Button ID="ButtonCancel" runat="server" CssClass="adminbutton" Text="Cancel" />

</div>

</asp:Panel>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

<asp:ObjectDataSource ID="ODSFinalUpload" SelectMethod="Select_FinalUpload" TypeName="MyCityEats.DataAccess.BLL.ExcuteMethods"

runat="server">

<asp:QueryStringParameter Name="id" QueryStringField="xusid" Type="Int32" />

</SelectParameters>

</asp:ObjectDataSource>

</div>

</asp:Content>

aspx.cs code:

--------------------

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Krystalware.SlickUpload;

using Krystalware.SlickUpload.Configuration;

using Krystalware.SlickUpload.Storage;

using Krystalware.SlickUpload.Storage.Streams;

using Krystalware.SlickUpload.Web;

using Krystalware.SlickUpload.Web.Controls;

using Krystalware.SlickUpload.Web.Controls.Design;

using Krystalware.SlickUpload.Web.Handlers;

using Krystalware.SlickUpload.Web.Mvc;

using Krystalware.SlickUpload.Web.SessionStorage;

using MyCityEats.DataAccess.DAL;

using MyCityEats.DataAccess.BLL;

namespace MyCityEats.admin

{

public partial class FinalUploadtoFTP : System.Web.UI.Page

{

public int xusid;

public string filename;

ExcuteMethods ObjExe = new ExcuteMethods();

protected void Page_Load(object sender, EventArgs e)

{

if (Session["xusid"] != null && Session["xusid"].ToString() != "")

{

int xusid = Convert.ToInt32(Session["xusid"]);

}

protected void UploadConnector1_UploadComplete(object sender, Krystalware.SlickUpload.Web.Controls.UploadSessionEventArgs e)

{

uploadResult.Text = "Upload Result: " + e.UploadSession.State.ToString();

if (e.UploadSession.State == UploadState.Error)

uploadResult.Text += ". Error: " + e.UploadSession.ErrorSummary;

if (e.UploadSession.State == UploadState.Complete)

{

uploadFileList.DataSource = e.UploadSession.UploadedFiles;

uploadFileList.DataBind();

int xusid = Convert.ToInt32(Session["xusid"]);

foreach (UploadedFile get in e.UploadSession.UploadedFiles)

{

filename = filename + get.ClientName +",";

}

ObjExe.AddFinalUpload(xusid, filename);

GridFinalUpload.DataBind();

}

protected void GridFinalUpload_RowCommand(object sender, GridViewCommandEventArgs e)

{

if (e.CommandName == "cmddelete")

{

int id = Convert.ToInt32(e.CommandArgument);

try

{

int xusid = Convert.ToInt32(Session["xusid"]);

ExcuteMethods ObjExe = new ExcuteMethods();

ObjExe.DeleteFinalUpload(id, xusid);

ErrorLabel.Visible = true;

}

catch (Exception ex)

{

ErrorLabel.Text = ex.Message;

}

GridFinalUpload.DataBind();

}

Web Config changes:

--------------------------------

2.<modules runAllManagedModulesForAllRequests="true">

</modules>

3.<httpModules>

</httpModules>

1.<section name="slickUpload"

         type="Krystalware.SlickUpload.Configuration.SlickUploadSection, Krystalware.SlickUpload"

         requirePermission="false" />

2. <slickUpload>

<uploadProfiles>

        <add name="default">

            <uploadStreamProvider type="File" location="~/Files" />

        </add>

    </uploadProfiles>

</slickUpload>

Reference:

 Reference site:http://krystalware.com/slickupload/documentation/installation

Jeba Suthan

Monday, August 20, 2012

How to Upload Bulk Image and Drag and Drop the Images Using ASP.NET

How to Upload Bulk Image and Drag and Drop the Images

No comments:

Post a Comment