Here is the simple code. The Hashtable is used to store the value and then pass to my database. Please check it.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HM103.aspx.cs" Inherits="HR.Views.SPNHRMST.HM103" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void MultiUpload1_FileUpload(object sender, FileUploadEventArgs e)
{
var ht1 = new Hashtable();
ht1.Add("@USRID", admin.UserId);
ht1.Add("@DTETIM", wdGenDte);
ht1.Add("@PGMID", pgmid);
ht1.Add("@ACTFLG", 1);
ht1.Add("@FDESC", txtFDesc.Text);
X.Msg.Notify("File is uploaded", "Name: " + e.FileName).Show();
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var loadFailed = function () {
alert("Something went wrong while loading SWFUpload. If this were a real application we'd clean up and then give you an alternative");
};
var statusIconRenderer = function (v, p, record, rowIndex) {
var value = record.data.status;
switch (value) {
default:
return value;
case 'Pending':
return '<img src="' + Ext.net.ResourceMgr.getIconUrl("Hourglass") + '" width=16 height=16>';
case 'Sending':
return '<div src="x-loading-indicator" width=16 height=16>';
case 'Error':
return '<img src="' + Ext.net.ResourceMgr.getIconUrl("Decline") + '" width=16 height=16>';
case 'Cancelled':
case 'Aborted':
return '<img src="' + Ext.net.ResourceMgr.getIconUrl("Decline") + '" width=16 height=16>';
case 'Uploaded':
return '<img src="' + Ext.net.ResourceMgr.getIconUrl("Tick") + '" width=16 height=16>';
}
};
var updateRecord = function (id, field, value) {
var rec = App.tblDetail.store.getById(id);
rec.set(field, value);
rec.commit();
};
var abortUpload = function (btn) {
var selModel = btn.up('grid').getSelectionModel(),
records;
if (!selModel.hasSelection()) {
Ext.Msg.alert('Error', 'Please select an upload to cancel');
return true;
}
records = selModel.getSelection();
App.MultiUpload1.abortUpload(records[0].getId());
};
var removeUpload = function (btn) {
var selModel = btn.up('grid').getSelectionModel(),
records;
if (!selModel.hasSelection()) {
Ext.Msg.alert('Error', 'Please select an upload to remove');
return true;
}
records = selModel.getSelection();
App.MultiUpload1.removeUpload(records[0].getId());
};
var fileSelected = function (item, file) {
//Example of cancelling a file to be selection
if (file.name == 'image.jpg') {
Ext.Msg.alert('Error', 'You cannot upload a file named "image.jpg"');
return false;
}
this.up('grid').store.add({
name: file.name,
size: file.size,
status: 'Pending',
progress: 0
});
};
var uploadError = function (item, file, errorCode, message) {
updateRecord(file.name, 'progress', 0);
updateRecord(file.name, 'status', 'Error');
switch (errorCode) {
case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
alert("Error Code: HTTP Error, File name: " + file.name + ", Message: " + message);
break;
case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:
alert("Error Code: Upload Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
case SWFUpload.UPLOAD_ERROR.IO_ERROR:
alert("Error Code: IO Error, File name: " + file.name + ", Message: " + message);
break;
case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:
alert("Error Code: Security Error, File name: " + file.name + ", Message: " + message);
break;
case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
alert("Error Code: Upload Limit Exceeded, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:
updateRecord(file.name, 'status', 'Cancelled');
break;
case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
updateRecord(file.name, 'status', 'Stopped');
break;
case SWFUpload.UPLOAD_ERROR.FILE_ABORTED:
updateRecord(file.name, 'status', 'Aborted');
break;
default:
updateRecord(file.name, 'status', "Unhandled Error: " + errorCode);
alert("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
}
};
var fileSelectionError = function (item, file, errorCode, message) {
if (errorCode === SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED) {
alert("You have attempted to queue too many files.\n" + (message === 0 ? "You have reached the upload limit." : "You may select " + (message > 1 ? "up to " + message + " files." : "one file.")));
return;
}
switch (errorCode) {
case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
alert("Error Code: File too big, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
alert("Error Code: Zero byte file, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
alert("Error Code: Invalid File Type, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
default:
alert("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
}
};
var EncodeText = function (a) {
debugger;
Hidden1.value = a.value;
//Button1.fireEvent('click');
App.direct.Command(a.value);
};
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<asp:SqlDataSource ID="sfmHeader" runat="server" OnLoad="sfmHeader_OnLoad"></asp:SqlDataSource>
<ext:Hidden ID="Hidden1" runat="server" />
<ext:Panel ID="MainPanel" runat="server" DeferredRender="false" Width="610" Height="675">
<TopBar>
<ext:Toolbar ID="ToolBar1" runat="server" Layout="FitLayout">
<Items>
<ext:TextArea ID="txtFDesc" runat="server" Width="610" Height="50"/>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:GridPanel ID="tblDetail" runat="server" Width="610" Height="625" Frame="true">
<Store>
<ext:Store ID="stoUpload" runat="server">
<Model>
<ext:Model ID="UploadModel" runat="server" IDProperty="name">
<Fields>
<ext:ModelField Name="name" />
<ext:ModelField Name="size" />
<ext:ModelField Name="status" />
<ext:ModelField Name="progress" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" DataIndex="name" Width="250" />
<ext:Column ID="Column2" runat="server" DataIndex="size" Width="100">
<Renderer Format="FileSize" />
</ext:Column>
<ext:Column ID="Column3" runat="server" Text=" " DataIndex="Dummy" Width="30">
<Renderer Fn="statusIconRenderer" />
</ext:Column>
<ext:Column ID="Column4" runat="server" DataIndex="status" Width="80" />
<ext:ProgressBarColumn ID="ProgressBarColumn1" runat="server" DataIndex="progress" />
</Columns>
</ColumnModel>
<TopBar>
<ext:Toolbar ID="Toolbar2" runat="server">
<Items>
<ext:MultiUpload ID="MultiUpload1" runat="server" OnFileUpload="MultiUpload1_FileUpload"
FileDropAnywhere="true" FileSizeLimit="15 MB" FileTypes="*.pdf" FileTypesDescription="All Files"
FileUploadLimit="100" FileQueueLimit="0">
<Listeners>
<SwfUploadLoadFailed Fn="loadFailed" />
<FileSelected Fn="fileSelected" />
<UploadStart Handler="updateRecord(file.name, 'status', 'Sending');" />
<UploadProgress Handler="updateRecord(file.name, 'progress', Math.round(bytesComplete / bytesTotal));" />
<UploadSuccess Handler="updateRecord(file.name, 'progress', 1 );updateRecord(file.name, 'status', 'Uploaded' );" />
<%--<UploadComplete Handler="updateRecord(file.name, 'progress', 1 );updateRecord(file.name, 'status', 'Uploaded' );" />--%>
<UploadAborted Handler="updateRecord(file.name, 'status', 'Aborted');" />
<UploadRemoved Handler="var store = this.up('grid').store; store.remove(store.getById(file.name));" />
<UploadError Fn="uploadError" />
<FileSelectionError Fn="fileSelectionError" />
</Listeners>
<Button>
<ext:Button ID="cmdBrowse" runat="server" />
</Button>
</ext:MultiUpload>
<ext:ToolbarSeparator />
<ext:Button ID="cmdStartUp" runat="server" Icon="Tick" Handler="#{MultiUpload1}.startUpload();" />
<ext:Button ID="cmdAbort" runat="server" Icon="Decline" Handler="abortUpload" />
<ext:Button ID="cmdAbortAll" runat="server" Icon="Decline" Handler="#{MultiUpload1}.abortAllUploads();" />
<ext:Button ID="cmdRemove" runat="server" Icon="Delete" Handler="removeUpload" />
<ext:Button ID="cmdRemoveAll" runat="server" Icon="Delete" Handler="#{MultiUpload1}.removeAllUploads();" />
</Items>
</ext:Toolbar>
</TopBar>
</ext:GridPanel>
</Items>
</ext:Panel>
</form>
</body>
</html>
