MultiUpload does not work under panel

**cwtsang1012** · Jul 28, 2014, 3:14 AM

Hello,

I have a multiUpload under another panel. However, I can't trigger the MultiUpload1_FileUpload when I press the button to start upload. What can I do to solve this problem?

<head runat="server">
    <title></title>
    <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) {
            debugger;
            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({
                id: file.id,
                name: file.name,
                size: file.size,
                status: 'Pending',
                progress: 0
            });
        };

        var uploadError = function (item, file, errorCode, message) {
            updateRecord(file.id, 'progress', 0);
            updateRecord(file.id, '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.id, 'status', 'Cancelled');
                    break;
                case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
                    updateRecord(file.id, 'status', 'Stopped');
                    break;
                case SWFUpload.UPLOAD_ERROR.FILE_ABORTED:
                    updateRecord(file.id, 'status', 'Aborted');
                    break;
                default:
                    updateRecord(file.id, '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;
            }
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <asp:SqlDataSource 
        ID="sfmHeader"
        runat="server"
        OnLoad="sfmHeader_OnLoad" 
        OnUpdating="sfmHeader_OnUpdating">
    </asp:SqlDataSource>

    <ext:Panel ID="MainPanel" runat="server" Width="570" Height="675">
        <TopBar>
            <ext:Toolbar ID="ToolBar1" runat="server">
                <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" Mapping="TMHFNAM"/>
                                    <ext:ModelField Name="size" />
                                    <ext:ModelField Name="status" />
                                    <ext:ModelField Name="progress" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <%--<BottomBar>
            <ext:Toolbar ID="ToolBar" runat="server">
                <Items>
                    <ext:TextArea ID="TextArea1" runat="server" FieldLabel="File Description:" Width="550" Height="50"/>
                </Items>
            </ext:Toolbar> 
        </BottomBar>--%>
                <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="&nbsp;" 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" FormID="form1" 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.id, 'status', 'Sending');" />
                                    <UploadProgress Handler="updateRecord(file.id, 'progress', Math.round(bytesComplete / bytesTotal));" />
                                    <UploadSuccess Handler="updateRecord(file.id, 'progress', 1 );updateRecord(file.id, 'status', 'Uploaded' );" />
                                    <%--<UploadComplete Handler="updateRecord(file.id, 'progress', 1 );updateRecord(file.id, 'status', 'Uploaded' );" />--%>
                                    <UploadAborted Handler="updateRecord(file.id, 'status', 'Aborted');" />
                                    <UploadRemoved Handler="var store = this.up('grid').store; store.remove(store.getById(file.id));" />
                                    <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>

I found out that there is an error "Cannot read property 'store' of undefined". Hope it can help both of you know more about my situation.

**geoffrey.mcgill** · Jul 28, 2014, 4:37 AM

Hello,

I tried the code sample you provided, but it was throwing Exceptions and I was unable to reproduce the problem.

**cwtsang1012** · Jul 28, 2014, 5:44 AM

The below code is in my code behind. You can try it again. Thank you so much.

Now, I find that the App.tblDetail.store.getById does not work. It returns null and thus cause error.

public partial class HM103 : BasePage
    {
        public override string pgmid
        {
            get
            {
                return "HM103";
            }
        }

        public struct tbl
        {
            public const int Header = 0;
        }

        private string wsKeyType
        {
            get
            {
                return "SLIPFILMAP";
            }
        }

        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);

            if (!Page.IsPostBack)
            {
                Ini_Page();
            }
            wdGenDte = Get_ServerTime();
        }

        protected void sfmHeader_OnLoad(object sender, EventArgs e)
        {
            if (waResult != null)
            {
                DataSet ds = waResult;
                ini_PrimaryKey(tbl.Header);
                ini_GridConnect(ref sfmHeader, ref tblDetail, ds.Tables[tbl.Header], "TMPHM103HD");
            }

        }

        protected void sfmHeader_OnUpdating(object sender, System.Web.UI.WebControls.SqlDataSourceCommandEventArgs e)
        {
            string temp = "testing";
        }

        protected void ini_PrimaryKey(int inTblIdx)
        {
            DataTable dt;
            DataColumn[] dc;

            dt = waResult.Tables[tbl.Header];
            dc = new DataColumn[3];
            dc[0] = dt.Columns["TMHUSRID"];
            dc[1] = dt.Columns["TMHDTETIM"];
            dc[2] = dt.Columns["TMHFNAM"];

            dt.PrimaryKey = dc;
        }


        protected void MultiUpload1_FileUpload(object sender, FileUploadEventArgs e)
        {
            HttpFileCollection hfc = Request.Files;
            for (int i = 0; i < hfc.Count; i++)
            {
                HttpPostedFile hpf = hfc[i];
                if (hpf.ContentLength > 0)
                {
                    string folderName = hpf.FileName.Split('_').ToArray().First();
                    string path = "~/Payslip/" + folderName;
                    if (!Directory.Exists(Server.MapPath(path)))
                    {
                        Directory.CreateDirectory(Server.MapPath(path));
                    }
                    path = path + "/";
                    hpf.SaveAs(Server.MapPath(path) + System.IO.Path.GetFileName(hpf.FileName));
                }
            }

            X.Msg.Notify("File is uploaded", "Name: " + e.FileName).Show();
        }

**geoffrey.mcgill** · Jul 28, 2014, 1:29 PM

Hi,

I tried to piece your samples together again, but Exceptions are still being thrown. I was unable to test the problem.

Thread: MultiUpload does not work under panel

Thread Tools

Search Thread

Display

MultiUpload does not work under panel

Similar Threads

[CLOSED] MultiUpload1_FileUpload does not work when MultiUpload Grid created in codebehind

ITemplate .InstantiateIn not work with ext panel

Can't get it to work (grid panel)

[CLOSED] Cls does not work for panel background

How does the Keys propery work in a panel?

Posting Permissions

Sitemap

Downloads

Resources

Thread: MultiUpload does not work under panel

MultiUpload does not work under panel

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us