Add Upload files

[Mattia]

 Hello,

is it possible to add a button to upload files inside the Form?

Is it possible to integrate this code

@(Html.Kendo().Upload()
  .Name("files")
  .HtmlAttributes(new { aria_label = "files" })
)

into this one

@(Html.Kendo().Form<TicketModel>()
    .Name("formExample")
    .HtmlAttributes(new { action = "TicketExpress", method = "POST" })
    .Items(items =>
    {

      items.Add()
        .Field(f => f.Description)
        .Label(l => l.Text("Description:"));

items.Add()
        .Field(f => f.Type)
        .Label(l => l.Text("Type:"))
        .Editor(e =>
        {
            e.Upload() ??????????
        }
})

Thank you

[Dimitar]

Hello Stefania,

Currently, the Upload can only be added as a custom editor through the EditorTemplateHandler() option as follows:

.Items(items =>
{
  items.Add()
    .Field(f => f.Files)
    .EditorTemplateHandler("customUploadTemplate");
})

...

<script>
    function customUploadTemplate(container, options) {
        $('<input type="file" name="' + options.field + '"/>')
            .appendTo(container)  
            .kendoUpload();                   
    }  
</script>

I have also logged a new feature request on your behalf in the FeedBack Portal for implementing the Upload as a built-in editor that can be configured through the .Items configuration:

• https://feedback.telerik.com/aspnet-core-ui/1481741-add-support-for-upload-component-as-a-built-in-editor

As a small token of gratitude for submitting this request, I have also updated your Telerik Points.

In case you have any additional questions, please let me know.

Regards,
Dimitar
Progress Telerik

[Mattia]

Hello Dimatar,

thank you for you reply. 

I did as you suggested but I have some trouble to get the data from my controller.

I need to add multple files so I change your code like this:

$('<input type="file"  multiple="multiple" name="' + options.field + '"/>')
           .appendTo(container)
           .kendoUpload();

 

My model has this field

public Dictionary<string, byte[]> Attachments { get; set; }

I also tried with this one

public List<byte[]> Attachments { get; set; }

and this one for a single file

public byte[] Attachments { get; set; }

 

My controller

public async Task<IActionResult> CreateTicket(TicketModel model)
       {
           #region CHECK FIELDS
         ....
           #endregion

           if (!ModelState.IsValid)
           {
               return View(model);
           }
           else
           {
               //attachments
             // MODEL.ATTACHMENTS IS EMPTY


               //SAVE
               using (var httpClient = new HttpClient())
               {
                   StringContent content = new StringContent(JsonConvert.SerializeObject(model), Encoding.UTF8, "application/json");

                   using (var response = await httpClient.PostAsync("http://localhost:8888/api/Tickets", content))
                   {
                       string apiResponse = await response.Content.ReadAsStringAsync();
                   }
               }


               TempData["View"] = "CreateTicket";
               return View(model);
           }
       }

 

Here when I check model.Attachments is null or Count is 0

 

Any advise?

Thank you

[Dimitar]

Hello Stefania,

In order to correctly receive the uploaded files in the controller end-point, please specify the model field as follows:

 public IEnumerable<HttpPostedFileBase> Files { get; set; }

Regards,
Dimitar
Progress Telerik

[Mattia]

Thank you,

I'm using Core so I changed your code like this and it works

 

 public IEnumerable<IFormFile> Files { get; set; }