[CLOSED] Uploading file from a window using MVC

  1. #1

    [CLOSED] Uploading file from a window using MVC

    I want to upload file using FileUploadField. If I use plain FormPanel (without a window), everything works, but as soon as I put a FormPanel in a Window file upload does not work. Please try it yourself. This is the code (from samples) which works:

    @{
        ViewBag.Title = "Index";
        Layout = "~/Views/Shared/_BaseLayout.cshtml";
        var X = Html.X();
    }
    
    <h2>Index</h2>
    
    @section example
    {
    <form id="fileUpload" enctype="multipart/form-data">
           X.FormPanel()
                .ID("BasicForm")
                .Width(500)
                .Frame(true)
                //.Title("File Upload Form")
                .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>
    }
    But if you just surround a FormPanel in a Window like this:
    @{
        ViewBag.Title = "Index";
        Layout = "~/Views/Shared/_BaseLayout.cshtml";
        var X = Html.X();
    }
    
    <h2>Index</h2>
    
    @section example
    {
    <form id="fileUpload" enctype="multipart/form-data">
        @(Html.X().Window()
        .Title("Upload an image")
        .Width(500)
        .Closable(true)
        .Resizable(false)
        .Items(
                X.FormPanel()
                .ID("BasicForm")
                .Width(500)
                .Frame(true)
                //.Title("File Upload Form")
                .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>
    }
    then whole sample does not work. I need this to be in a window (due to my apps design). What should I do?
    Last edited by Daniil; Feb 20, 2015 at 7:25 PM. Reason: [CLOSED]
  2. #2
    Hi @ingbabic,

    A Window as a floating component is rendered to a <body> even if you put into a form. So, it is rendered outside of the <form> and, therefore a FileUploadField is outside of the <form>.

    I would try either of the following approaches.

    - Set RenderTo="fileUpload" for the Window

    or

    - Remove this de.Click.FormID = "fileUpload";. In this case a DirectEvent should create a temporary <form> automatically.
  3. #3
    Well,
    RenderTo="fileUpload"
    seem to be working but then whole window goes up and you don't see top part of the window (before FileUploadField), including title bar and everything else (see on the picture)

    Click image for larger version. 

Name:	fileupload.png 
Views:	1 
Size:	16.5 KB 
ID:	21051
  4. #4
    I think the <form> doesn't have height enough to contain the entire Window. It is a floating component and it doesn't expand the <form> height as it happens when you put a FormPanel inside it.

    Please try the second approach.
  5. #5
    Second approach does not work. It simply ignores what enter and behaves as if I never entered file name (field is required error).
  6. #6
    Reproduced.

    There is a piece of functionality that resets a FileUploadField on submitting. You can read more details here.

    It turns out that resetting happens before a DirectEvent's Before handler.

    I can suggest to set .ClearOnSubmit(false) for the FileUploadField.

    Also please set:
    de.Click.IsUpload = true;
    There is a small Upload File using DirectEvent tutorial with some basics.
  7. #7
    Thanks Daniil
    It works now! I just want to tell one more thing. I tried to leave
        .RenderTo("fileUpload")
    but instead only
    <form id="fileUpload" enctype="multipart/form-data">
    I put
    <form id="checkinForm" enctype="multipart/form-data" style="height:500px">
    and it worked as well (without ClearOnSubmit(false)), only window vertical position varies depending on height of the form which I put.
    Last edited by ingbabic; Feb 13, 2015 at 6:35 AM.
  8. #8
    I guess if no height is specified for <form> it is zero height or something like that.

Similar Threads

  1. Uploading file using MVC
    By ingbabic in forum 2.x Help
    Replies: 1
    Last Post: Jan 27, 2015, 9:07 AM
  2. Uploading file
    By massman07 in forum 2.x Help
    Replies: 3
    Last Post: Aug 12, 2014, 8:45 PM
  3. Multiple File Uploading
    By Rupesh in forum 1.x Help
    Replies: 0
    Last Post: Nov 28, 2013, 9:49 AM
  4. [CLOSED] How to identify upload file size before uploading in IE?
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 29, 2012, 5:54 PM
  5. [CLOSED] Error when uploading file to httphandler
    By jchau in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Nov 09, 2011, 1:32 PM

Tags for this Thread

Posting Permissions