[File] Added fileReader and fileWriter tutorials and guides

Change-Id: Iadd09fa237f959180ee4182c0b6f1bd31b3ad2f2
Signed-off-by: Lukasz Bardeli <l.bardeli@samsung.com>

diff --git a/org.tizen.guides/html/web/tizen/cordova/file_w.htm b/org.tizen.guides/html/web/tizen/cordova/file_w.htm
index 6835a07..2899173 100644 (file)
--- a/org.tizen.guides/html/web/tizen/cordova/file_w.htm
+++ b/org.tizen.guides/html/web/tizen/cordova/file_w.htm
@@ -94,7 +94,7 @@ See the <a href="../../../../../org.tizen.tutorials/html/web/tizen/cordova/file_
 <!-------------------------------------------------- readwrite -------------------------------------------------->
 <h2 id="readwrite">Reading/writing files content</h2>
 <p>
-Some description
+Thanks FileReader and FileWriter operations you can read Blob objects in specific format (DataURL, Test, BinaryString, ArrayBuffer), and also you can create and write data to file.
 
 See the <a href="../../../../../org.tizen.tutorials/html/web/tizen/cordova/file_tutorial_w.htm#readwrite">example</a>.
 </p>

diff --git a/org.tizen.tutorials/html/web/tizen/cordova/file_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/cordova/file_tutorial_w.htm
index ab11bda..19fe9cf 100644 (file)
--- a/org.tizen.tutorials/html/web/tizen/cordova/file_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/cordova/file_tutorial_w.htm
@@ -103,18 +103,216 @@ The output:
 
 <!-------------------------------------------------- readwrite -------------------------------------------------->
 <h2 id="readwrite">Reading/writing files content</h2>
+<ol>
+<li>
 <p>
-Description.
+To read file and return data as a base64-encoded data URL, you can use <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/file.html#FileReader::readAsDataURL"><i>readAsDataURL</i></a> method.
 </p>
 <pre class="prettyprint">
-//////////////////// some code
+var blob = new Blob(['abc']);
+var fileReader = new FileReader();
+fileReader.onload = function(){
+    console.log('Loaded, result = '+fileReader.result);
+};
+fileReader.readAsDataURL(blob);
 </pre>
 <p>
 The output:
 </p>
 <pre class="prettyprint">
-///////////////// some output
+Loaded, result = data:;base64,YWJj
+</pre>
+</li>
+
+<li>
+<p>
+To read file and return data as a text, you can use <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/file.html#FileReader::readAsText"><i>readAsText</i></a> method.
+</p>
+<pre class="prettyprint">
+var blob = new Blob(['abc']);
+var fileReader = new FileReader();
+fileReader.onload = function(){
+    console.log('Loaded, result = '+fileReader.result);
+};
+fileReader.readAsText(blob);
+</pre>
+<p>
+The output:
+</p>
+<pre class="prettyprint">
+Loaded, result = abc
+</pre>
+</li>
+
+<li>
+<p>
+To read file and return data as a binary and returns a binary string, you can use <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/file.html#FileReader::readAsBinaryString"><i>readAsBinaryString</i></a> method.
+</p>
+<pre class="prettyprint">
+var blob = new Blob(['abc']);
+var fileReader = new FileReader();
+fileReader.onload = function(){
+    console.log('Loaded, result = '+fileReader.result);
+};
+fileReader.readAsBinaryString(blob);
+</pre>
+<p>
+The output:
+</p>
+<pre class="prettyprint">
+Loaded, result = abc
+</pre>
+</li>
+
+<li>
+<p>
+To read file and return data as an array buffer and result would be byte[], you can use <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/file.html#FileReader::readAsArrayBuffer"><i>readAsArrayBuffer</i></a> method.
+</p>
+<pre class="prettyprint">
+var blob = new Blob(['abc']);
+var fileReader = new FileReader();
+fileReader.onload = function(){
+    resultValue = fileReader.result;
+     console.log("Result: "+resultValue.toString()+' '+'ByteLength: '+resultValue.byteLength);
+};
+fileReader.readAsArrayBuffer(blob);
+</pre>
+<p>
+The output:
+</p>
+<pre class="prettyprint">
+Result: [object ArrayBuffer]
+ByteLength: 3
+</pre>
+</li>
+
+<li>
+<p>
+To abort current operation of reading file, you can use <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/file.html#FileReader::abort"><i>abort</i></a> method.
+</p>
+<pre class="prettyprint">
+var blob = new Blob(['abc']);
+var fileReader = new FileReader();
+fileReader.onload = function(){
+    console.log('Loaded');
+};
+fileReader.onabort = function(){
+    console.log('aborted');
+};
+fileReader.readAsDataURL(blob);
+fileReader.abort();
+</pre>
+<p>
+The output:
+</p>
+<pre class="prettyprint">
+aborted
 </pre>
+</li>
+
+<li>
+<p>
+To writes data to the file, you can use <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/file.html#FileWriter::write"><i>write</i></a> method.
+</p>
+<pre class="prettyprint">
+successCallback = function(writer) {
+   writer.onwrite = function(evt) {
+        console.log('write success');
+   };
+   writer.write('some sample text');
+};
+errorCallback = function(err) {
+    console.log(err.code);
+};
+// entry is FileEntry object retrieved by getFile() function of DirectoryEntry interface.
+entry.createWriter(successCallback, errorCallback);
+</pre>
+<p>
+The output:
+</p>
+<pre class="prettyprint">
+write success
+</pre>
+</li>
+
+<li>
+<p>
+To moves the file pointer to the specified byte, you can use <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/file.html#FileWriter::seek "><i>seek</i></a> method.
+</p>
+<pre class="prettyprint">
+successCallback = function(writer) {
+   // fast forwards file pointer to the end of file.
+   writer.seek(writer.length);
+};
+
+errorCallback = function(err) {
+    console.log(err.code);
+};
+
+// entry is FileEntry object retrieved by getFile() function of DirectoryEntry interface.
+entry.createWriter(successCallback, errorCallback);
+</pre>
+</li>
+
+<li>
+<p>
+To short the file to the specified length, you can use <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/file.html#FileWriter::truncate"><i>truncate</i></a> method.
+</p>
+<pre class="prettyprint">
+successCallback = function(writer) {
+writer.onwrite = function(evt) {
+        console.log('truncate success');
+   };
+    writer.truncate(10);
+};
+
+errorCallback = function(err) {
+    console.log(err.code);
+};
+
+// entry is FileEntry object retrieved by getFile() function of DirectoryEntry interface.
+entry.createWriter(successCallback, errorCallback);
+</pre>
+<p>
+The output:
+</p>
+<pre class="prettyprint">
+truncate success
+</pre>
+</li>
+
+<li>
+<p>
+To abort writing the file, you can use <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/file.html#FileWriter::abort"><i>abort</i></a> method.
+</p>
+<pre class="prettyprint">
+successCallback = function(writer) {
+   writer.onwrite = function(evt) {
+        console.log('write success');
+   };
+   writer.onabort = function(e){
+         console.log('abort');
+   };
+   writer.write('some sample text');
+   writer.abort();
+};
+
+errorCallback = function(err) {
+    console.log(err.code);
+};
+
+// entry is FileEntry object retrieved by getFile() function of DirectoryEntry interface.
+entry.createWriter(successCallback, errorCallback);
+</pre>
+<p>
+The output:
+</p>
+<pre class="prettyprint">
+abort
+</pre>
+</li>
+
+</ol>
 <!-------------------------------------------------- readwrite -------------------------------------------------->
 
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>