Home > Uncategorized > #Upload FTP using #Javascript only

#Upload FTP using #Javascript only

ftpjsxyz

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://www.ftpjs.xyz 

  • 1. Include the script:
    < script src="http://ftpjs.xyz/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 http://www.ftpjs.xyz  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(){}
    }
};
Advertisements
Categories: Uncategorized
  1. June 10, 2016 at 3:16 pm

    Note: you can now access a callback after the file is uploaded by setting the callback property

    for example:

    Ftp. callback = function(f) {
    console.log(f);
    alert(‘uploaded’);
    }

  2. Manish
    November 24, 2016 at 12:13 pm

    what about large files?

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: