Provide saveUrl data via data attribute on input element. How?

3 posts, 1 answers
  1. Kevin
    Kevin avatar
    2 posts
    Member since:
    Jun 2012

    Posted 09 Jan 2014 Link to this post

    We have a lot of similar file uploads, but they all upload to different urls with different parameters. And I'm trying to minimise amount of random javascript in our MVC4 application.  So I would like to provide a save url into kendo upload element via data-  parameter in html:

    <input name="file" type="file" class="single-file-upload" data-saveurl="/some/path?entryId=2&productId=33" />
    Url will be different in every instance. Sometimes we even have upload in a table and url will differ by a parameter (i.e. productId will be different).

    Then in javascript I'm trying this: 
    <script>
        $(document).ready(function () {
            $(".single-file-upload").kendoUpload({
                multiple: false,
                async: {
                    saveUrl: $(this).data('saveurl'),
                    autoupload: false
                }
            });
        });
    </script>
    But  this does not seem to work:  $(this).data('saveurl')
    Data parameter is not picked up.. or rather $(this) is not what I would like it to be, hence the data attribute is empty, giving blank saveUrl property. 

    Andy idea how to access the object on which the kendoUpload is applied? Or some other method of specifying generic url on html element?

    Thanks!

    p.s. just noticed what I need can be  done with MVVM (http://demos.kendoui.com/web/upload/mvvm.html), but it has too much black magic, and would this work with many (50-100) uploads on the same page? 
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 10 Jan 2014 Link to this post

    Hello Kevin,


    In the current scenario you could use the data-attribute widget initialization instead.
    E.g.
    <div id="wrapper">
        <input name="file" type="file" class="single-file-upload"
           data-role="upload"
           data-multiple="false"
           data-async="{ saveUrl: '/some/path?entryId=2&productId=33', autoUpload: false }" />
    </div>

    $(document).ready(function () {
        kendo.bind($("#wrapper"));
    });


    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Answer
    Kevin
    Kevin avatar
    2 posts
    Member since:
    Jun 2012

    Posted 10 Jan 2014 Link to this post

    Thanks, Dimiter. That technique will not work with multiple pages, as we'll need to bind body on every page, and we don't want to do that. 
    However, I was suggested with other option:

    $(document).ready(function () {
        $(".single-file-upload").each(function () {
            $(this).kendoUpload({
                multiple: false,
                async: {
                    saveUrl: $(this).data('saveurl'),
                    autoUpload: false
                }
            });
        });
    });
    Courtesy of Lars Höppner, http://stackoverflow.com/a/21034729/809357

Back to Top