MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

Revision 308587 of Uploading and Downloading Files

  • Revision slug: FileGuide/FileUpDown
  • Revision title: Uploading and Downloading Files
  • Revision id: 308587
  • Created:
  • Creator: Wladimir_Palant
  • Is current revision? Yes
  • Comment

Revision Content

{{ Page('en/FileGuide/TOC') }}

The IO object and stream objects can be used to upload files to servers in various ways. The exact method depends on the type of upload that you wish to perform.

HTTP File Upload

Some web sites allow one to upload a file. This is done by using an HTML <input> element using the file type from within a form. When the user selects a file, it can be uploaded to a server. This operation can also be performed via a script using the XMLHttpRequest object. This is a common technique for uploading files as it is compatible with existing servers and FormData interface makes that task fairly simple.

A FormData object will automatically generate request data with MIME type multipart/form-data that existing servers can process. To add a file field to the data you use a File object that an extension can construct from file path. The FormData object can then simply be passed to XMLHttpRequest:

function upload(postUrl, fieldName, filePath)
{
  var formData = new FormData();
  formData.append(fieldName, new File(filePath));

  var req = new XMLHttpRequest();
  req.open("POST", postUrl);
  req.onload = function(event) { alert(event.target.responseText); };
  req.send(formData);
}

HTTP PUT

You can also upload a file using an HTTP PUT operation. This is simpler but it doesn't allow sending additional data and web servers usually need special configuration to support PUT operations.

function uploadPut(postUrl, filePath)
{
  var req = new XMLHttpRequest();
  req.open("PUT", postUrl);
  req.setRequestHeader("Content-type", "text/plain");
  req.onload = function(event) { alert(event.target.responseText); }
  req.send(new File(filePath));
}

In this example, a new input stream is created for a file, and is passed to the XMLHttpRequest's send method.

Downloading Files

To come...

Revision Source

<p>{{ Page('en/FileGuide/TOC') }}</p>
<p>The IO object and stream objects can be used to upload files to servers in various ways. The exact method depends on the type of upload that you wish to perform.</p>
<h4 id="HTTP_File_Upload" name="HTTP_File_Upload">HTTP File Upload</h4>
<p>Some web sites allow one to upload a file. This is done by using an HTML &lt;input&gt; element using the <code>file</code> type from within a form. When the user selects a file, it can be uploaded to a server. This operation can also be performed via a script using the XMLHttpRequest object. This is a common technique for uploading files as it is compatible with existing servers and <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="/en-US/docs/DOM/XMLHttpRequest/FormData">FormData</a> interface makes that task fairly simple.</p>
<p>A FormData object will automatically generate request data with MIME type <code>multipart/form-data</code> that existing servers can process. To add a file field to the data you use a <a href="/en-US/docs/DOM/File" title="/en-US/docs/DOM/File">File</a> object that an extension can construct from file path. The FormData object can then simply be passed to XMLHttpRequest:</p>
<pre class="brush:js;">
function upload(postUrl, fieldName, filePath)
{
  var formData = new FormData();
  formData.append(fieldName, new File(filePath));

  var req = new XMLHttpRequest();
  req.open("POST", postUrl);
  req.onload = function(event) { alert(event.target.responseText); };
  req.send(formData);
}
</pre>
<h4 id="HTTP_PUT" name="HTTP_PUT">HTTP PUT</h4>
<p>You can also upload a file using an HTTP PUT operation. This is simpler but it doesn't allow sending additional data and web servers usually need special configuration to support PUT operations.</p>
<pre class="brush:js;">
function uploadPut(postUrl, filePath)
{
  var req = new XMLHttpRequest();
  req.open("PUT", postUrl);
  req.setRequestHeader("Content-type", "text/plain");
  req.onload = function(event) { alert(event.target.responseText); }
  req.send(new File(filePath));
}
</pre>
<p>In this example, a new input stream is created for a file, and is passed to the XMLHttpRequest's <code>send</code> method.</p>
<h4 id="Downloading_Files" name="Downloading_Files">Downloading Files</h4>
<p>To come...</p>
Revert to this revision