Help for using fileUploadField inside a form

  1. #1

    Help for using fileUploadField inside a form

    Hi,
    I have problems to submit a form using standardsubmit config with a fileUploadField inside.
    How can I achieve this? There is no isUpload attribute for fileUploadField, nor for the form.
    Is it possible to have an example?

    What happens: when submitting, form fields aren't sent to server, but if I remove the fileUploadField, the request is sent correctly (in the browser I can see the field data).

    My field:
    <ext-fileUploadField id="txtFileUpload" emptyText="Upload file" fieldLabel="Load nodes" 
    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" 
    allowBlank="false" allowOnlyWhitespace="false" name="fileUpload" submitValue="true">
    </ext-fileUploadField>
    the form button is:
      <buttons>
           <ext-button text="Save " iconAlign="left" iconCls="x-fa fa-save" width="260" formBind="true">
                  <listeners>
                       <click handler="if(App.myForm.isValid()) submit(App.myForm);" />
                  </listeners>
           </ext-button>
      </buttons>
    where submit function is the following one:
    var submit = function (form) {
            form.getForm().setEnctype('multipart/form-data');
            form.getForm().submit({
                waitMsg: 'Verifying...',
                method: 'POST',
                url: '@Url.Action("Save", "CreateTask")'
            });
        }

    Regards,
    Fla
  2. #2
    Hello Flaviano!

    We are working on a port for the corresponding sample from V5 (WebForms, MVC) and will post a follow-up when we have wrapped one that works. In case during the process we can figure out your inquire by the parts you provided, we'll respond it, specifically.

    This should just need adjusting the submission. We'll get that to work and come back for you.
    Last edited by fabricio.murta; Nov 24, 2020 at 8:30 PM.
  3. #3
    Hello again, Flaviano!

    This should get you started with a working file upload field scenario:

    PageFileName.cshtml:

    @page "{handler?}"
    @model Your.Namespace.Here.PageFileNameModel
    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    <html>
        <head>
            <title>
                Simple FileUploadField example
            </title>
        </head>
        <body>
            <form id="fileUpload" enctype="multipart/form-data" method="post">
                <ext-fileUploadField
                    id="FileUploadField1"
                    name="file"
                    emptyText="Select an image"
                    fieldLabel="Photo"
                    buttonText="">
                    <buttonConfig>
                        <ext-fileButton iconCls="x-md md-icon-add-photo-alternate" />
                    </buttonConfig>
                </ext-fileUploadField>
                <ext-button text="Save">
                    <customConfig>
                        <ext-add key="directEvents"
                            value="
                            {
                                click: {
                                    fn: function(item, e) {
                                        Ext.net.directRequest({
                                            formId: 'fileUpload',
                                            cleanRequest: true,
                                            method: 'POST',
                                            url: '@Url.Page("Index")/UploadClick'
                                        });
                                    }
                                }
                            }"
                            mode="Raw"
                            />
                    </customConfig>
                </ext-button>
            </form>
        </body>
    </html>
    PageFile.cshtml.cs:
    using Ext.Net.Core;
    using Microsoft.AspNetCore.Http;
    using Microsoft.AspNetCore.Mvc;
    using Microsoft.AspNetCore.Mvc.RazorPages;
    
    namespace Your.Namespace.Here
    {
        public class PageFileNameModel : PageModel
        {
            public void OnGet()
            {
    
            }
    
            public IActionResult OnPostUploadClick(IFormFile file, string desc)
            {
                this.X().Toast(
                    "File " + (file?.FileName ?? "n/a") + " (" + (file?.Length.ToString() ?? "n/a") +
                    " bytes) uploaded successfully."
                );
                
                return this.Direct();
            }
        }
    }
    We have added a more comprehensive example to Examples Explorer and it will be available soon.

    We thrive to make Ext.NET easier to use and we will implement features to make it more straightforward to use the component when we get a chance. Your feedback is very appreciated and helps us decide on which feature we should focus next.

    Hope this helps for the time being!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Form post issue for gridpanel inside form panel
    By alscg in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 19, 2013, 2:16 PM
  2. Replies: 2
    Last Post: Oct 24, 2012, 3:27 PM
  3. Replies: 0
    Last Post: Sep 15, 2012, 10:26 AM
  4. Replies: 0
    Last Post: Mar 15, 2010, 7:40 AM
  5. Form inside window reset issue
    By sz_146 in forum 1.x Help
    Replies: 0
    Last Post: Feb 03, 2009, 1:50 PM

Posting Permissions