[CLOSED] fileuploadfield not working when using direct method request

[sharmav1]

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]

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.

[sharmav1]

Hi @Daniil,

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

Thanks

[Daniil]

Please provide a full test case to reproduce.

[sharmav1]

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]

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.