Start line:  
End line:  

Snippet Preview

Snippet HTML Code

Stack Overflow Questions
  /*
   * Copyright 2012 Google Inc.
   * 
   * Licensed under the Apache License, Version 2.0 (the "License"); you may not
   * use this file except in compliance with the License. You may obtain a copy of
   * the License at
   * 
   * http://www.apache.org/licenses/LICENSE-2.0
   * 
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  * License for the specific language governing permissions and limitations under
  * the License.
  */
 package elemental.html;
 
 import  elemental.html.*;
 
 import java.util.Date;

The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read. File objects may be obtained in one of two ways: from a FileList object returned as a result of a user selecting files using the <input> element, or from a drag and drop operation's DataTransfer object.

To create a FileReader, simply do the following:

var reader = new FileReader();

See Using files from web applications for details and examples.

 
 public interface FileReader extends EventTarget {

  
The entire read request has been completed.
 
 
     static final int DONE = 2;

  
No data has been loaded yet.
 
 
     static final int EMPTY = 0;

  
Data is currently being loaded.
 
 
     static final int LOADING = 1;


  
The error that occurred while reading the file. Read only.
 
   FileError getError();


  
Called when the read operation is aborted.
 
 
   void setOnabort(EventListener arg);


  
Called when an error occurs.
 
 
   void setOnerror(EventListener arg);


  
Called when the read operation is successfully completed.
 
 
   void setOnload(EventListener arg);


  
Called when the read is completed, whether successful or not. This is called after either onload or onerror.
 
 
   void setOnloadend(EventListener arg);


  
Called when reading the data is about to begin.
  void setOnloadstart(EventListener arg);


  
Called periodically while the data is being read.
  void setOnprogress(EventListener arg);


  
Indicates the state of the FileReader. This will be one of the State constants. Read only.
  int getReadyState();


  
The file's contents. This property is only valid after the read operation is complete, and the format of the data depends on which of the methods was used to initiate the read operation. Read only.
  Object getResult();


  

Aborts the read operation. Upon return, the readyState will be DONE.

Parameters

None.

Exceptions thrown
DOM_FILE_ABORT_ERR
abort() was called while no read operation was in progress (that is, the state wasn't LOADING).
Note: This exception was not thrown by Gecko until Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3) .

  void abort();
  EventRemover addEventListener(String typeEventListener listenerboolean useCapture);
  boolean dispatchEvent(Event evt);


  

Starts reading the contents of the specified Blob or File . When the read operation is finished, the readyState will become DONE, and the onloadend callback, if any, will be called. At that time, the result attribute contains an ArrayBuffer representing the file's data.

Parameters
blob
The DOM Blob or File to read into the ArrayBuffer.
  void readAsArrayBuffer(Blob blob);


  

Starts reading the contents of the specified Blob , which may be a File . When the read operation is finished, the readyState will become DONE, and the onloadend callback, if any, will be called. At that time, the result attribute contains the raw binary data from the file.

Parameters
blob
The DOM Blob or File from which to read.
  void readAsBinaryString(Blob blob);


  

Starts reading the contents of the specified Blob or File . When the read operation is finished, the readyState will become DONE, and the onloadend callback, if any, will be called. At that time, the result attribute contains a data: URL representing the file's data.

This method is useful, for example, to get a preview of an image before uploading it:

<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<script type="text/javascript">
oFReader = new FileReader(), rFilter = /^(image\/bmp|image\/cis-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x-cmu-raster|image\/x-cmx|image\/x-icon|image\/x-portable-anymap|image\/x-portable-bitmap|image\/x-portable-graymap|image\/x-portable-pixmap|image\/x-rgb|image\/x-xbitmap|image\/x-xpixmap|image\/x-xwindowdump)$/i;

oFReader.onload = function (oFREvent) {
document.getElementById("uploadPreview").src = oFREvent.target.result;
};

function loadImageFile() {
if (document.getElementById("uploadImage").files.length === 0) { return; }
var oFile = document.getElementById("uploadImage").files[0];
if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
oFReader.readAsDataURL(oFile);
}
</script>
</head>

<body onload="loadImageFile();">
<form name="uploadForm">
<table>
<tbody>
<tr>
<td><img id="uploadPreview" style="width: 100px; height: 100px;" src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20width%3D%22153%22%20height%3D%22153%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%3Cg%3E%0A%20%20%3Ctitle%3ENo%20image%3C/title%3E%0A%20%20%3Crect%20id%3D%22externRect%22%20height%3D%22150%22%20width%3D%22150%22%20y%3D%221.5%22%20x%3D%221.500024%22%20stroke-width%3D%223%22%20stroke%3D%22%23666666%22%20fill%3D%22%23e1e1e1%22/%3E%0A%20%20%3Ctext%20transform%3D%22matrix%286.66667%2C%200%2C%200%2C%206.66667%2C%20-960.5%2C%20-1099.33%29%22%20xml%3Aspace%3D%22preserve%22%20text-anchor%3D%22middle%22%20font-family%3D%22Fantasy%22%20font-size%3D%2214%22%20id%3D%22questionMark%22%20y%3D%22181.249569%22%20x%3D%22155.549819%22%20stroke-width%3D%220%22%20stroke%3D%22%23666666%22%20fill%3D%22%23000000%22%3E%3F%3C/text%3E%0A%20%3C/g%3E%0A%3C/svg%3E" alt="Image preview" /></td>
<td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td>
</tr>
</tbody>
</table>
<p><input type="submit" value="Send" /></p>
</form>
</body>
</html>
Parameters
file
The DOM Blob or File from which to read.
  void readAsDataURL(Blob blob);


  

Starts reading the specified blob's contents. When the read operation is finished, the readyState will become DONE, and the onloadend callback, if any, will be called. At that time, the result attribute contains the contents of the file as a text string.

Parameters
blob
The DOM Blob or File from which to read.
encoding Optional
A string indicating the encoding to use for the returned data. By default, UTF-8 is assumed if this parameter is not specified.
  void readAsText(Blob blob);


  

Starts reading the specified blob's contents. When the read operation is finished, the readyState will become DONE, and the onloadend callback, if any, will be called. At that time, the result attribute contains the contents of the file as a text string.

Parameters
blob
The DOM Blob or File from which to read.
encoding Optional
A string indicating the encoding to use for the returned data. By default, UTF-8 is assumed if this parameter is not specified.
  void readAsText(Blob blobString encoding);
  void removeEventListener(String typeEventListener listener);
  void removeEventListener(String typeEventListener listenerboolean useCapture);
New to GrepCode? Check out our FAQ X