[CLOSED] fileuploadfield not working when using direct method request

  1. #1

    [CLOSED] fileuploadfield not working when using direct method request

    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?
    Last edited by Daniil; Mar 03, 2015 at 9:56 AM. Reason: [CLOSED]
  2. #2
    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.
  3. #3
    Hi @Daniil,

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

    Thanks
  4. #4
    Please provide a full test case to reproduce.
  5. #5
    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
  6. #6
    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.
    Last edited by fabricio.murta; Feb 21, 2015 at 7:48 PM.
    Fabrício Murta
    Developer & Support Expert
  7. #7
    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
  8. #8
    some one please reply to this thread.
  9. #9
    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
    - Introduction to WebMatrix (Specially the Layout Section)

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 5
    Last Post: Oct 27, 2014, 4:31 PM
  2. Replies: 2
    Last Post: Aug 13, 2013, 9:38 AM
  3. Replies: 2
    Last Post: Feb 08, 2013, 8:40 PM
  4. [CLOSED] How to control ajax request (direct method)
    By bakardi in forum 1.x Premium Help
    Replies: 1
    Last Post: Mar 07, 2012, 1:33 PM
  5. [CLOSED] Direct Method only working once
    By CarWise in forum 1.x Premium Help
    Replies: 1
    Last Post: Jan 07, 2011, 9:09 AM

Tags for this Thread

Posting Permissions