Network Programming in .NET

Sometimes you want to let your users upload images or other files to your server, but you’re not a wizard at PHP, so you’d like to do it just using Javascript, and with no server side coding at all. Just two lines of code … yes please!

So, here’s what we’ve come up with at http://ftp.apixml.net

• 1. Include the script:

  < script src="http://ftp.apixml.net/ftp.js">
  </script>

• 2. Include an upload button:

  <input type=file 
  onchange="Ftp.upload('access_token', this.files)"/>

Now, you have to go to the website ftp.apixml.net  to enter your username and password, and you’ll get an secure access token back. The reason for this, is that you’d never want to put your FTP username and password into the Javascript directly, it would be too insecure. Instead, you enter it into the website, and get a code back. using this code, the javascript will know where to put your file, but hackers can’t determine your password.

Now, if you’re interested on how this works, it uses two technologies that are new to HTML5, the FileReader Object, which allows client side javascript to read the file that the user has just uploaded, and CORS, which allows the file to be sent to a server other than the one that served the page. It uses the C# FTP library at http://www.ftpclient.co.uk 

The code for the FTP library is as follows – which you are free to modify, but please leave the copyright notice at the head.

// Script from http://FTPJS.XYZ
// Copyright 2016 FTPJS.XYZ, 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://www.ftpjs.xyz/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(){}
    }
};