PDA

View Full Version : [CLOSED] fileuploadfield not working when using direct method request



sharmav1
Feb 20, 2015, 10:22 AM
I am using FileUploadField to upload a file onto server like:

view code for fileuploadfield


X.FileUploadField().ID("myUploadField").ButtonOnly(true).Icon(Icon.Attach).ButtonText("Export my excel")
.Listeners(l => { l.Change.Handler = "jsExport2Excel();"; })
//.DirectEvents(de =>
//{
// de.Change.Url = Url.Action("ExportExcel", "Report");
// de.Change.IsUpload = true;
//})


js code

var jsExport2Excel = function () {

Ext.net.DirectMethod.request({
url: "/Report/ExportExcel",
cleanRequest: true,
isUpload: true
});

}

controller action code


[DirectMethod]
public ActionResult ExportExcel()
{

FileUploadField fileUploadField = X.GetCmp<FileUploadField>("myUploadField");
HttpPostedFile file = fileUploadField.PostedFile;
if (fileUploadField.HasFile)
{
string filePath = file.FileName;
//string path = this.HttpContext.Server.MapPath("~") + "\\" + fileName;
string dateInWordFormat = GetDateInSpecificFormat();
string tmpFilePath = Constants.ExcelDetails.DefaultSavePath + Constants.ExcelDetails.DefaultFileName + ".xlsx";
string finalFilePath = Server.MapPath(tmpFilePath);
file.SaveAs(finalFilePath);

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

FileUploadField.HasFiles is always coming false.
And, when I use DirectEvents instead of DirectMethod it works fine. Why is it like that?

Daniil
Feb 20, 2015, 11:09 AM
Hi @sharmav1,

File uploading requires a <form>. A DirectEvent is able to pull it automatically, because it searches up the hierarchy starting from a control that owns that DirectEvent. A DirectMethod is not associated to any control, so, it doesn't search. You should set a formId in a DirectMethod's config.


Ext.net.DirectMethod.request({
url: "/Report/ExportExcel",
cleanRequest: true,
isUpload: true,
formId: "some form id"
});

It might be worth to read this DirectEvent Upload tutorial (http://forums.ext.net/showthread.php?27549).

sharmav1
Feb 20, 2015, 12:28 PM
Hi @Daniil,

I made the changes u said, but still it gives fileUploadField.HasFile as false

Thanks

Daniil
Feb 20, 2015, 7:28 PM
Please provide a full test case to reproduce.

sharmav1
Feb 21, 2015, 4:53 PM
View File Code


<Form id = 'myForm'
X.FileUploadField().ID("myUploadField").ButtonOnly(true).Icon(Icon.Attach).ButtonText("Export my excel")
.Listeners(l => l.Change.Fn = "jsExport2Excel" )
</form>
//})

js file


var jsExport2Excel = function () {
Ext.net.DirectMethod.request({
url: "/Report/ExportExcel",
cleanRequest: true,
isUpload: true,
formId: "myForm"
});

}

Controller Action method


[DirectMethod]
public ActionResult ExportExcel()
{

FileUploadField fileUploadField = X.GetCmp<FileUploadField>("myUploadField");
HttpPostedFile file = fileUploadField.PostedFile;
if (fileUploadField.HasFile)
{
string filePath = file.FileName;
//string path = this.HttpContext.Server.MapPath("~") + "\\" + fileName;
string dateInWordFormat = GetDateInSpecificFormat();
string tmpFilePath = Constants.ExcelDetails.DefaultSavePath + Constants.ExcelDetails.DefaultFileName + ".xlsx";
string finalFilePath = Server.MapPath(tmpFilePath);
file.SaveAs(finalFilePath);

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

I am getting fileUploadField.HasFile = false in above code

fabricio.murta
Feb 21, 2015, 7:45 PM
Hello, @sharmav1!

Based on the code parts you provided, I could put together the code below:

Controller:


public ActionResult Index()
{
return View();
}

[DirectMethod]
public ActionResult ExportExcel()
{
FileUploadField fileUploadField = X.GetCmp<FileUploadField>("myUploadField");
HttpPostedFile file = fileUploadField.PostedFile;
var icon = MessageBox.Icon.ERROR;
var title = "Fail";
var message = "No file uploaded";
if (fileUploadField.HasFile)
{
icon = MessageBox.Icon.INFO;
title = "Success";
message = "A file was Uploaded! (hopefully)";
};

X.Msg.Show(new MessageBoxConfig
{
Buttons = MessageBox.Button.OK,
Icon = icon,
Title = title,
Message = message
});

DirectResult result = new DirectResult();
result.IsUpload = true;
return result;
}


View code:


@{
Layout = null;
var X = Html.X();
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<script type="text/javascript">
var jsExport2Excel = function () {
Ext.net.DirectMethod.request({
url: "/Report/ExportExcel",
cleanRequest: true,
isUpload: true,
formId: "myForm"
});
};
</script>
</head>
<body>
<div>
<form id="myForm">
@X.ResourceManager().ScriptMode(Ext.Net.ScriptMode .Debug).SourceFormatting(true)
@(X.FileUploadField().ID("myUploadField").ButtonOnly(true).Icon(Icon.Attach).ButtonText("Export my excel")
.Listeners(l => l.Change.Fn = "jsExport2Excel"))
</form>
</div>
</body>
</html>


This is the format we expect when we ask for a working test case. Please use it for future reference. Providing a code like that helps us a lot in focusing on your issue, ultimately helping you faster.

I hope the provided code above illustrates well how to implement and have it working. Let us know if you still can't get it to work.

EDIT: Notice how removing hilighted lines on view code (18, 25 and 29) makes your issue happen again -- fileUploadField.HasFile becomes always false.

sharmav1
Feb 23, 2015, 7:21 AM
Hello @fabricio.murta
it is still not working for me.

Controller:

public ActionResult Index()
{
return View();
}

[DirectMethod]
public ActionResult ExportExcel()
{
FileUploadField fileUploadField = X.GetCmp<FileUploadField>("myUploadField");
HttpPostedFile file = fileUploadField.PostedFile;
var icon = MessageBox.Icon.ERROR;
var title = "Fail";
var message = "No file uploaded";
if (fileUploadField.HasFile)
{
icon = MessageBox.Icon.INFO;
title = "Success";
message = "A file was Uploaded! (hopefully)";
};

X.Msg.Show(new MessageBoxConfig
{
Buttons = MessageBox.Button.OK,
Icon = icon,
Title = title,
Message = message
});

DirectResult result = new DirectResult();
result.IsUpload = true;
return result;
}

View code:

@model System.Collections.IEnumerable
@{
ViewBag.Title = "My Report";
var X = Html.X();
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<script type="text/javascript">
var jsExport2Excel = function () {
Ext.net.DirectMethod.request({
url: "/Report/ExportExcel",
cleanRequest: true,
isUpload: true,
formId: "myForm"
});
};
</script>
</head>

<body>
@section sectionCenterBody
{
<div>
<form id="myForm">
@(X.FileUploadField().ID("myUploadField").ButtonOnly(true).Icon(Icon.Attach).ButtonText("Export my excel")
.Listeners(l => l.Change.Fn = "jsExport2Excel"))
</form>
</div>
}
</body>

</html>

The only change in my above code from yours is that I am using "@section sectionCenterBody", and I don't know if it makes a difference here?

Please guide

Thanks

sharmav1
Feb 23, 2015, 4:32 PM
some one please reply to this thread.

fabricio.murta
Feb 24, 2015, 12:21 AM
Hello @sharmav1!

The problem is probably with your layout that is not rendering sectionCenterBody. For that I am afraid we can do nothing but suggest you some reading about how to use layout sections in Razor Pages.

Here a couple interesting links from MSDN:
- Optional Razor Sections with Default Content (http://blogs.msdn.com/b/marcinon/archive/2010/12/08/optional-razor-sections-with-default-content.aspx)
- Introduction to WebMatrix (https://msdn.microsoft.com/en-us/magazine/gg983489.aspx) (Specially the Layout Section)

I hope this helps!