kendo upload with rebind gives error when using "Select..." button

[Labhesh]

Hi, 

 

I have my kendo upload widget (via angular) defined as:

<input name="files"<br>    id="files"<br>    type="file"<br>    kendo-upload="uploader"<br>    k-options="uploadOptions"<br>    k-template="kendoTemplate()"<br>    k-rebind="initialFiles"/>

 

I display all the files using initial files option. My objective is to continue to display the list of all files I get from server; once a given file is uploaded.

 

Because I have the rebind set on $scope.initialFiles; in onSuccess (I also tried onComplete)

I do:

 

<p>function onSuccess(e) {</p><p>    $scope.initialFiles.length = 0;<br>    populate();<br>}</p>

 

where the populate function uses $http service to get data and re-populate $scope.initialFiles...

This works fine with "drag and drop" functionality...but when I upload using the "Select..." button (I've renamed it to "Browse Files").. I get the error:

"Cannot read property 'get' of undefined"

It happens in kendo.min.js (appreciate this is minified code but pasting to give the context). I have marked the line that throws the error. 

<p>          function g(t, n, i, r, o, a, s) {<br>                var l = n.$watch(o, function(o, c) {<br>                    var d, u, h, f;<br>                    t._muteRebind || o === c || (l(),<br>                    d = B[t.options.name],<br>                    d && d.forEach(function(t) {<br>                        var i = n.$eval(s["k" + t]);<br>                        i && r.append(e(i).attr(kendo.toHyphens("k" + t), ""))<br>                    }),<br>                    u = e(t.wrapper)[0],<br>                    h = e(t.element)[0],<br>                    f = i.injector().get("$compile"), //**** this line throws the error<br>                    t._destroy(),</p><p></p>

I need to rebind the widget because after the upload; if I do not do $scope.initialFiles.length = 0;I do not get the current status of files. For example: if the user uploaded text.txt and then in order to overwrite the existing test.txt; reuploaded the same file - although its overwritten on the server - the UI continues to show two instances of text.txt. 

 How can I best; re-create the upload widget after the upload finishes (note I get the same error with onSuccess and onComplete) so that the list of files shown is only what's in $scope.initialFiles and fix the error I am getting now. The impact of error is that the widget does not get recreated...

 

Thanks a lot, 

 

Labhesh

 

[Labhesh]

I've tried modifying the onSuccess method as follows:

 

<p>function onSuccess(e) {</p><p><br>    console.log("on success called");</p><p><br>    $(".k-upload-files.k-reset li:last-child").remove(); //remove the latest element uploaded from UI</p><p><br>    populate(); //this will re-populate $scope.initialFiles which cause the upload widget to be re-built since k-rebind=initialFiles</p><p><br>}</p>

This also works fine for drag and drop; but the widget never gets re-created if I use the "Select..." button to upload the file. 

Note: this time I do not get any error on console

[Labhesh]

Alternatively; can you tell me how to show only unique file names after upload is done? As an example: see attached. After test_blah.txt is uploaded second time; I just want to show 2 files in the list: test and test_blah. I do not want test_blah.txt to show up twice as it does - b/c in the server, its pointing to the same file (i.e. i overwrite files with same names)...Thanks

[Dimiter Madjarov]

Hello Labhesh,

In this case I would suggest to implement a validation logic in the select event handler of the widget. You could get the name of the file that is about to be uploaded via the e.files parameter, check if it is already in the list of selected files and if that is the case - prevent the select event, which will automatically remove the file from the list and not upload it. This way the file won't be uploaded if there is one with the same name, which will eliminate the need to manually remove it later from the list of initial files.

I hope this information helps.

Regards,
Dimiter Madjarov
Telerik by Progress

 

 

[Labhesh]

Hi Dimiter, 

This will not work. 

I *want* to upload the new file. It has the same name, so the server handles overwriting the file.

Example: if the first text_blah.txt contained "abc"; and the second text_blah.txt contained "def"; I would like the second one to be uploaded to server where it will overwrite the first one. The list (as shown in the image from my previous post), should contain only one test_blah.txt. 

 

To do this I was using k-rebind to bind the widget to $scope.initialFiles variable. (see my code from previous posts)

in onSuccess; i was doing $scope.initalFiles.length=0 and then calling populate to update the contents of $scope.intialFiles. From my past experience, kendo will destroy and recreate the widget if the k-rebind bound variable changes. Is that correct?

In this case - kendo has correct behavior when I drag and drop (k-rebind works), but when I upload using the upload button; it seems the upload widget is destroyed but not recreated. 

 

Can you please advice?

[Labhesh]

One example I found; was to destroy and recreate the widget: 

http://d585tldpucybw.cloudfront.net/forums/appending-file-to-uploaded-file-list-via-jquery

This is done via jquery; can you help me adapt this to angular style?

I think the destroy code would work as it is, but I am unclear on how to "recreate" the widget

 

Thanks

 

[Dimiter Madjarov]

Hello Labhesh,

Thank you for providing the additional details about the case. The reason for the issue is that in the current context, the Kendo UI Upload directive won't be aware about the performed change in the initialFiles array. As a workaround I would suggest to execute the logic inside a $scope.$apply() invocation. Here is an example that demonstrates the approach.

Regards,
Dimiter Madjarov
Telerik by Progress