[OPEN] [#755] MultiUpload cannot be removed from container using .removeAll() (client side)

  1. #1

    [OPEN] [#755] MultiUpload cannot be removed from container using .removeAll() (client side)

    Hi,

    In my SPA I use ext:Container to load my views (in my case these are User Controls .ascx). On the client side I use ext:Container.removeAll(true) to destroy everything in loaded user control. When I call .removeAll(true) having Multiupload loaded then I get exception in

    Ext.define('Ext.event.publisher.Dom', {
    ...
        removeDirectListener: function(eventName, element, capture) {
            element.dom.removeEventListener(eventName, capture ? this.onDirectCaptureEvent : this.onDirectEvent, capture);
        },
    element.dom which is swfUpload doesn't have removeEventListener.


    I have create patch, but I think there might be better way to solve that problem.

    Ext.event.publisher.Dom.override( {
    
                    removeDirectListener: function (eventName, element, capture) {
    
                        if (element.dom.removeEventListener) {
                            element.dom.removeEventListener(eventName, capture ? this.onDirectCaptureEvent : this.onDirectEvent, capture);
                        }
                        
                    },
    
                });


    To reproduce the issue please use following page (all included in one)


    <%@ Page Language="C#" AutoEventWireup="false" CodeBehind="UploadPage.aspx.cs" Inherits="Problem.UploadPage" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    
    <script runat="server">
    
        protected void OnFileUpload(object sender, FileUploadEventArgs e)
        {
            X.Msg.Notify(
                e.FileName,
                "Upload").Show();
        }
    </script>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Upload Page</title>
        <script>
    
            //Ext.onReady(function() {
    
            //    Ext.event.publisher.Dom.override( {
    
            //        removeDirectListener: function (eventName, element, capture) {
    
            //            if (element.dom.removeEventListener) {
            //                element.dom.removeEventListener(eventName, capture ? this.onDirectCaptureEvent : this.onDirectEvent, capture);
            //            }                    
            //        },
            //    });
            //});
    
    
            Problem = {
    
                /**
                 * 
                 */
                loadFailed: function () {
    
                    alert("File upload is not supported in this web browser.");
                },
    
                /**
                 * 
                 */
                updateRecord: function (id, field, value) {
                    var rec = App.UploadGrid.store.getById(id);
    
                    rec.set(field, value);
                    rec.commit();
                },
    
                /**
                 * 
                 */
                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.grdUploads.abortUpload(records[0].getId());
                },
    
                /**
                 * 
                 */
                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.grdUploads.removeUpload(records[0].getId());
                },
    
                /**
                 * 
                 */
                fileSelected: function (item, file) {
                    // Example of cancelling a file
                    if (file.name == 'image.jpg') {
                        Ext.Msg.alert('Error', 'You cannot upload the file named "image.jpg"');
                        return false;
                    }
    
                    this.up('grid').store.add({
                        id: file.id,
                        name: file.name,
                        size: file.size,
                        status: 'Pending',
                        progress: 0
                    });
                },
    
                /**
                 * 
                 */
                uploadError: function (item, file, errorCode, message) {
                    theGridCtrl.updateRecord(file.id, 'progress', 0);
                    theGridCtrl.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:
                            alert("Error Code: File Validation Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
                            break;
                        case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
                            theGridCtrl.updateRecord(file.id, 'status', 'Cancelled');
                            break;
                        case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
                            theGridCtrl.updateRecord(file.id, 'status', 'Stopped');
                            break;
                        default:
                            theGridCtrl.updateRecord(file.id, 'status', "Unhandled Error: " + errorCode);
                            alert("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
                            break;
                    }
                },
    
    
                /**
                 * 
                 */
                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 runat="server">
            <ext:ResourceManager runat="server" ScriptMode="Debug" />
    
            <ext:Viewport
                runat="server"
                Layout="BorderLayout">
                <Items>
    
                    <ext:Container runat="server" Region="Center" ID="view" Layout="FitLayout">
                        <Items>
    
                            <ext:GridPanel
                                ID="UploadGrid"
                                runat="server"
                                Border="false"
                                Frame="false">
                                <Store>
                                    <ext:Store runat="server">
                                        <Model>
                                            <ext:Model runat="server" IDProperty="id">
                                                <Fields>
                                                    <ext:ModelField Name="id" />
                                                    <ext:ModelField Name="name" />
                                                    <ext:ModelField Name="size" />
                                                    <ext:ModelField Name="status" />
                                                    <ext:ModelField Name="progress" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                    </ext:Store>
                                </Store>
                                <ColumnModel>
                                    <Columns>
                                        <ext:Column
                                            runat="server"
                                            Text="File Name"
                                            DataIndex="name"
                                            Width="200"
                                            MenuDisabled="true"
                                            Flex="1" />
    
                                        <ext:Column
                                            runat="server"
                                            Text="Size"
                                            DataIndex="size"
                                            Width="200"
                                            MenuDisabled="true">
                                            <Renderer Format="FileSize" />
                                        </ext:Column>
                                        <ext:Column
                                            runat="server"
                                            Text="Status"
                                            DataIndex="status"
                                            Width="200"
                                            MenuDisabled="true" />
    
                                        <ext:ProgressBarColumn
                                            runat="server"
                                            Text="Progress"
                                            DataIndex="progress"
                                            MenuDisabled="true"
                                            Flex="1" />
                                    </Columns>
                                </ColumnModel>
                                <TopBar>
                                    <ext:Toolbar Frame="false" runat="server">
                                        <Items>
                                            <ext:MultiUpload
                                                ID="grdUploads"
                                                runat="server"
                                                OnFileUpload="OnFileUpload"
                                                FileDropAnywhere="true"
                                                FileSizeLimit="2048 MB"
                                                FileTypes="*.*"
                                                FileTypesDescription="All Files"
                                                FileUploadLimit="100"
                                                FileQueueLimit="12">
                                                <Listeners>
                                                    <SwfUploadLoadFailed
                                                        Fn="Problem.loadFailed" />
    
                                                    <FileSelected
                                                        Fn="Problem.fileSelected" />
    
                                                    <UploadStart
                                                        Handler="Problem.updateRecord(file.id, 'status', 'Sending');" />
    
                                                    <UploadProgress
                                                        Handler="Problem.updateRecord(file.id, 'progress', bytesComplete / bytesTotal);" />
    
                                                    <UploadComplete
                                                        Handler="
                                                    Problem.updateRecord(file.id, 'progress', 1 ); 
                                                    Problem.updateRecord(file.id, 'status', 'Uploaded' ); " />
    
                                                    <UploadAborted
                                                        Handler="Problem.updateRecord(file.id, 'status', 'Aborted');" />
    
                                                    <UploadRemoved
                                                        Handler="
                                                    var store = this.up('grid').store; 
                                                        store.remove(store.getById(file.id));" />
                                                    <UploadError
                                                        Fn="Problem.uploadError"
                                                        Scope="Problem" />
    
                                                    <FileSelectionError
                                                        Fn="Problem.fileSelectionError" />
    
                                                </Listeners>
                                            </ext:MultiUpload>
    
                                            <ext:ToolbarSeparator />
    
                                            <ext:Button
                                                runat="server"
                                                Text="Start Upload"
                                                Handler="#{grdUploads}.startUpload();" />
                                        </Items>
                                    </ext:Toolbar>
                                </TopBar>
                            </ext:GridPanel>
                        </Items>
                    </ext:Container>
    
                    <ext:Button
                        runat="server"
                        Region="North"
                        Text="Remove All"
                        Handler="#{view}.removeAll(true);" />
                </Items>
            </ext:Viewport>
    
        </form>
    </body>
    </html>
    Last edited by Daniil; Mar 11, 2015 at 9:03 AM. Reason: [OPEN] [#755]
  2. #2
    Hi Matt,

    Thank you for the report!

    Your workaround is also best what I can come up with.

    IE doesn't' have an implementation for .removeEventListener() for an SWF object.

    Created an Issue to track the defect.
    https://github.com/extnet/Ext.NET/issues/755

Similar Threads

  1. Replies: 1
    Last Post: Dec 01, 2010, 5:14 PM
  2. Replies: 0
    Last Post: Sep 17, 2009, 8:04 AM

Tags for this Thread

Posting Permissions