CODEWITHSUNDEEP
javascriptfile-uploadftp
HoRn
HoRn

Reputation: 1518

How to upload a file to FTP server with javascript?

For minimal example, I have
Host: 111.222.111.123
Username: user_name
Password: pass_word
File to upload is selected with HTML input element

I can upload the file manually to the target directory on the server with a client like FileZilla.

The target directory is where the file should be uploaded. Its location on the Internet is https://nameofsite/targetdir/, so the file should be reachable on the internet for anyone as https://nameofsite/targetdir/1.html.

But is it possible to upload the file to the server with javascript?
I tried this example taking to account @mcrdy455's answer, but anyway it's not clear what the FtpConnection is:

<input id="fileForUpload" type=file onchange="upload()">
<div id="fileContents"></div>
  
<script>
function upload() {
    var file = document.getElementById("fileForUpload").files[0];
    if (file) {
        var reader = new FileReader();
        reader.readAsText(file, "UTF-8");
        reader.onload = function (evt) {
            document.getElementById("fileContents").innerHTML = evt.target.result;
            
            var ftp = new FtpConnection("ftp://111.222.111.123/");
            ftp.login("user_name", "pass_word");
            ftp.put(file, "1.html");
            ftp.close();
            file.close();
        }
    }
}
</script>

Uncaught ReferenceError: FtpConnection is not defined

After searching on the Internet, I'm still not sure what project FtpConnection belongs to. Other examples use URLs instead of IP addresses (111.222.111.123).
E.g. Ftp.createCORSRequest('POST', "http://www.ftpjs.xyz/upload.aspx") in this one. I would like not to complicate things (with CORS) and use the 111.222.111.123 address.

If FileZilla can do the job, why couldn't javascript do it? How?

Upvotes: 2

Views: 9054

Answers (2)

papo
papo

Reputation: 1949

Your example and first link is for Adobe scripts. Not for browser related use. See where points the link "documentation(pdf)" in that Question you linked. It should be stated in that Question, or at least tagged as Adobe question. Your second link is a method using ftpjs server, that proxies the connection. Using .NET library. The http://ftpjs.xyz/ is down, last archive.org capture is 2016. It might have been moved, or maybe you can set it up yourself, but that's not independent JS FTP client solution.

I have no answer for the other part of the question. How to do it, or if it's possible.

Interestingly, there was an idea or a plan of an FTP through XHR.
This statement was present on the MDN Web Docs until it was removed in 2019.

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).

https://web.archive.org/web/20190109002150/https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

Here are some more thoughts https://copyprogramming.com/howto/implementing-ftp-using-javascript

The author on above link concludes, It is impossible because we can't open a listening TCP socket in browser's JS.

But that's not needed in passive mode.
I did not find a definitive answer if FTP connection from JS running in a browser, or as a browser's WebExtension is not possible, not allowed, or just not implemented as a library by someone.

There are implementations for Node.JS.

Upvotes: 1

mcrdy455
mcrdy455

Reputation: 97

The JavaScript code can NOT access files from your filesystem, use an input type file, and read the file through the FileReader: You can fine more info on how to do this here, Once you have the correct file/blob object you code should work

Upvotes: 1

Related Questions