File Upload with KenoUI: provide URL via data- attribute

Question

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?

p.s. While writing this, noticed that this can be done with MVVM, but it has too much black magic for a simple thing, and would this work with many (50-100) uploads on the same page?

Answer 1

You can iterate manually so that this is the DOM element you're creating the widget on:

$(document).ready(function () {
    $(".single-file-upload").each(function () {
        $(this).kendoUpload({
            multiple: false,
            async: {
                saveUrl: $(this).data('saveurl'),
                autoUpload: false
            }
        });
    });
});