Home > Uncategorized > #Upload FTP using #Javascript only

#Upload FTP using #Javascript only


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">
  • 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
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();
            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) {
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhr.send("token=" + token + "&data=" + encodeURIComponent(base64) + "&file=" + file.name);
	callback: function(){}
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) {


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

    what about large files?


  3. Aiden Wilkins
    June 5, 2019 at 8:28 pm

    How do I do multiple files?


  4. Jaron Wanderley
    June 9, 2019 at 8:33 pm

    how can I set url directories for upload?


  5. Michael Lev
    June 23, 2020 at 1:49 pm

    I fill the credentials form:
    for FTP Host – the host name
    for FTP Username – my username
    for FTP password – my password
    for remote path – folder name of a folder in my ftp root there
    but I always get next error message:
    “Failed to connect to FTP server because of A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond”
    I tried all 2 security types, yet same error…

    I” appreciate it if you enlighten my eyes


  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 )

Connecting to %s

%d bloggers like this: