PDA

View Full Version : [CLOSED] Problem with FileUploadField



xeo4.it
Dec 07, 2012, 9:56 AM
Hi,
I have tested your "File Upload Field" example, I have updated svn today "At revision: 4635".
When I press "BasicField" FileUploadField I take an error:

var v=this.fileInputEl.dom.value

Cannot read property 'dom' of undefined

I have tested with IE8, Chrome 23.0.1271.95 m, Firefox 14.0.1.


Thank you.

Jimmy




<%@ Page Language="C#" %>


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<script runat="server">
protected void UploadClick(object sender, DirectEventArgs e)
{
string tpl = "Uploaded file: {0}<br/>Size: {1} bytes";

if (this.FileUploadField1.HasFile)
{
X.Msg.Show(new MessageBoxConfig
{
Buttons = MessageBox.Button.OK,
Icon = MessageBox.Icon.INFO,
Title = "Success",
Message = string.Format(tpl, this.FileUploadField1.PostedFile.FileName, this.FileUploadField1.PostedFile.ContentLength)
});
}
else
{
X.Msg.Show(new MessageBoxConfig
{
Buttons = MessageBox.Button.OK,
Icon = MessageBox.Icon.ERROR,
Title = "Fail",
Message = "No file uploaded"
});
}
}
</script>


<!DOCTYPE html>


<html>
<head id="Head1" runat="server">
<title>FormPanel - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<style>
#fi-button-msg {
border: 2px solid #ccc;
padding: 5px 10px;
background: #eee;
margin: 5px;
float: left;
}
</style>

<script>
var showFile = function (fb, v) {
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>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<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>

<ext:FileUploadField ID="BasicField" runat="server" Width="400" Icon="Attach" />

<ext:Button ID="Button1" runat="server" Text="Get File Path">
<Listeners>
<Click Handler="var v = #{BasicField}.getValue(); Ext.Msg.alert('Selected&nbsp;File', v && v != '' ? v : 'None');" />
</Listeners>
</ext:Button>


<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>

<ext:FileUploadField ID="FileUploadField1" runat="server" ButtonOnly="true">
<Listeners>
<Change Fn="showFile" />
</Listeners>
</ext:FileUploadField>

<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>

<ext:FormPanel
ID="BasicForm"
runat="server"
Width="500"
Frame="true"
Title="File Upload Form"
AutoHeight="true"
PaddingSummary="10px 10px 0 10px"
LabelWidth="50">
<Defaults>
<ext:Parameter Name="anchor" Value="95%" Mode="Value" />
<ext:Parameter Name="allowBlank" Value="false" Mode="Raw" />
<ext:Parameter Name="msgTarget" Value="side" Mode="Value" />
</Defaults>
<Items>
<ext:TextField ID="PhotoName" runat="server" FieldLabel="Name" />
<ext:FileUploadField
ID="FileUploadField2"
runat="server"
EmptyText="Select an image"
FieldLabel="Photo"
ButtonText=""
Icon="ImageAdd"
/>
</Items>
<Listeners>
<ValidityChange Handler="#{SaveButton}.setDisabled(!valid);" />
</Listeners>
<Buttons>
<ext:Button ID="SaveButton" runat="server" Text="Save" Disabled="true">
<DirectEvents>
<Click
OnEvent="UploadClick"
Before="if (!#{BasicForm}.getForm().isValid()) { return false; }
Ext.Msg.wait('Uploading your photo...', 'Uploading');"

Failure="Ext.Msg.show({
title : 'Error',
msg : 'Error during uploading',
minWidth: 200,
modal : true,
icon : Ext.Msg.ERROR,
buttons : Ext.Msg.OK
});">
</Click>
</DirectEvents>
</ext:Button>
<ext:Button ID="Button2" runat="server" Text="Reset">
<Listeners>
<Click Handler="#{BasicForm}.getForm().reset();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:FormPanel>
</form>
</body>
</html>

Vladimir
Dec 07, 2012, 10:49 AM
Unfortunately, I cannot reproduce the issue, all work fine on my side
May be you can provide more details? Or can you create online test sample?

xeo4.it
Dec 07, 2012, 12:55 PM
Hi Vladimir,
I have tested the example in my Asp.net Development Server on my XP pro with Ext.Net.vs2010.sln with Microsoft Visual Studio 2010 Professional Version 10.0.40219.1 SP1Rel Microsoft .NET Framework Version 4.0.30319 SP1Rel
I launch the Default.aspx page in Ext.Net.Examples, after I open the Form --> FileUploadField --> Basic
In firefox Firebug I take the "TypeError: this.fileInputEl is undefined var v = this.fileInputEl.dom.value, ext.axd?v=21097 (row 7365)"

