Thanks Daniil,
I did use the IE developer tools and traced it down to the following error:
Ext.get(this.multiUpload.movieElement).applyStyles ("position:absolute;top:0px;left:0px;z-index:100;").setOpacity(0,false);this.syncFlashSiz e();return this.fireEvent("swfuploadloaded",this);},createUpl oadButton:function(){if(!this.flashButton){var cfg=this.button||{text:"Browse..."};cfg.renderTo=t his.el.first("div");cfg.disabled=this.disabled;cfg .style="position:absolute;top:0px;left:0px;z-index:50;";this.button=Ext.ComponentManager.create (cfg,"button");this.bindButtonListeners();this.but ton.on("resize",this.syncFlashSize,this);}},bindBu ttonListeners:function(){Ext.get(this.multiUpload. movieElement).on({scope:this,mouseenter:function() {this.button.addClsWithUI(this.button.overCls);},m ouseleave:function(){this.button.removeClsWithUI(t his.button.overCls);},mousedown:function(){this.bu tton.addClsWithUI(this.button.pressedCls);},mouseu p:function(){this.button.removeClsWithUI(this.butt on.pressedCls);}});},
-->Unable to get property 'on' of undefined or null reference <-- (At this point is the error: this.multiUpload.movieElement <-- movieElement is null)
syncFlashSize:function(){if(this.button){var size=this.button.getSize();Ext.get(this.multiUploa d.movieElement).setSize(size);this.el.first("div") .setHeight(size.height);this.setSize(size);}},init DragDropElement:function(el){el.on({dragenter:func tion(e){e.browserEvent.dataTransfer.dropEffect="mo ve";return true;},dragover:function(e){e.browserEvent.dataTra nsfer.dropEffect="move";e.stopEvent();return true;},drop:function(e){var files=e.browserEvent.dataTransfer.files,len;e.stop Event();if(!files){return true;}
The partial view definition:
@{
ViewBag.Title = "_externalUpload";
var X = Html.X();
}
<script type="text/javascript">
var loadFailed = function () {
Ext.Msg.alert("Error", "Something went wrong while loading SWFUpload.");
return false;
};
var statusIconRenderer = function (value) {
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.UploadGrid.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.externalUpload.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.externalUpload.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:
alert("Error Code: File Validation Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
updateRecord(file.id, 'status', 'Cancelled');
break;
case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
updateRecord(file.id, 'status', 'Stopped');
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;
}
};
var getExternalFileNode = function () {
var strNode = '';
var node = App.treePatientPages.store.getNodeById('externalFiles');
if (node) {
strNode = App.treePatientPages.convertToSubmitNode(node);
}
return strNode;
};
</script>
@(
X.Window()
.Width(500)
.Height(400)
.Modal(true)
.BodyPadding(5)
.AnchorHorizontal("c")
.AnchorVertical("c")
.Icon(Icon.Package)
.Title("Add External Documents")
.CloseAction(CloseAction.Destroy)
.Closable(false)
.Layout(LayoutType.Fit)
.Items(
X.FormPanel()
.ID("Form1")
.Items(
X.Hidden().ID("externalNode"),
X.GridPanel()
.ID("UploadGrid")
//.EmptyText("Drag and drop files anywhere on this form that are desired")
.Store(
X.Store()
.ID("storeUpload")
.Model(
X.Model()
.ID("modelUpload")
.IDProperty("id")
.Fields(
X.ModelField().Name("id"),
X.ModelField().Name("name"),
X.ModelField().Name("size"),
X.ModelField().Name("status"),
X.ModelField().Name("progress")
)
)
)
.ColumnModel(
X.Column().Text("File Name").DataIndex("name").Width(225),
X.Column().Text("Size").DataIndex("size").Width(60).Renderer(RendererFormat.FileSize),
X.Column().Text(" ").DataIndex("status").Width(30).Renderer("statusIconRenderer"),
X.Column().Text("Status").DataIndex("status").Width(60),
X.ProgressBarColumn().Text("Progress").DataIndex("progress")
)
.TopBar(
X.Toolbar()
.Items(
X.MultiUpload()
.ID("externalUpload")
.UploadUrl(Url.Action("ExternalFilesUpload", "Home"))
.FileDropAnywhere(false)
.FileSizeLimit("2 MB")
.FileTypes("*.tif;*.pdf;*.doc;*.docx")
.FileTypesDescription("Packager File Types")
.FileUploadLimit(100)
.FileQueueLimit(0)
.FormID("Form1")
.Listeners(l =>
{
l.SwfUploadLoadFailed.Fn = "loadFailed";
l.FileSelected.Fn = "fileSelected";
l.UploadStart.Handler = "updateRecord(file.id, 'status', 'Sending'); getExternalFileNode();";
l.UploadProgress.Handler = "updateRecord(file.id, 'progress', Math.round(bytesComplete / bytesTotal));";
l.UploadComplete.Handler = "updateRecord(file.id, 'progress', 1); updateRecord(file.id, 'status', 'Uploaded' );"; //completeUpload(file.id, 'status', 'Uploaded', file.name);";
l.UploadAborted.Handler = "updateRecord(file.id, 'status', 'Aborted');";
l.UploadRemoved.Handler = "var store = this.up('grid').store; store.remove(store.getById(file.id));";
l.UploadError.Handler = "uploadError";
l.FileSelectionError.Fn = "fileSelectionError";
}),
X.ToolbarSeparator(),
X.Button().Text("Start Upload").Icon(Icon.Tick).Handler("#{externalUpload}.startUpload();"),
X.Button().Text("Abort").Icon(Icon.Decline).Handler("abortUpload"),
X.Button().Text("Abort All").Icon(Icon.Decline).Handler("#{externalUpload}.abortAllUploads();"),
X.Button().Text("Remove All").Icon(Icon.Delete).Handler("#{externalUpload}.removeAllUploads();")
)
)
)
)
.Buttons(
X.Button().Text("Close").Icon(Icon.PackageGo)
.DirectEvents(de =>
{
de.Click.Url = Url.Action("UploadComplete", "Home");
de.Click.ExtraParams.Add(new Parameter("package", "App.storePackage.getRecordsValues()[0]", ParameterMode.Raw));
de.Click.ExtraParams.Add(new Parameter("patientMRN", "getPatientData('mrn')", ParameterMode.Raw));
de.Click.ExtraParams.Add(new Parameter("uploadedFiles", "App.UploadGrid.getStore().getRecordsValues()", ParameterMode.Raw));
de.Click.ExtraParams.Add(new Parameter("externalNode", "getExternalFileNode()", ParameterMode.Raw));
de.Click.EventMask.ShowMask = true;
de.Click.EventMask.Msg = "Incorporating external documents...";
de.Click.Success = "AddTreeNodes(result); this.up('window').close();";
de.Click.Failure = "this.up('window').close();";
}),
X.Button().Text("Cancel").Icon(Icon.Cancel).Handler("this.up('window').close();")
)
)
Please let me know if you see something that I am doing incorrect.
Thanks
Russ
Originally Posted by rsnead
