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

8 posts, 0 answers
  1. Milan
    Milan avatar
    5 posts
    Member since:
    Sep 2014

    Posted 14 Oct 2014 Link to this post

    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);
                };





  2. Milan
    Milan avatar
    5 posts
    Member since:
    Sep 2014

    Posted 14 Oct 2014 Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 16 Oct 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Milan
    Milan avatar
    5 posts
    Member since:
    Sep 2014

    Posted 04 Nov 2014 in reply to T. Tsonev Link to this post

    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?
  6. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 06 Nov 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Milan
    Milan avatar
    5 posts
    Member since:
    Sep 2014

    Posted 09 Nov 2014 Link to this post

    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? 
  8. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 12 Nov 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Milan
    Milan avatar
    5 posts
    Member since:
    Sep 2014

    Posted 12 Nov 2014 in reply to T. Tsonev Link to this post

    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
Back to Top
Kendo UI is VS 2017 Ready