faqts : Computers : Programming : Languages : JavaScript : Forms : File Upload

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

25 of 38 people (66%) answered Yes
Recently 4 of 10 people (40%) answered Yes

Entry

JavaScript: Is it possible from the client side to upload a file directly to your ftp directory?

Jun 17th, 2005 07:35
Knud van Eeden,


----------------------------------------------------------------------
--- Knud van Eeden --- 27 August 2004 - 01:08 pm ---------------------

JavaScript: Is it possible from client side to upload a file directly 
to your ftp directory?

This seems (by design) not directly possible in a convenient way,
using JavaScript only.

---

As a workaround (not using JavaScript), you could let the user send an
email with the (photo) file(s) as an attachment, after which you by
hand, or using your (automatic) ftp program, add it to your ftp server.

---

A preliminary idea to implement client side ftp upload was at first:

Steps: Overview:

 1. -Create access to the ftp part of your website by creating a
     (general) username and password, and or anonymous ftp

 2. -Get the (general) username and password from the user
     or supply it automatically

 3. -Get the filename
     (e.g. using HTML input and type="file")

      or with using JavaScript

--- cut here begin ---------------------------------------------------

<HTML>
 <HEAD>
  <TITLE>
    Open file with windows browse box
  </TITLE>
 </HEAD>
 <BODY>
  <FORM
    NAME="aForm"
  >
   <INPUT
     TYPE="file"
     NAME="aFile"
   >
   <BR/>
   <INPUT
     TYPE="BUTTON"
     VALUE="display file"
     onClick=' PROCFileDisplayLocal( this.form.aFile.value );'
   >
  </FORM>
 </BODY>
</HTML>

<SCRIPT LANGUAGE = "JavaScript">
<!--
function PROCFileDisplayLocal( fileNameS ) {
 var url = 'file:///' + fileNameS;
 open ( url, 'preview' );
}
// -->
</SCRIPT>

--- cut here end -----------------------------------------------------

 4. -Concatenate this information to the URL

      e.g.

       ftp:<your username>+<your password>+<your ftp website 
URL>+<your filename to upload>

 5. -Run your webbrowser with this URL

      e.g.

       iexplore ftp:<your username>+<your password>+<your ftp website 
URL>+<your filename to upload>

---

=> (But this idea is not possible to implement, because such a ftp
    command does currently not exist for the Microsoft Internet
    Explorer browser, as far as I know now (though a simpler
    version of it allows you to log on on your ftp site)

---
---

So the alternative is to run some web server (e.g. Microsoft IIS or 
Apache)
on your website, which gets the file bytes sent to it, e.g. using HTML
input and type="file", and then a HTML form to submit it (to handle the
incoming text on the server side).

The web server then sends it to some (C++, ASP.NET, Delphi.NET, Perl or
Java (servlet), PHP, ... program which interprets (or just collects it
byte after byte) and stores it as a file (in your (anonymous) ftp
directory)).

---

Such a program (thus stored on the server computer) might look like
this:

--- cut here begin ---------------------------------------------------

 1. read the first byte and check if it is the correct expected format
    (e.g. a photo format (like 'jpg'))

    e.g.

      if not first bytes contain 'image/pjpeg' then goto exit

 2. while not end of file
     read byte
     store byte somewhere
    endwhile

 3. when finished reading, save all this bytes to a file in some ftp
    directory

--- cut here end -----------------------------------------------------

---

Thus the steps are:

Steps: Overview:

 1. -On the client side

     1. Get the filename from the user
        (using HTML <input> and type="file")

     2. -Use a HTML form to send
         <form> ... </form>, action="")

 2. -On the server side

     1. Have your web server running

     2. Run a program (written in some computer language) that receives
        the incoming bytes and handles it further

        1. Read the bytes of the incoming file

        2. Store the result

     3. Do something with this stored file(s)

---
---

Internet: see also:

---

[Internet: http://www.google.com search for 'HTML File upload': 
http://www.cs.tut.fi/~jkorpela/forms/file.html]

[Internet: http://www.google.com search for 'HTML File upload': 
http://www.htmlhelp.com/faq/html/forms.html#file-upload]

[Internet: http://www.google.com search for 'HTML File upload': 
http://www.servlets.com/cos/]

[Internet: http://www.google.com search for 'HTML File upload': 
http://www.15seconds.com/issue/010522.htm]

[Internet: http://www.google.com search for 'JavaScript File Upload 
How to': http://groups.google.com/groups?
q=JavaScript+File+Upload+How+to&start=10&hl=en&lr=&ie=UTF-
8&selm=33C0DCAD.4F7B%40lirinsa.insa-rouen.fr&rnum=16]

[Internet: http://www.google.com search for 'JavaScript File Upload 
How to': http://www.irt.org/feedback/873.htm]

[Internet: http://www.google.com search for 'JavaScript File Upload 
How to': 
http://www.faqts.com/knowledge_base/view.phtml/aid/13532/fid/177]

[Internet: 'What do I need to do client side to have file upload 
possibility?': 
http://www.faqts.com/knowledge_base/view.phtml/aid/1768/fid/177]

---

[Internet: source: http://www.google.com search for 'PHP File upload': 
http://www.php.net/features.file-upload]

[Internet: source: http://www.google.com search for 'ASP.NET File 
upload': http://www.codeproject.com/aspnet/fileupload.asp]

[Internet: source: http://www.google.com search for 'Java File 
upload': 
http://developer.netscape.com/docs/examples/java/file_uploading.html]

[Internet: source: http://www.google.com search for 'Delphi File 
upload': http://delphi.about.com/library/weekly/aa070604a.htm]

[Internet: source: http://www.google.com search for 'PERL file 
upload': 
http://www.hotscripts.com/Perl/Scripts_and_Programs/File_Manipulation/U
pload_Systems/]

---

Computer: Internet: File: Upload: Link: Overview: Can you give me an 
overview of links?
http://www.faqts.com/knowledge_base/view.phtml/aid/36718/fid/136

----------------------------------------------------------------------