Click here to Skip to main content
15,309,768 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
My download code is working properly but it does not show the progress,how can i include the progress in my code


$(document).on("click","#saveddownloadingsong",function (event) {
               event.preventDefault();
               event.stopPropagation();

           var spath = $(this).closest("#contentdetails").find("#songpath").attr("namepath");
           var sing = $(this).closest("#contentdetails").find("#songid").attr("sang");

          var filename=spath.split('/').pop();

           var datastring ='dsong='+sing;


             $.ajax({
                              url:spath,
                              method:'GET',
                              xhrFields: {

                                 responseType: 'blob'

                             },
                             success: function (data) {
                                var a = document.createElement('a');
                                var url = window.URL.createObjectURL(data);
                                a.href = url;
                                a.download = filename;
                                document.body.append(a);
                                a.click();
                                a.remove();
                                window.URL.revokeObjectURL(url);
                            }
             });


   });


What I have tried:

$(document).on("click","#saveddownloadingsong",function (event) {
                event.preventDefault();
                event.stopPropagation();
    			
            var spath = $(this).closest("#contentdetails").find("#songpath").attr("namepath");
    	    var sing = $(this).closest("#contentdetails").find("#songid").attr("sang"); 
    	  
    	   var filename=spath.split('/').pop();
    		 
    	    var datastring ='dsong='+sing;
    	 
    		 
    		  $.ajax({
                               url:spath,
                               method:'GET',
                               xhrFields: {
                                   
                                  responseType: 'blob'
                                  
                              },
                              success: function (data) {
                                 var a = document.createElement('a');
                                 var url = window.URL.createObjectURL(data);
                                 a.href = url;
                                 a.download = filename;
                                 document.body.append(a);
                                 a.click();
                                 a.remove();
                                 window.URL.revokeObjectURL(url);
                             }
              });
    		 
    		
    });
Posted
Updated 4-Jan-22 5:50am

1 solution

You can either use raw JS and bind the appropriate event handlers as per this StackOverflow suggestion[^] or otherwise consider using GitHub - likerRr/jq-ajax-progress: jQuery plugin that adds support of `progress` promise[^] to add the progress support to the existing $.ajax() method.

Just be aware that in both instances it's dependent on the hosting server to provide the Content-Length HTTP header. And also make sure you're not using this with file sizes which are too large as this binary data gets stored in RAM before it's serialized to the content window.
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900