Implement File Upload

3 posts, 0 answers
  1. Anieda Hom
    Anieda Hom avatar
    21 posts
    Member since:
    Mar 2009

    Posted 04 Sep 2018 Link to this post

    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

     

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    955 posts

    Posted 07 Sep 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Anieda Hom
    Anieda Hom avatar
    21 posts
    Member since:
    Mar 2009

    Posted 11 Sep 2018 in reply to Veselin Tsvetanov Link to this post

    Veselin,

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

    Many thanks,

    Anieda

     

     

     

     

Back to Top