File Access

The FileAccess service allows you to attain the contents of a file selected by the user. The service exposes two functions: GetURL will attain a temporal localhost URL to access the content. Read will allow javascript direct access to the contents of a file. Read today has two important restrictions:

  1. A limit of 2mb is imposed on the amount of data that may be read.
  2. binary data (more specifically, files with embedded null bytes) may not be read. 

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

<html>
  <head><title>Accessing Files</title>
</head>

<body>
<p>
<div id="dropTitle">loading...</div>
<br>
<div id="lastDropSummary"></div>
<textarea rows="20" cols="80" id="lastDropContents"></textarea> 
<p>
  Last drop as Image:
</p>
<img id="lastDropImg">

<script src="http://bp.yahooapis.com/2.9.9/browserplus-min.js"></script>  
<script type="text/javascript">
$BP = BrowserPlus;

function setDropAreaTitle(txt) {
  var div = document.getElementById("dropTitle");
  while (div.firstChild) {div.removeChild(div.firstChild);}
  div.appendChild(document.createTextNode(txt));
}

function hovering(hoverOn) {
  if (hoverOn) {setDropAreaTitle("drop it!");}
  else {setDropAreaTitle("drag something to the box below.");}
} 

function dropped(arg) {
  var textArea = document.getElementById("lastDropContents");

  var title = document.createElement("b");
  title.innerHTML = "Last drop Contents (" +
	arg[0].name + " - " + arg[0].size + " bytes - " + arg[0].mimeType + ")<p>";
 
  // set summary text
  lds = document.getElementById("lastDropSummary");
  while (lds.firstChild) lds.removeChild(lds.firstChild);
  lds.appendChild(title);
  textArea.value = "reading...";

  BrowserPlus.FileAccess.Read(
	{ file: arg[0] },
	function (rez) {
	  var contents;
	  if (rez.success) {
		contents = rez.value;
	  } else {
		contents = rez.error + ": " + rez.verboseError;
	  }
      textArea.value = contents;
	});
  BrowserPlus.FileAccess.GetURL(
	{ file: arg[0] },
	function (r) {
	  if (r.success) {
		var i = document.getElementById("lastDropImg");
		i.src = r.value;
	  } else {
		alert(r.error + ": " + r.verboseError);
	  }
	});
}

BrowserPlus.init(function(res) {
  if (res.success) {
   BrowserPlus.require({
      services: [
		{service: 'DragAndDrop', version: "1"},
		{service: 'FileAccess', version: "1"}
	  ]},
      function(res) {
        if (res.success) {
          var dnd = BrowserPlus.DragAndDrop;
          dnd.AddDropTarget(
            {id: "lastDropContents"},
            function(res) {
              dnd.AttachCallbacks({
                id: "lastDropContents",
                hover: hovering,
                drop: dropped
              },
              function(){});  
            setDropAreaTitle("drag something to the box below.");
          });
        } else {
          alert("Error Loading DragAndDrop: " + res.error);
        }
      });
  } else {
    alert("Failed to initialize BrowserPlus: " + res.error);
  }
}); 
</script> 
</body>
</html>
Run Example

This example demonstrates how to set up a drop target over a text area and use both functions of the FileAccess service. Note that in a real world application you would probably want to leverage the mime type filtering features exposed by the FileBrowse and DragAndDrop services.