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:

Code:

<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:

Code:

<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:

Code:

var submit = function (form) { form.getForm().setEnctype('multipart/form-data'); form.getForm().submit({ waitMsg: 'Verifying...', method: 'POST', url: '@Url.Action("Save", "CreateTask")' }); }

Regards,
Fla

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.

Hello again, Flaviano!

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

PageFileName.cshtml:

Code:

@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:

Code:

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!