I modified the "FileUpload" of your ext.net examples to recreate the issue...
This is the broken example once i have added the "Viewport"...
@{
ViewBag.Title = "FormPanel - Ext.NET MVC Examples";
Layout = "~/Views/Shared/_BaseLayout.cshtml";
var X = Html.X ( );
}
@section headtag
{
<style>
#fi-button-msg
{
border: 2px solid #ccc;
padding: 5px 10px;
background: #eee;
margin: 5px;
float: left;
}
</style>
<script>
var OnFileUploadChange = function (sender, newValue, oldValue)
{
debugger;
Ext.net.DirectMethod.request(
{
url: "OnFileSelected",
cleanRequest: true,
isUpload: true,
formId: "UploadForm",
//params:
//{
// token: Core.Token,
// browserPropertyName: newTab.dispatchBrowserPropertyName,
// containerId: newTab.browserContainerId,
//},
success: function (result)
{
window.alert("Success - " + result);
},
failure: function (result)
{
window.alert("Failure - " + result);
}
});
};
var showFile = function (fb, v)
{
debugger;
if (v)
{
var el = Ext.get('fi-button-msg');
el.update('<b>Selected:</b> ' + v);
if (!el.isVisible())
{
el.slideIn('t', {
duration: .2,
easing: 'easeIn',
callback: function ()
{
el.highlight();
}
});
} else
{
el.highlight();
}
}
};
</script>
}
@section example
{
<h1>File Upload Field</h1>
<h2>Basic FileUpload</h2>
<p>
A typical file upload field with Ext style. Direct editing of the text field cannot be done in a
consistent, cross-browser way, so it is always read-only in this implementation.
</p>
<form id="UploadForm">
@(X.Viewport ( )
.Layout ( Ext.Net.LayoutType.Border )
.Items
(
X.FileUploadField ( )
.ID ( "BasicField" )
.Width ( 400 )
.Icon ( Icon.Attach )
.DirectEvents
( de =>
{
de.Change.Url = Url.Action ( "OnFileSelected" );
de.Change.IsUpload = true;
de.Change.FormID = "UploadForm";
}
)
//.Listeners
//(
// l =>
// {
// l.Change.Fn = "OnFileUploadChange";
// }
//)
)
)
</form>
@( X.Button ( )
.Text ( "Get File Path" )
.OnClientClick ( "var v = #{BasicField}.getValue(); Ext.Msg.alert('Selected File', v && v != '' ? v : 'None');" )
)
<h2>Basic FileUpload (Button-only)</h2>
<p>
You can also render the file input as a button without the text field, with access to the field's value via the
standard <tt>TextField</tt> interface or by handling the <tt>FileSelected</tt> event (as in this example).
</p>
@(X.FileUploadField ( )
.ID ( "ButtonOnlyFileUpload" )
.ButtonOnly ( true )
//.DirectEvents
//(
// de =>
// {
// de.Change.Url = "OnButtonOnlyFileSelect";
// }
//)
.Listeners
( l => l.Change.Fn = "showFile" )
)
<div id="fi-button-msg" style="display:none;"></div>
<div class="x-clear"></div>
<h2>Form Example</h2>
<p>
The FileUploadField can also be used in standard form layouts, with support for anchoring, validation (the
field is required in this example), empty text, etc.
</p>
@*<form id="fileUpload" enctype="multipart/form-data">*@
@(X.FormPanel ( )
.ID ( "BasicForm" )
.Width ( 500 )
.Frame ( true )
.Title ( "File Upload Form" )
.Content (
@<text>
<form id="DynamicForm"></form>
</text>)
.PaddingSpec ( "10px 10px 0 10px" )
.FieldDefaults ( fd => fd.LabelWidth = 50 )
.Defaults ( d =>
{
d.Add ( new Parameter ( "anchor" , "95%" , ParameterMode.Value ) );
d.Add ( new Parameter ( "allowBlank" , "false" , ParameterMode.Raw ) );
d.Add ( new Parameter ( "msgTarget" , "side" , ParameterMode.Value ) );
} )
.Items
(
X.TextField ( )
.ID ( "PhotoName" )
.FieldLabel ( "Name" ) ,
X.FileUploadField ( )
.ID ( "FileUploadField1" )
.EmptyText ( "Select an image" )
.FieldLabel ( "Photo" )
.ButtonText ( "" )
.Icon ( Icon.ImageAdd )
)
.Listeners
(
l =>
{
l.ValidityChange.Handler = "#{SaveButton}.setDisabled(!valid);";
}
)
.Buttons (
X.Button ( )
.ID ( "SaveButton" )
.Text ( "Save" )
.Disabled ( true )
.DirectEvents ( de =>
{
de.Click.Url = Url.Action ( "UploadClick" );
de.Click.FormID = "fileUpload";
de.Click.Before = @"if (!#{BasicForm}.getForm().isValid()) { return false; }
Ext.Msg.wait('Uploading your photo...', 'Uploading');";
de.Click.Failure = @"Ext.Msg.show({
title : 'Error',
msg : 'Error during uploading',
minWidth: 200,
modal : true,
icon : Ext.Msg.ERROR,
buttons : Ext.Msg.OK
});";
} ) ,
X.Button ( )
.Text ( "Reset" )
.OnClientClick ( "#{BasicForm}.getForm().reset();" )
)
)
@*</form>*@
}
This is the working example without the viewport...
@{
ViewBag.Title = "FormPanel - Ext.NET MVC Examples";
Layout = "~/Views/Shared/_BaseLayout.cshtml";
var X = Html.X ( );
}
@section headtag
{
<style>
#fi-button-msg
{
border: 2px solid #ccc;
padding: 5px 10px;
background: #eee;
margin: 5px;
float: left;
}
</style>
<script>
var OnFileUploadChange = function (sender, newValue, oldValue)
{
debugger;
Ext.net.DirectMethod.request(
{
url: "OnFileSelected",
cleanRequest: true,
isUpload: true,
formId: "UploadForm",
//params:
//{
// token: Core.Token,
// browserPropertyName: newTab.dispatchBrowserPropertyName,
// containerId: newTab.browserContainerId,
//},
success: function (result)
{
window.alert("Success - " + result);
},
failure: function (result)
{
window.alert("Failure - " + result);
}
});
};
var showFile = function (fb, v)
{
debugger;
if (v)
{
var el = Ext.get('fi-button-msg');
el.update('<b>Selected:</b> ' + v);
if (!el.isVisible())
{
el.slideIn('t', {
duration: .2,
easing: 'easeIn',
callback: function ()
{
el.highlight();
}
});
} else
{
el.highlight();
}
}
};
</script>
}
@section example
{
<h1>File Upload Field</h1>
<h2>Basic FileUpload</h2>
<p>
A typical file upload field with Ext style. Direct editing of the text field cannot be done in a
consistent, cross-browser way, so it is always read-only in this implementation.
</p>
<form id="UploadForm">
@(
X.FileUploadField ( )
.ID ( "BasicField" )
.Width ( 400 )
.Icon ( Icon.Attach )
.DirectEvents
( de =>
{
de.Change.Url = Url.Action ( "OnFileSelected" );
de.Change.IsUpload = true;
de.Change.FormID = "UploadForm";
}
)
//.Listeners
//(
// l =>
// {
// l.Change.Fn = "OnFileUploadChange";
// }
//)
)
</form>
@( X.Button ( )
.Text ( "Get File Path" )
.OnClientClick ( "var v = #{BasicField}.getValue(); Ext.Msg.alert('Selected File', v && v != '' ? v : 'None');" )
)
<h2>Basic FileUpload (Button-only)</h2>
<p>
You can also render the file input as a button without the text field, with access to the field's value via the
standard <tt>TextField</tt> interface or by handling the <tt>FileSelected</tt> event (as in this example).
</p>
@(X.FileUploadField ( )
.ID ( "ButtonOnlyFileUpload" )
.ButtonOnly ( true )
//.DirectEvents
//(
// de =>
// {
// de.Change.Url = "OnButtonOnlyFileSelect";
// }
//)
.Listeners
( l => l.Change.Fn = "showFile" )
)
<div id="fi-button-msg" style="display:none;"></div>
<div class="x-clear"></div>
<h2>Form Example</h2>
<p>
The FileUploadField can also be used in standard form layouts, with support for anchoring, validation (the
field is required in this example), empty text, etc.
</p>
@*<form id="fileUpload" enctype="multipart/form-data">*@
@(X.FormPanel ( )
.ID ( "BasicForm" )
.Width ( 500 )
.Frame ( true )
.Title ( "File Upload Form" )
.Content (
@<text>
<form id="DynamicForm"></form>
</text>)
.PaddingSpec ( "10px 10px 0 10px" )
.FieldDefaults ( fd => fd.LabelWidth = 50 )
.Defaults ( d =>
{
d.Add ( new Parameter ( "anchor" , "95%" , ParameterMode.Value ) );
d.Add ( new Parameter ( "allowBlank" , "false" , ParameterMode.Raw ) );
d.Add ( new Parameter ( "msgTarget" , "side" , ParameterMode.Value ) );
} )
.Items
(
X.TextField ( )
.ID ( "PhotoName" )
.FieldLabel ( "Name" ) ,
X.FileUploadField ( )
.ID ( "FileUploadField1" )
.EmptyText ( "Select an image" )
.FieldLabel ( "Photo" )
.ButtonText ( "" )
.Icon ( Icon.ImageAdd )
)
.Listeners
(
l =>
{
l.ValidityChange.Handler = "#{SaveButton}.setDisabled(!valid);";
}
)
.Buttons (
X.Button ( )
.ID ( "SaveButton" )
.Text ( "Save" )
.Disabled ( true )
.DirectEvents ( de =>
{
de.Click.Url = Url.Action ( "UploadClick" );
de.Click.FormID = "fileUpload";
de.Click.Before = @"if (!#{BasicForm}.getForm().isValid()) { return false; }
Ext.Msg.wait('Uploading your photo...', 'Uploading');";
de.Click.Failure = @"Ext.Msg.show({
title : 'Error',
msg : 'Error during uploading',
minWidth: 200,
modal : true,
icon : Ext.Msg.ERROR,
buttons : Ext.Msg.OK
});";
} ) ,
X.Button ( )
.Text ( "Reset" )
.OnClientClick ( "#{BasicForm}.getForm().reset();" )
)
)
@*</form>*@
}
The controller code...
using System.Web.Mvc;
namespace Ext.Net.MVC.Examples.Areas.Form_FileUploadField.Controllers
{
public class BasicController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult OnButtonOnlyFileSelect ( )
{
Ext.Net.FileUploadField oFileUploadField
= this.GetCmp<Ext.Net.FileUploadField> ( "ButtonOnlyFileUpload" );
if ( oFileUploadField.HasFile )
{
var o = oFileUploadField.PostedFile.InputStream;
}
Ext.Net.MVC.DirectResult oDirectResult
= new Ext.Net.MVC.DirectResult ( );
oDirectResult.IsUpload = true;
return oDirectResult;
}
public ActionResult OnFileSelected ( )
{
Ext.Net.FileUploadField oFileUploadField
= this.GetCmp<Ext.Net.FileUploadField> ( "BasicField" );
if ( oFileUploadField.HasFile )
{
System.IO.Stream oStream
= oFileUploadField.PostedFile.InputStream;
System.Drawing.Image oImage
= System.Drawing.Image.FromStream ( oStream );
// System.Drawing.Imaging.ImageFormat.Jpeg
byte [ ] abytBuffer = new byte [ oStream.Length ];
oStream.Read ( abytBuffer , 0 , (int) oStream.Length );
var oBase64 = System.Convert.ToBase64String ( abytBuffer );
}
Ext.Net.MVC.DirectResult oDirectResult
= new Ext.Net.MVC.DirectResult ( );
oDirectResult.IsUpload = true;
return oDirectResult;
}
public ActionResult UploadClick()
{
string tpl = "Uploaded file: {0}<br/>Size: {1} bytes";
var oFileUploadField
= this.GetCmp<FileUploadField> ( "FileUploadField1" );
if (oFileUploadField.HasFile)
{
X.Msg.Show(new MessageBoxConfig
{
Buttons = MessageBox.Button.OK,
Icon = MessageBox.Icon.INFO,
Title = "Success",
Message
= string.Format(tpl, oFileUploadField.PostedFile.FileName
, oFileUploadField.PostedFile.ContentLength)
});
}
else
{
X.Msg.Show(new MessageBoxConfig
{
Buttons = MessageBox.Button.OK,
Icon = MessageBox.Icon.ERROR,
Title = "Fail",
Message = "No file uploaded"
});
}
DirectResult result = new DirectResult();
result.IsUpload = true;
return result;
}
}
}