Trigger and Upload from OnClick

[Keith]

Hello,
We want to give the users the ability to upload documents and then click on a button which says upload; this will call a js function that will ask them to verify or acknowledge that the documents they're about to upload are in the correct format/valid signatures etc. and then on approval of this asynchronously submit the upload. 

Is this possible? 

Thank you.
Keith

[Dimo]

Hello Keith,

You can use the following approach - in the Upload's select event, locate the generated Upload button and attach a click handler to it, which will execute your custom logic.

$(document).ready(function() {
    $("#UploadID").kendoUpload({
        async: {
            autoUpload: false
        },
        select: attachClickHandler
    });
});

function attachClickHandler(e)
{
    window.setTimeout(function() {
        $(".k-upload-selected").click(function(e) {
            // custom logic
            if (false) {
                e.preventDefault();
                return false;
            }
        });
    }, 1);
}

If you need to reference the input fields to get their values, use

$("#UploadID").data("kendoUpload").wrapper.find("input[type='file']")

Greetings,
Dimo
the Telerik team

[Alberto]

Hi,
I'd like to not use the built in button to tirgger the upload. I'd like to do it with another button.
What I'm doint is to hide the built in button
$(".k-upload-selected").hide()

And trigger its click when clicking my button.
$(".k-upload-selected").click()

Is there a cleaner way?
I didn't find any method to call or event to trigger the upload.

Thanks and regards

[Dimo]

Hello Alberto,

We will probably provide an API method to trigger an upload in the near future. In the meantime, you can safely use the suggested approach.

Regards,
Dimo
Telerik

[Alberto]

Thanks Dimo

[Kyle Smith]

Has this API option been added? I don't see it.

[Dimo]

Hello Kyle,

The discussed API method is still not available, due to the relatively low demand this feature has, compared to others, which we have worked on. You can submit a feature request and vote for it at our feedback portal, in order to raise the priority of the task:

http://kendoui-feedback.telerik.com/

Regards,
Dimo
Telerik

 

 

[Vladimir]

Hello Dimo,

  I see that the method has not yet been added.I'm trying to resolve following scenario:

Imagine "windows explorer" UI, where the folders tree on left supports drag&drop of files directly on the folders. This should show upload dialog (ui-modal) where the kendo-upload control is located and start the actual upload.

I'm at a point where I have the event object containing the uploaded files, but I don't know how to pass it onto the kendo-upload to trigger the upload process. 

Can you please suggest solution for this?

Thanks,

Vladimir

[Dimiter Madjarov]

Hello Vladimir,

Manually passing the files for uploading is not supported by the widget. The file selection should be initiated by the user in order to start the upload process.

Regards,
Dimiter Madjarov
Telerik

 

 

[Artur]

Would the following code:

$('#fileUpload​').getKendoUpload().trigger('upload') 

with the "upload" event handler configured, do the trick?

But I agree - I reckon the implementation of the Upload widget simply not finished. Wouldn't it be a matter of just wrapping a couple of code lines (that must have already been in there), into a method helper? :) Please add it without asking people for feedback ranking. Please please please.

[Dimo]

Hi Artur,

Triggering the Upload event manually will not start the upload process, because the logic is the other way around - the upload process triggers the event.

Regards,
Dimo
Telerik

[Artur]

Yes, correct. It only looks like working in that the event is actually triggered, but is empty (does not carry e.filescollection for example).

[yula]

Hello,

I have a similar issue - I would like to generate a click on the select button that will be fired on the window upload - how can that be done?

Thank you,

                 Yulia.

[yula]

Hi, 

I would like to generate a click on the select button (to open a window from which the file will be selected) on document lod. What is the best way to achieve it?

Thank you,

                    Yula.

[yula]

Hi, 
I would like to generate a click on the select button (to open a window from which the file will be selected) on document lod. What is the best way to achieve it?
Thank you,
                    Yula.

[Dimiter Madjarov]

Hello Yula,

This behavior is not supported due to browser security restrictions. The selection of the file has to be triggered by user interaction, not via JavaScript.

Regards,
Dimiter Madjarov
Telerik

 

 

[Vladimir]

Just in case anyone needs this, I've found a way of implementing it.

Dojo is not working for some reason, so here is code fragment:

<div id="mydrop">
   (drop files here)
</div>
<input type="file" name="files" id="upload" />

And this is JS fragment - I'm using the "_onDrop(e)" function found within the source code of kendo upload :)

var mydrop = $("#mydrop");
var upload = $("#upload").data("kendoUpload");

function myOnDrop(e) {
  e.stopPropagation();
  e.preventDefault();
  if (isFileDragDropEvent(e)) {
    var files = e.originalEvent.dataTransfer.files;
    mydrop.text("Droped: " + files.length + " files");
    // this is the trick
    upload._onDrop(e);
  }
}

function isFileDragDropEvent(e) {
  var dt = e.originalEvent.dataTransfer;
  return (dt.types != null && ($.inArray("Files", dt.types) !== -1 || dt.types.contains("application/x-moz-file")));
}


$(document).ready(function () {
            mydrop.on("drop", myOnDrop);
});

 

Thanks,

Vlad.