Mar 10, 2015, 6:23 PM
[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
I have create patch, but I think there might be better way to solve that problem.
To reproduce the issue please use following page (all included in one)
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]