Beautify code



Ext.form.field.File.override({
stripPath: true,
isIconIgnore: function () {
return true;
},
onFileChange: function () {
this.lastValue = null;
if (this.stripPath === false) {
Ext.form.field.File.superclass.setValue.call(this, this.fileInputEl.dom.value);
return;
}
//THIS ROW *******************
var v = this.fileInputEl.dom.value,
fileNameRegex = /[^\\]*$/im,
match = fileNameRegex.exec(v);
if (match !== null) {
v = match[0];
}
Ext.form.field.File.superclass.setValue.call(this, v);
},
onEnable: function () {
var me = this;
me.callParent();
me.fileInputEl.dom.removeAttribute("disabled");
this['buttonEl-btnEl'].dom.removeAttribute("disabled");
me.browseButtonWrap.child('.x-btn').removeCls(["x-item-disabled", "x-btn-disabled"]);
},
disableItems: function () {
var file = this.fileInputEl;
if (file) {
file.dom.disabled = true;
}
this['buttonEl-btnEl'].dom.disabled = true;
this.browseButtonWrap.child('.x-btn').addCls(["x-item-disabled", "x-btn-disabled"]);
},
checkChange: function () {
if (!this.suspendCheckChange) {
var me = this,
newVal = me.getValue(),
oldVal = me.lastValue;
if (!me.isEqual(newVal, oldVal) && !me.isDestroyed && !Ext.isEmpty(newVal)) {
me.lastValue = newVal;
me.fireEvent('change', me, newVal, oldVal);
me.onChange(newVal, oldVal);
}
}
}
});


I have created an example page online:
http://test.rilheva.it/exampleextnet/fileuploadfield.aspx

Thank you

Jimmy

Daniil
Dec 07, 2012, 1:01 PM
Hi Jimmy,

Thank you for the online sample. It reproduces the problem.

I tried Ext.getVersion() in FireBug. It returns 4.1.2.381.

But with the latest code from SVN trunk it returns 4.1.3.548.

Probably, your project refers old Ext.Net.dll. Please ensure.

xeo4.it
Dec 07, 2012, 1:21 PM
Hi Daniil,
I use this url
http://svn.ext.net/premium/branches/2.1
for SVN.

Is it correct?

Jimmy

Daniil
Dec 07, 2012, 1:30 PM
The latest sources are in the trunk now after the v2.1 release.
http://svn.ext.net/premium/trunk/

xeo4.it
Dec 07, 2012, 2:05 PM
Hi Daniil,
with http://svn.ext.net/premium/trunk/ the fileuploadfield works fine.
Sorry for my mistake, however you have stopped to update http://svn.ext.net/premium/branches/2.1 few days ago :-)

Thank you very much

Jimmy

Daniil
Dec 07, 2012, 2:13 PM
Sorry for the inconvenience.

Leonid_Veriga
Feb 08, 2013, 10:25 AM
Hello.

I use the lastest version from 2.1 branch and have not an opportunity to migrate to the trunk at this moment. Could you suggets a fix for this issue based on 2.1 branch?

Best regards.

Daniil
Feb 08, 2013, 11:41 AM
Hello,

Recently, I made the commit to the 2.1 branch to cover this case (and others). Please try to update and retest.

If you don't want to update to exclude a possibility to get something broken, please try this fix:

Fix

Ext.form.field.File.override({
stripPath : true,

isIconIgnore : function () {
return true;
},

onFileChange : function () {
this.lastValue = null;

if (this.stripPath === false) {
Ext.form.field.File.superclass.setValue.call(this, this.button.fileInputEl.dom.value);
return;
}

var v = this.button.fileInputEl.dom.value,
fileNameRegex = /[^\\]*$/im,
match = fileNameRegex.exec(v);

if (match !== null) {
v = match[0];
}

Ext.form.field.File.superclass.setValue.call(this, v);
},

onEnable: function () {
var me = this;
me.callParent();
me.button.fileInputEl.dom.removeAttribute("disabled");
},

reset : function () {
this.callParent();
if (this.disabled) {
this.button.fileInputEl.dom.disabled = true;
}
}
});

Leonid_Veriga
Feb 08, 2013, 12:49 PM
Thanks, Daniil. I took the last version and FileUploadField works fine.