Data Upload into packet data

[Вадим]

public class RegisterViewModel
    {
        public int Id { set; get; }

        [EmailAddress]
        public string Email { get; set; }

        public string RegObl { set; get; }
        public string RegRaion { set; get; }

        public IFormFile FilesImageUser { get; set; }
    }

Register.cshtml

@model exchange.Models.RegisterViewModel
@using Kendo.Mvc.UI

@Html.AntiForgeryToken()

<div class="form-group"><label asp-for="ImageUser">Фото</label>
                        @(Html.Kendo().Upload()
                            .Name("FilesImageUser")
                            .Async(a => a
                                .Save("ImageUserTemp_Save", "File")
                                .Remove("ImageUserTemp_Remove", "File")
                                .AutoUpload(false)
                            )
                            .Events(e => e

                                .Success("onSuccessImageRegister")
                                //.Select("onSelectImageRegister")
                                )
                            .ShowFileList(false)
                            .Multiple(false)
                            //.DropZone(".dropZoneElement")
                            .Validation(validation =>
                            {
                                validation.AllowedExtensions(new string[] { ".jpg", ".jpeg", ".png", ".bmp"});
                            })
                        )
                        <div class="wrapper"><div id="imageUserRegister"></div></div></div>
 
<button type="submit" class="btn btn-success">Регистрация</button>             

 public async Task<ActionResult> Register(RegisterViewModel model)
        {
            if (!ModelState.IsValid) return View(model);
..........
        }

how to make the "upload" data loaded into the model and further processed in the controller. At the moment, the data "null" ?

[Alexander]

Hi Вадим,

Thank you for the provided information and code snippets.

In general, in the synchronous mode, the Upload component behaves like a regular input file which can be handled upon form submission. The asynchronous mode on the other side requires you to provide server handlers for storing uploaded files and the removal of them.

With that said if you want to get the file via the form, I may recommend using the synchronous mode approach. For example:

<form action="@Url.Action("Register","Home")" method="post">
  //additional form fields
<div class="form-group">
        @(Html.Kendo().Upload()
          .Name("FilesImageUser")
          .Multiple(false)
          .Validation(validation =>
          {
              validation.AllowedExtensions(new string[] { ".jpg", ".jpeg", ".png", ".bmp"});
          })
       )
    </div><button type="submit" class="btn btn-success">Register</button></form>   

Action:

 public IActionResult Register(RegisterViewModel model)
  {        
      //validate and handle form submission
      return View("Index",model);
  }

For additional information regarding the Upload, modes review the Upload Modes of Operation Documentation.

Having this in mind, when the Upload is placed inside a form and is configured for asynchronous operation, two separate requests are made. One for the uploaded files, and one for the form. On the server, you can check whether the files are uploaded via the save handler and match the uploaded files to the submission model.

What is worth also mentioning is that you can include metadata for the file from form fields during asynchronous uploads. You can review the Serialize Form Data during Async Upload Documentation article to see how this can be implemented.

Alternatively, you can attach file information to the form model which will later be bound to the submit action. You can achieve this by creating a hidden field for example and populate it with file information via the success event:

Hidden field:

 <input type="hidden" id="FileName" name="FileName"/> // the name should correspond to the property of the FormModel...

Model property:

 public string FileName { get; set; }

Success event:

function onSuccessHandler(e) {
        var files = e.files;
        if (e.operation == "upload") {
            var file = files[0];
            $("#FileName").val(file.name); //attaches the file name to the hidden input field
        }
}

Keep in mind that in this scenario the file won't be attached to the form model but only information for it.

I hope this helps. Please let me know if you have further questions and I will be happy to answer them.

Regards,
Alexander
Progress Telerik