Implement File Upload

[Anieda Hom]

I try to use drag and drop/select from file folder to upload multiple files.  It does not act the way as your demo does.  It can not select multiple files.  It can not drag and drop.  The drag and drop region does not show.   

Here is the code in the Upload.cshtml page:

@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data", id = "form" }))
{
 <div class="form-input">
  <div>
   The Upload can be used as a drop-in replacement
   for file input elements.
  </div>
  <div>
   @(Html.Kendo().Upload()
   .Name("attchments")
   .Async(a => a
    .Save("Upload", "Home")
    .Remove("RemoveUpload", "Home")
    .AutoUpload(true))                
   ))
  </div>
  <p style="padding-top: 1em; text-align: right">
   <button type="submit" class="k-button k-primary">Submit</button>
  </p>
 </div>
}

In _Layout.cshtml page, I have the following links:

<link href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2018.1.221/kendo.default.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2018.1.221/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2018.1.221/kendo.default.mobile.min.css")" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.aspnetmvc.min.js"></script>
<script src="@Url.Content("~/Scripts/kendo/2018.1.221/jszip.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>

 

What do I missed?  

Thanks in advance for your help!

Anieda

 

[Veselin Tsvetanov]

Hello Anieda,

Attached you will find a small MVC sample based on the snippets sent. One change, that I have made is to remove the duplicate reference to the kendo.common.min.css file. Also, I have referenced all Kendo scripts and styles from our CDN service.

You will notice that the attached sample works as expected. Upon drag and drop files they are being uploaded to the server. Note, that in this case the Upload widget in in its asynchronous mode. That means it will no need a form to be placed on for uploading the files. It will upload the files straight away with an AJAX after they have been selected.

Can you modify the attached, so it reproduces the problem observed at your end and send it back to us? This way we will be able to troubleshoot the problem locally and to provide you with the most appropriate assistance on this case.

Regards,
Veselin Tsvetanov
Progress Telerik

[Anieda Hom]

Veselin,

Thanks for your response.  I'll try out your sample.  Will send you questions if I encounter issues.

Many thanks,

Anieda