Implementing ftp using Javascript

Ok, answering my own question here.

I went through Mozilla docs on XMLHTTPRequest. It specifically says -

Despite its name, XMLHttpRequest can be used to retrieve any type of data, not just XML, and it supports protocols other than HTTP (including file and ftp).

So, I am satisfied with this. JavaScript can make calls to ftp using this.

The title of this question suggests the requester is keen on understanding if an FTP transfer could be implemented using JavaScript. However looking at the the answer by the same requester it appears that the question was just to know if URLs with FTP protocols can be used with JS and possibly HTML tags. The answer is yes. Even a simple <a> tag supports FTP URLs in the href attribute. Hope this helps the new readers. And yes, the XMLHttpRequest AJAX object does enable calling a URL with an FTP protocol.

Cheers.

There is a JavaScript library at http://ftp.apixml.net/ that allows FTP file uploads via JavaScript.

In this case, technically, the ftpjs server is making the FTP connection to the FTP server, but the instructions are being passed via JavaScript. So this particular library is designed primarily to allow developers add a basic file upload mechanism without writing sever-side code.

Under the hood, it uses the HTML5 FileReader to read the file to a base64 string, and then posts this using CORS AJAX back to the server.

// Script from http://ftp.apixml.net/
// Copyright 2017 http://ftp.apixml.net/, DO NOT REMOVE THIS COPYRIGHT NOTICE
var Ftp = {
    createCORSRequest: function (method, url) {
        var xhr = new XMLHttpRequest();
        if ("withCredentials" in xhr) {
            // Check if the XMLHttpRequest object has a "withCredentials" property.
            // "withCredentials" only exists on XMLHTTPRequest2 objects.
            xhr.open(method, url, true);
        } else if (typeof XDomainRequest != "undefined") {
            // Otherwise, check if XDomainRequest.
            // XDomainRequest only exists in IE, and is IE's way of making CORS requests.
            xhr = new XDomainRequest();
            xhr.open(method, url);
        } else {
            // Otherwise, CORS is not supported by the browser.
            xhr = null;
        }
        return xhr;
    },
    upload: function(token, files) {
        var file = files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.addEventListener("load",
            function() {
                var base64 = this.result;               
                var xhr = Ftp.createCORSRequest('POST', "http://ftp.apixml.net/upload.aspx");
                if (!xhr) {
                    throw new Error('CORS not supported');
                }
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        Ftp.callback(file);
                    }
                };
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhr.send("token=" + token + "&data=" + encodeURIComponent(base64) + "&file=" + file.name);
            },
            false);
    },
    callback: function(){}
};