CODEWITHSUNDEEP
javascriptjqueryhtmlknockout.jsasp.net-web-api
James
James

Reputation: 1945

download file without using ajax

I am trying to follow this example to show progress bar without using ajax to download file.

I use knockout,html and webapi. I am having below code which calls href on click event of button

this.getMeData= function () {

    uRlPath("/api/GetSomeData?id=" + 12)
                + "&name=" + getName.toString()
                + "&downloadtoken=" + new Date().getTime());

    $('#myLink').click();

    location.href = $('#myLink').attr('href');


    };

This is my html

   <tr>
            <td class="labelText">
                <button data-bind="click: getMeData">
                   Download Data
                </button>

            </td>
        </tr>
        <tr>
            <td>
               <a id="myLink" data-bind="attr: { href: uRlPath }" style="visibility: hidden">Open </a>
            </td>
        </tr>

I now want to call some function on click event of my href

This is my webapi method which returns me cookie and binary file

 public HttpResponseMessage GetSomeData(int id, string name, string downloadtoken)
    {
      var returnData= new HttpResponseMessage(HttpStatusCode.OK);
      returnData.Content = new ByteArrayContent(mybyteArray);
       var cookie = new CookieHeaderValue("downloadtoken", downloadtoken);
        returnData.Headers.AddCookies(new CookieHeaderValue[] { cookie });
      returnData.Content.Headers.ContentDisposition =
            new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
        returnData.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");


        returnData.Content.Headers.ContentDisposition.FileName = "myfile.pdf";
        return returnData;
    }

To be very precise i want to have same behaviour as provided in example. In example they use form to submit but i dont have any form as i just use html,knockout. I have included all libraries mentioned in example.

Do let me know if you need more inputs.

Upvotes: 1

Views: 807

Answers (2)

James
James

Reputation: 1945

I found solution myself. I used below code to check constantly for cookie

var attempts = 30;
var checkTime

        startProgressBar(true)

        checkTime= window.setInterval(function () {

            var cookieValue = $.cookie('downloadtoken');

            if ((cookieValue == token) || (attempts == 0)){
                 stopDownload();
            }
            attempts --;
        }, 1000);

In finishDownload function i clear cookie and stop progress bar 

 function stopDownload() {
        window.clearInterval(checkTime);
        $.cookie('downloadtoken', null); //clears this cookie value
        stopProgressBar(false);
    }

This is html code for progress bar

 <div  data-bind="visible: stopProgressBar" style="top:248px;left: 320px;">
    <img src="../images/ProgressBar.jpg"  />
</div>

Upvotes: 1

Bragolgirith
Bragolgirith

Reputation: 2238

If you just want to call the blockUIForDownload function when the link is clicked, you can do it with a "click" binding, just like you did for the button:

<a id="myLink" data-bind="attr: {href: uRlPath}, click: blockUIForDownload" style="visibility: hidden">Open</a>

(This assumes the function is already defined within the viewModel.)

See official documentation for the "click" binding here: http://knockoutjs.com/documentation/click-binding.html

However, it looks to me like you're overcomplicating it a bit - in the example you posted, a hidden input field is required because they're using a form input as a means to transfer the token to the server.

In your case the token is passed as a part of an href attribute, so you can greatly simplify the code:

1) Remove the invisible link completely

2) Replace the getMeData function with the following:

this.getMeData= function () {
    window.open("/api/GetSomeData?id=" + 12
                + "&name=" + getName.toString()
                + "&downloadtoken=" + new Date().getTime());
    blockUIForDownload();
    };

Upvotes: 0

Related Questions