Ajax Call loads a Json File using FTP , Need to show Percentage load progress Bar

Question

I'm using jQuery ajax to load a file kept in FTP server. Need to show percentage of file loaded in Progress loader.

Previously I had HTTP request and using XMLHttpRequest worked. Below is the code that worked.

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();

        // Upload progress
        xhr.upload.addEventListener("progress", function(evt){
        if (evt.lengthComputable) {
            var percentComplete = (evt.loaded / evt.total)*100;
            var loadPercent = '<div id="fountainTextG">'+Math.round(percentComplete)+'% complete ..</div>';
            $(".sqlLoading").html(loadPercent).removeClass("hide");
            jsAPP.sqlLoading = true;
        }
      }, false);

      // Download progress
      xhr.addEventListener("progress", function(evt){
          if (evt.lengthComputable) {
          var percentComplete =(evt.loaded / evt.total)*100;
          var loadPercent = '<div id="fountainTextG">'+Math.round(percentComplete)+'% complete ..</div>';
          $(".sqlLoading").html(loadPercent).removeClass("hide");
          jsAPP.sqlLoading = true;
          }
      }, false);

      return xhr;
    },
    type: 'POST',
    url:'ftp://192.168.1.157/pub/1.json',
    dataType: "jsonp",
    jsonpCallback:"abc",
    success: function(obj){
        console.log("File loaded successfully");

    },
    error:function(err,stat,erroT){

        $(".page").html("<div class='data_error'> Sorry! No data available for this city.</div>");
    }
});

But this doesn't work on FTP request. Is there any way to show progress loader on FTP ? Kindly Help.

Okay so I did some digging and figured that [XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) supports other protocols viz. ftp. May be you could use [File API](https://developer.mozilla.org/en-US/docs/Web/API/File) in conjunction with XMLHttpRequest to achieve your goal. — Winter Soldier, Nov 23 '16 at 11:34

score 0 · Answer 1 · edited Jan 30 '21 at 08:06

Here is my take on this question after I tried & tested three ways of accessing the file via js.

XMLHttpRequest

Although XMLHttpRequest states it it supports other protocols, it doesn't seem to access a file served via ftp.
When I tried accessing using the code below, I hit a CORS error as expected.
XMLHttpRequest cannot load ftp://ftp.funet.fi/pub/standards/RFC/rfc959.txt. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

The FTP server doesn't seem to serve access control headers, also corroborated by the post

 testFtpLoad : function(){
   var xhr = new XMLHttpRequest();
   xhr.open("GET", "ftp://ftp.funet.fi/pub/standards/RFC/rfc959.txt", true);
   xhr.onload = function (e) {
     if (xhr.readyState === 4) {
       if (xhr.status === 200) {
         console.log(xhr.responseText);
       } else {
         console.error(xhr.statusText);
       }
     }
   };
   xhr.onerror = function (e) {
     console.error(xhr.statusText);
   };
   xhr.send(null);
},

Anchor tag

If you are using a modern browser, you could directly feed the ftp to the user using the download attribute (It's a simple <a> tag usage), although this is not what you are looking for.

testUsingAnchorTag : function(){
      var $aTag = document.createElement("a");
      $aTag.href =  "ftp://ftp.funet.fi/pub/standards/RFC/rfc959.txt";
      $aTag.id = "temporaryDownloadLink";
      $aTag.download = "rfc959.txt";
      document.body.appendChild($aTag);
      $aTag.click();
      setTimeout(function(){
        $('#temporaryDownloadLink').remove();
      }, 1000); 
  }

Downside: Though this downloads the file on the user's computer, you will not be able to track it's progress

File API

I tried accessing the file using the FTP URL but it complained about the parameters I passed.

var f = new File("ftp://ftp.funet.fi/pub/standards/RFC/rfc959.txt", true)
Even if I were to be successful in passing the right set of params, it would have complained about the nature of URL since it only expects a path served by server/from user's computer as mentioned in this post - correct me if I'm wrong here.

Conclusion:

Finally I'd like to conclude that it may not be possible to serve & track the progress of a file via FTP from the browser using js
You might have to fallback to your HTTP protocol and serve the files via a server over HTTP to achieve your goal

I've linked to most of the resources that I rummaged through- here are a few more.

Hope this helps.

Ajax Call loads a Json File using FTP , Need to show Percentage load progress Bar

1 Answers1