Using upload to post using custom service instead of "saveUrl"

[Milan]

Hi, I'm looking to integrate Upload with my project where the file selected would be posted using our own custom service (this service adds some additional security params used on the server side). Thus I'm looking for a way where I can post the selected file through my own service instead of the "saveUrl" option and show the progress bar.

Here is the dojo for code which posts using "saveUrl" http://dojo.telerik.com/IcAFO

Here is what Im trying to do:
$("#files").kendoUpload({
                multiple: false,
                async: {
//                    saveUrl: "https://localhost:12345/sis-ui/api/v1/alerts/import", // I dont want to post to a url directly
                    removeUrl: "remove",
                    autoUpload: false
                },
                upload: $scope.onUpload, // this is what I want to do, post from my custom service
                template: kendo.template($("#fileTemplate").html())
            });
$scope.onUpload = function(e) { //This is my custom service which will post the file 
                ImportService.import(e.files);
            };

[Milan]

To add, I'm trying to use this example http://demos.telerik.com/kendo-ui/upload/templates where instead of saveUrl, upload will post through custom service and also displays progress bar. There is no special handling on the server side for showing upload progress.

[T. Tsonev]

Hi,

You can read the raw files contents provided that the browser supports the File API.
More specifically you need to use the FileReader class. 
      function onUpload(e) {
        if (!window.FileReader) {
          return;
        }
        
        $.each(e.files, function() {
          var file = this.rawFile;
          var reader = new FileReader();

          reader.onload = (function() {
            var data = reader.result;
            console.log(file.name, data);
          });
          
          reader.readAsDataURL(file);

          e.preventDefault();
        });
      }

The preventDefault call cancels the upload regardless is saveUrl is set or not.
This is the snippet that I used for testing. I hope this helps.

Regards,
T. Tsonev
Telerik

 

 

[Milan]

Hi Tsonev,
Thanks, your solution works fine, except for one thing where I'm stuck.

In my implementation I have added a kendo template for showing upload progress (something like this). Here is the template:

<script type="text/x-kendo-template" id="fileTemplate">
        <span class='k-progress'></span>
        <div class='file-wrapper'>
            <!--span class='file-icon #=addExtensionClass(files[0].extension)#'></span-->
            <h4 class='file-heading file-name-heading'>#=name#</h4>
            <h4 class='file-heading file-size-heading'>Size: #=size# bytes</h4>
            <button type='button' class='k-upload-action' text='Upload'></button>
        </div>
</script>

Now if I intercept "upload" and use the e.preventDefault(), it stops showing the upload progress and resets.
I've also tried binding an onProgress method to "progress", but that also doesn't works if preventDefault method is called.

Could you please suggest any solution to this?

[Dimiter Madjarov]

Hi Milan,


We cannot suggest a solution for implementing this requirement. The file progress cannot be persisted when the upload is canceled.

Regards,
Dimiter Madjarov
Telerik

 

 

[Milan]

Ok, sounds like a constraint. Is there an alternative to use our own http service to post instead of what kendo-upload is using (I'm assuming its using the default $http service provided by angular-js).

The reason I'm looking for it is that we've overridden angulars $http to create our own wrapper where we are manipulating headers.
So when we give it a url it does a post of payload using our wrapper of $http angular-js service.

I looked at the configurations from the API reference and was not able to figure out anything. Is it possible? 

[T. Tsonev]

Hi,

The Upload will issue the requests through the server using the File API (XMLHttpRequest w/FormData) or a Form post to an IFRAME in legacy browsers.
Headers can be manipulated in the upload event, but only if the File API is in use. Otherwise e.XMLHttpRequest will be just a mock object.

I hope this helps.

Regards,
T. Tsonev
Telerik

 

 

[Milan]

Thanks a lot Tsonev, Dimiter!!!
Looks like I have to look deeper and wider for getting this working.

Will post if I get a solution.

~
Milan