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

[Kevin]

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? 

[Dimiter Madjarov]

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

[Kevin]

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