Modified: cordova/site/public/docs/en/6.x/reference/cordova-plugin-file/index.html URL: http://svn.apache.org/viewvc/cordova/site/public/docs/en/6.x/reference/cordova-plugin-file/index.html?rev=1766733&r1=1766732&r2=1766733&view=diff ============================================================================== --- cordova/site/public/docs/en/6.x/reference/cordova-plugin-file/index.html (original) +++ cordova/site/public/docs/en/6.x/reference/cordova-plugin-file/index.html Wed Oct 26 20:28:35 2016 @@ -6,12 +6,12 @@ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" /> - <meta name="description" content=" "> + <meta name="description" content="Read/write files on the device. "> <title> - cordova-plugin-file - Apache Cordova + File - Apache Cordova </title> @@ -747,7 +747,7 @@ <li> <a class="" href="../../reference/cordova-plugin-battery-status/index.html"> - cordova-plugin-battery-status + Battery Status </a> @@ -762,7 +762,7 @@ <li> <a class="" href="../../reference/cordova-plugin-camera/index.html"> - cordova-plugin-camera + Camera </a> @@ -777,7 +777,7 @@ <li> <a class="" href="../../reference/cordova-plugin-console/index.html"> - cordova-plugin-console + Console </a> @@ -792,7 +792,7 @@ <li> <a class="" href="../../reference/cordova-plugin-contacts/index.html"> - cordova-plugin-contacts + Contacts </a> @@ -807,7 +807,7 @@ <li> <a class="" href="../../reference/cordova-plugin-device/index.html"> - cordova-plugin-device + Device </a> @@ -822,7 +822,7 @@ <li> <a class="" href="../../reference/cordova-plugin-device-motion/index.html"> - cordova-plugin-device-motion + Device Motion </a> @@ -837,7 +837,7 @@ <li> <a class="" href="../../reference/cordova-plugin-device-orientation/index.html"> - cordova-plugin-device-orientation + Device Orientation </a> @@ -852,7 +852,7 @@ <li> <a class="" href="../../reference/cordova-plugin-dialogs/index.html"> - cordova-plugin-dialogs + Dialogs </a> @@ -867,7 +867,7 @@ <li> <a class="this-page" href="../../reference/cordova-plugin-file/index.html"> - cordova-plugin-file + File </a> <span class="entry-highlight"></span> @@ -884,7 +884,7 @@ <li> <a class="" href="../../reference/cordova-plugin-file-transfer/index.html"> - cordova-plugin-file-transfer + File Transfer </a> @@ -899,7 +899,7 @@ <li> <a class="" href="../../reference/cordova-plugin-geolocation/index.html"> - cordova-plugin-geolocation + Geolocation </a> @@ -914,7 +914,7 @@ <li> <a class="" href="../../reference/cordova-plugin-globalization/index.html"> - cordova-plugin-globalization + Globalization </a> @@ -929,7 +929,7 @@ <li> <a class="" href="../../reference/cordova-plugin-inappbrowser/index.html"> - cordova-plugin-inappbrowser + Inappbrowser </a> @@ -944,7 +944,7 @@ <li> <a class="" href="../../reference/cordova-plugin-media/index.html"> - cordova-plugin-media + Media </a> @@ -959,7 +959,7 @@ <li> <a class="" href="../../reference/cordova-plugin-media-capture/index.html"> - cordova-plugin-media-capture + Media Capture </a> @@ -974,7 +974,7 @@ <li> <a class="" href="../../reference/cordova-plugin-network-information/index.html"> - cordova-plugin-network-information + Network Information </a> @@ -989,7 +989,7 @@ <li> <a class="" href="../../reference/cordova-plugin-splashscreen/index.html"> - cordova-plugin-splashscreen + Splashscreen </a> @@ -1004,7 +1004,7 @@ <li> <a class="" href="../../reference/cordova-plugin-vibration/index.html"> - cordova-plugin-vibration + Vibration </a> @@ -1019,7 +1019,7 @@ <li> <a class="" href="../../reference/cordova-plugin-statusbar/index.html"> - cordova-plugin-statusbar + Statusbar </a> @@ -1034,7 +1034,7 @@ <li> <a class="" href="../../reference/cordova-plugin-whitelist/index.html"> - cordova-plugin-whitelist + Whitelist </a> @@ -1049,7 +1049,7 @@ <li> <a class="" href="../../reference/cordova-plugin-legacy-whitelist/index.html"> - cordova-plugin-legacy-whitelist + Legacy Whitelist </a> @@ -1412,7 +1412,7 @@ <li> <a class="" href="../../reference/cordova-plugin-battery-status/index.html"> - cordova-plugin-battery-status + Battery Status </a> </li> @@ -1421,7 +1421,7 @@ <li> <a class="" href="../../reference/cordova-plugin-camera/index.html"> - cordova-plugin-camera + Camera </a> </li> @@ -1430,7 +1430,7 @@ <li> <a class="" href="../../reference/cordova-plugin-console/index.html"> - cordova-plugin-console + Console </a> </li> @@ -1439,7 +1439,7 @@ <li> <a class="" href="../../reference/cordova-plugin-contacts/index.html"> - cordova-plugin-contacts + Contacts </a> </li> @@ -1448,7 +1448,7 @@ <li> <a class="" href="../../reference/cordova-plugin-device/index.html"> - cordova-plugin-device + Device </a> </li> @@ -1457,7 +1457,7 @@ <li> <a class="" href="../../reference/cordova-plugin-device-motion/index.html"> - cordova-plugin-device-motion + Device Motion </a> </li> @@ -1466,7 +1466,7 @@ <li> <a class="" href="../../reference/cordova-plugin-device-orientation/index.html"> - cordova-plugin-device-orientation + Device Orientation </a> </li> @@ -1475,7 +1475,7 @@ <li> <a class="" href="../../reference/cordova-plugin-dialogs/index.html"> - cordova-plugin-dialogs + Dialogs </a> </li> @@ -1484,7 +1484,7 @@ <li> <a class="this-page" href="../../reference/cordova-plugin-file/index.html"> - cordova-plugin-file + File </a> </li> @@ -1493,7 +1493,7 @@ <li> <a class="" href="../../reference/cordova-plugin-file-transfer/index.html"> - cordova-plugin-file-transfer + File Transfer </a> </li> @@ -1502,7 +1502,7 @@ <li> <a class="" href="../../reference/cordova-plugin-geolocation/index.html"> - cordova-plugin-geolocation + Geolocation </a> </li> @@ -1511,7 +1511,7 @@ <li> <a class="" href="../../reference/cordova-plugin-globalization/index.html"> - cordova-plugin-globalization + Globalization </a> </li> @@ -1520,7 +1520,7 @@ <li> <a class="" href="../../reference/cordova-plugin-inappbrowser/index.html"> - cordova-plugin-inappbrowser + Inappbrowser </a> </li> @@ -1529,7 +1529,7 @@ <li> <a class="" href="../../reference/cordova-plugin-media/index.html"> - cordova-plugin-media + Media </a> </li> @@ -1538,7 +1538,7 @@ <li> <a class="" href="../../reference/cordova-plugin-media-capture/index.html"> - cordova-plugin-media-capture + Media Capture </a> </li> @@ -1547,7 +1547,7 @@ <li> <a class="" href="../../reference/cordova-plugin-network-information/index.html"> - cordova-plugin-network-information + Network Information </a> </li> @@ -1556,7 +1556,7 @@ <li> <a class="" href="../../reference/cordova-plugin-splashscreen/index.html"> - cordova-plugin-splashscreen + Splashscreen </a> </li> @@ -1565,7 +1565,7 @@ <li> <a class="" href="../../reference/cordova-plugin-vibration/index.html"> - cordova-plugin-vibration + Vibration </a> </li> @@ -1574,7 +1574,7 @@ <li> <a class="" href="../../reference/cordova-plugin-statusbar/index.html"> - cordova-plugin-statusbar + Statusbar </a> </li> @@ -1583,7 +1583,7 @@ <li> <a class="" href="../../reference/cordova-plugin-whitelist/index.html"> - cordova-plugin-whitelist + Whitelist </a> </li> @@ -1592,7 +1592,7 @@ <li> <a class="" href="../../reference/cordova-plugin-legacy-whitelist/index.html"> - cordova-plugin-legacy-whitelist + Legacy Whitelist </a> </li> @@ -2704,7 +2704,25 @@ # under the License. --> -<p><a href="https://travis-ci.org/apache/cordova-plugin-file";><img src="https://travis-ci.org/apache/cordova-plugin-file.svg?branch=master"; alt="Build Status"></a></p> +<table><thead> +<tr> +<th style="text-align: center">Android</th> +<th style="text-align: center">iOS</th> +<th style="text-align: center">Windows 8.1 Store</th> +<th style="text-align: center">Windows 8.1 Phone</th> +<th style="text-align: center">Windows 10 Store</th> +<th style="text-align: center">Travis CI</th> +</tr> +</thead><tbody> +<tr> +<td style="text-align: center"><a href="http://cordova-ci.cloudapp.net:8080/job/cordova-periodic-build/PLATFORM=android,PLUGIN=cordova-plugin-file/";><img src="http://cordova-ci.cloudapp.net:8080/buildStatus/icon?job=cordova-periodic-build/PLATFORM=android,PLUGIN=cordova-plugin-file"; alt="Build Status"></a></td> +<td style="text-align: center"><a href="http://cordova-ci.cloudapp.net:8080/job/cordova-periodic-build/PLATFORM=ios,PLUGIN=cordova-plugin-file/";><img src="http://cordova-ci.cloudapp.net:8080/buildStatus/icon?job=cordova-periodic-build/PLATFORM=ios,PLUGIN=cordova-plugin-file"; alt="Build Status"></a></td> +<td style="text-align: center"><a href="http://cordova-ci.cloudapp.net:8080/job/cordova-periodic-build/PLATFORM=windows-8.1-store,PLUGIN=cordova-plugin-file/";><img src="http://cordova-ci.cloudapp.net:8080/buildStatus/icon?job=cordova-periodic-build/PLATFORM=windows-8.1-store,PLUGIN=cordova-plugin-file"; alt="Build Status"></a></td> +<td style="text-align: center"><a href="http://cordova-ci.cloudapp.net:8080/job/cordova-periodic-build/PLATFORM=windows-8.1-phone,PLUGIN=cordova-plugin-file/";><img src="http://cordova-ci.cloudapp.net:8080/buildStatus/icon?job=cordova-periodic-build/PLATFORM=windows-8.1-phone,PLUGIN=cordova-plugin-file"; alt="Build Status"></a></td> +<td style="text-align: center"><a href="http://cordova-ci.cloudapp.net:8080/job/cordova-periodic-build/PLATFORM=windows-10-store,PLUGIN=cordova-plugin-file/";><img src="http://cordova-ci.cloudapp.net:8080/buildStatus/icon?job=cordova-periodic-build/PLATFORM=windows-10-store,PLUGIN=cordova-plugin-file"; alt="Build Status"></a></td> +<td style="text-align: center"><a href="https://travis-ci.org/apache/cordova-plugin-file";><img src="https://travis-ci.org/apache/cordova-plugin-file.svg?branch=master"; alt="Build Status"></a></td> +</tr> +</tbody></table> <h1>cordova-plugin-file</h1> @@ -2714,7 +2732,7 @@ The HTML5 File API <a href="http://www.w3.org/TR/FileAPI/";>http://www.w3.org/TR/FileAPI/</a></p> -<p>The (now-defunct) Directories and System extensions +<p>The Directories and System extensions Latest: <a href="http://www.w3.org/TR/2012/WD-file-system-api-20120417/";>http://www.w3.org/TR/2012/WD-file-system-api-20120417/</a> Although most of the plugin code was written when an earlier spec was current: @@ -2723,10 +2741,14 @@ Although most of the plugin code was wri <p>It also implements the FileWriter spec : <a href="http://dev.w3.org/2009/dap/file-system/file-writer.html";>http://dev.w3.org/2009/dap/file-system/file-writer.html</a></p> -<p>For usage, please refer to HTML5 Rocks' excellent <a href="http://www.html5rocks.com/en/tutorials/file/filesystem/";>FileSystem article.</a></p> +<blockquote> +<p><em>Note</em> While the W3C FileSystem spec is deprecated for web browsers, the FileSystem APIs are supported in Cordova applications with this plugin for the platforms listed in the <em>Supported Platforms</em> list, with the exception of the Browser platform.</p> +</blockquote> + +<p>To get a few ideas how to use the plugin, check out the <a href="#sample">sample</a> at the bottom of this page. For additional examples (browser focused), see the HTML5 Rocks' <a href="http://www.html5rocks.com/en/tutorials/file/filesystem/";>FileSystem article.</a></p> <p>For an overview of other storage options, refer to Cordova's -<a href="http://cordova.apache.org/docs/en/edge/cordova_storage_storage.md.html";>storage guide</a>.</p> +<a href="http://cordova.apache.org/docs/en/latest/cordova/storage/storage.html";>storage guide</a>.</p> <p>This plugin defines global <code>cordova.file</code> object.</p> @@ -2946,7 +2968,7 @@ the <code>cordova.file.*</code> properti <tr> <td style="text-align: left"><code>file:///android_asset/</code></td> <td style="text-align: left">applicationDirectory</td> -<td style="text-align: left"></td> +<td style="text-align: left">assets</td> <td style="text-align: center">r</td> <td style="text-align: center">N/A</td> <td style="text-align: center">N/A</td> @@ -3291,6 +3313,14 @@ persistent filesystem, then the <code>In adding <code>src/android/build-extras.gradle</code> to the root of your android project (also requires cordova-android@4.0.0 or greater).</p> +<h3>Permisson to write to external storage when it's not mounted on Marshmallow</h3> + +<p>Marshmallow requires the apps to ask for permissions when reading/writing to external locations. By +<a href="http://developer.android.com/guide/topics/data/data-storage.html#filesExternal";>default</a>, your app has permission to write to +<code>cordova.file.applicationStorageDirectory</code> and <code>cordova.file.externalApplicationStorageDirectory</code>, and the plugin doesn't request permission +for these two directories unless external storage is not mounted. However due to a limitation, when external storage is not mounted, it would ask for +permission to write to <code>cordova.file.externalApplicationStorageDirectory</code>.</p> + <h2>iOS Quirks</h2> <ul> @@ -3586,7 +3616,7 @@ cdvfile paths are supported by core plug Android recognize a <preference> tag in <code>config.xml</code> which names the filesystems to be installed. By default, all file-system roots are enabled.</p> <div class="highlight"><pre><code class="language-" data-lang=""><preference name="iosExtraFilesystems" value="library,library-nosync,documents,documents-nosync,cache,bundle,root" /> -<preference name="AndroidExtraFilesystems" value="files,files-external,documents,sdcard,cache,cache-external,root" /> +<preference name="AndroidExtraFilesystems" value="files,files-external,documents,sdcard,cache,cache-external,assets,root" /> </code></pre></div> <h3>Android</h3> @@ -3596,6 +3626,7 @@ filesystems to be installed. By default, <li><code>sdcard</code>: The global external file storage directory (this is the root of the SD card, if one is installed). You must have the <code>android.permission.WRITE_EXTERNAL_STORAGE</code> permission to use this.</li> <li><code>cache</code>: The application's internal cache directory</li> <li><code>cache-external</code>: The application's external cache directory</li> +<li><code>assets</code>: The application's bundle (read-only)</li> <li><code>root</code>: The entire device filesystem</li> </ul> @@ -3613,6 +3644,278 @@ filesystems to be installed. By default, <p>By default, the library and documents directories can be synced to iCloud. You can also request two additional filesystems, <code>library-nosync</code> and <code>documents-nosync</code>, which represent a special non-synced directory within the <code>/Library</code> or <code>/Documents</code> filesystem.</p> +<h2>Sample: Create Files and Directories, Write, Read, and Append files <a name="sample"></a></h2> + +<p>The File plugin allows you to do things like store files in a temporary or persistent storage location for your app (sandboxed storage) and to store files in other platform-dependent locations. The code snippets in this section demonstrate different tasks including:</p> + +<ul> +<li><a href="#persistent">Accessing the file system</a></li> +<li>Using cross-platform Cordova file URLs to <a href="#appendFile">store your files</a> (see <em>Where to Store Files</em> for more info)</li> +<li>Creating <a href="#persistent">files</a> and <a href="#createDir">directories</a></li> +<li><a href="#writeFile">Writing to files</a></li> +<li><a href="#readFile">Reading files</a></li> +<li><a href="#appendFile">Appending files</a></li> +<li><a href="#displayImage">Display an image file</a></li> +</ul> + +<h2>Create a persistent file <a name="persistent"></a></h2> + +<p>Before you use the File plugin APIs, you can get access to the file system using <code>requestFileSystem</code>. When you do this, you can request either persistent or temporary storage. Persistent storage will not be removed unless permission is granted by the user.</p> + +<p>When you get file system access using <code>requestFileSystem</code>, access is granted for the sandboxed file system only (the sandbox limits access to the app itself), not for general access to any file system location on the device. (To access file system locations outside the sandboxed storage, use other methods such as window.requestLocalFileSystemURL, which support platform-specific locations. For one example of this, see <em>Append a File</em>.)</p> + +<p>Here is a request for persistent storage.</p> + +<blockquote> +<p><em>Note</em> When targeting WebView clients (instead of a browser) or native apps (Windows), you dont need to use <code>requestQuota</code> before using persistent storage.</p> +</blockquote> +<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nb">window</span><span class="p">.</span><span class="nx">requestFileSystem</span><span class="p">(</span><span class="nx">LocalFileSystem</span><span class="p">.</span><span class="nx">PERSISTENT</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">fs</span><span class="p">)</span> <span class="p">{</span> + + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'file system open: '</span> <span class="o">+</span> <span class="nx">fs</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span> + <span class="nx">fs</span><span class="p">.</span><span class="nx">root</span><span class="p">.</span><span class="nx">getFile</span><span class="p">(</span><span class="s2">"newPersistentFile.txt"</span><span class="p">,</span> <span class="p">{</span> <span class="na">create</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="na">exclusive</span><span class="p">:</span> <span class="kc">false</span> <span class="p">},</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">fileEntry</span><span class="p">)</span> <span class="p">{</span> + + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"fileEntry is file?"</span> <span class="o">+</span> <span class="nx">fileEntry</span><span class="p">.</span><span class="nx">isFile</span><span class="p">.</span><span class="nx">toString</span><span class="p">());</span> + <span class="c1">// fileEntry.name == 'someFile.txt'</span> + <span class="c1">// fileEntry.fullPath == '/someFile.txt'</span> + <span class="nx">writeFile</span><span class="p">(</span><span class="nx">fileEntry</span><span class="p">,</span> <span class="kc">null</span><span class="p">);</span> + + <span class="p">},</span> <span class="nx">onErrorCreateFile</span><span class="p">);</span> + +<span class="p">},</span> <span class="nx">onErrorLoadFs</span><span class="p">);</span> +</code></pre></div> +<p>The success callback receives FileSystem object (fs). Use <code>fs.root</code> to return a DirectoryEntry object, which you can use to create or get a file (by calling <code>getFile</code>). In this example, <code>fs.root</code> is a DirectoryEntry object that represents the persistent storage in the sandboxed file system.</p> + +<p>The success callback for <code>getFile</code> receives a FileEntry object. You can use this to perform file write and file read operations.</p> + +<h2>Create a temporary file</h2> + +<p>Here is an example of a request for temporary storage. Temporary storage may be deleted by the operating system if the device runs low on memory.</p> +<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nb">window</span><span class="p">.</span><span class="nx">requestFileSystem</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">TEMPORARY</span><span class="p">,</span> <span class="mi">5</span> <span class="o">*</span> <span class="mi">1024</span> <span class="o">*</span> <span class="mi">1024</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">fs</span><span class="p">)</span> <span class="p">{</span> + + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'file system open: '</span> <span class="o">+</span> <span class="nx">fs</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span> + <span class="nx">createFile</span><span class="p">(</span><span class="nx">fs</span><span class="p">.</span><span class="nx">root</span><span class="p">,</span> <span class="s2">"newTempFile.txt"</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span> + +<span class="p">},</span> <span class="nx">onErrorLoadFs</span><span class="p">);</span> +</code></pre></div> +<p>When you are using temporary storage, you can create or get the file by calling <code>getFile</code>. As in the persistent storage example, this will give you a FileEntry object that you can use for read or write operations.</p> +<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">createFile</span><span class="p">(</span><span class="nx">dirEntry</span><span class="p">,</span> <span class="nx">fileName</span><span class="p">,</span> <span class="nx">isAppend</span><span class="p">)</span> <span class="p">{</span> + <span class="c1">// Creates a new file or returns the file if it already exists.</span> + <span class="nx">dirEntry</span><span class="p">.</span><span class="nx">getFile</span><span class="p">(</span><span class="nx">fileName</span><span class="p">,</span> <span class="p">{</span><span class="na">create</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="na">exclusive</span><span class="p">:</span> <span class="kc">false</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">fileEntry</span><span class="p">)</span> <span class="p">{</span> + + <span class="nx">writeFile</span><span class="p">(</span><span class="nx">fileEntry</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="nx">isAppend</span><span class="p">);</span> + + <span class="p">},</span> <span class="nx">onErrorCreateFile</span><span class="p">);</span> + +<span class="p">}</span> +</code></pre></div> +<h2>Write to a file <a name="writeFile"></a></h2> + +<p>Once you have a FileEntry object, you can write to the file by calling <code>createWriter</code>, which returns a FileWriter object in the success callback. Call the <code>write</code> method of FileWriter to write to the file.</p> +<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">writeFile</span><span class="p">(</span><span class="nx">fileEntry</span><span class="p">,</span> <span class="nx">dataObj</span><span class="p">)</span> <span class="p">{</span> + <span class="c1">// Create a FileWriter object for our FileEntry (log.txt).</span> + <span class="nx">fileEntry</span><span class="p">.</span><span class="nx">createWriter</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">fileWriter</span><span class="p">)</span> <span class="p">{</span> + + <span class="nx">fileWriter</span><span class="p">.</span><span class="nx">onwriteend</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Successful file write..."</span><span class="p">);</span> + <span class="nx">readFile</span><span class="p">(</span><span class="nx">fileEntry</span><span class="p">);</span> + <span class="p">};</span> + + <span class="nx">fileWriter</span><span class="p">.</span><span class="nx">onerror</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Failed file write: "</span> <span class="o">+</span> <span class="nx">e</span><span class="p">.</span><span class="nx">toString</span><span class="p">());</span> + <span class="p">};</span> + + <span class="c1">// If data object is not passed in,</span> + <span class="c1">// create a new Blob instead.</span> + <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">dataObj</span><span class="p">)</span> <span class="p">{</span> + <span class="nx">dataObj</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Blob</span><span class="p">([</span><span class="s1">'some file data'</span><span class="p">],</span> <span class="p">{</span> <span class="na">type</span><span class="p">:</span> <span class="s1">'text/plain'</span> <span class="p">});</span> + <span class="p">}</span> + + <span class="nx">fileWriter</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="nx">dataObj</span><span class="p">);</span> + <span class="p">});</span> +<span class="p">}</span> +</code></pre></div> +<h2>Read a file <a name="readFile"></a></h2> + +<p>You also need a FileEntry object to read an existing file. Use the file property of FileEntry to get the file reference, and then create a new FileReader object. You can use methods like <code>readAsText</code> to start the read operation. When the read operation is complete, <code>this.result</code> stores the result of the read operation.</p> +<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">readFile</span><span class="p">(</span><span class="nx">fileEntry</span><span class="p">)</span> <span class="p">{</span> + + <span class="nx">fileEntry</span><span class="p">.</span><span class="nx">file</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">file</span><span class="p">)</span> <span class="p">{</span> + <span class="kd">var</span> <span class="nx">reader</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">FileReader</span><span class="p">();</span> + + <span class="nx">reader</span><span class="p">.</span><span class="nx">onloadend</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Successful file read: "</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">result</span><span class="p">);</span> + <span class="nx">displayFileData</span><span class="p">(</span><span class="nx">fileEntry</span><span class="p">.</span><span class="nx">fullPath</span> <span class="o">+</span> <span class="s2">": "</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">result</span><span class="p">);</span> + <span class="p">};</span> + + <span class="nx">reader</span><span class="p">.</span><span class="nx">readAsText</span><span class="p">(</span><span class="nx">file</span><span class="p">);</span> + + <span class="p">},</span> <span class="nx">onErrorReadFile</span><span class="p">);</span> +<span class="p">}</span> +</code></pre></div> +<h2>Append a file using alternative methods <a name="appendFile"></a></h2> + +<p>Of course, you will often want to append existing files instead of creating new ones. Here is an example of that. This example shows another way that you can access the file system using window.resolveLocalFileSystemURL. In this example, pass the cross-platform Cordova file URL, cordova.file.dataDirectory, to the function. The success callback receives a DirectoryEntry object, which you can use to do things like create a file.</p> +<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nb">window</span><span class="p">.</span><span class="nx">resolveLocalFileSystemURL</span><span class="p">(</span><span class="nx">cordova</span><span class="p">.</span><span class="nx">file</span><span class="p">.</span><span class="nx">dataDirectory</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">dirEntry</span><span class="p">)</span> <span class="p">{</span> + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'file system open: '</span> <span class="o">+</span> <span class="nx">dirEntry</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span> + <span class="kd">var</span> <span class="nx">isAppend</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> + <span class="nx">createFile</span><span class="p">(</span><span class="nx">dirEntry</span><span class="p">,</span> <span class="s2">"fileToAppend.txt"</span><span class="p">,</span> <span class="nx">isAppend</span><span class="p">);</span> +<span class="p">},</span> <span class="nx">onErrorLoadFs</span><span class="p">);</span> +</code></pre></div> +<p>In addition to this usage, you can use <code>resolveLocalFileSystemURL</code> to get access to some file system locations that are not part of the sandboxed storage system. See <em>Where to store Files</em> for more information; many of these storage locations are platform-specific. You can also pass cross-platform file system locations to <code>resolveLocalFileSystemURL</code> using the <em>cdvfile protocol</em>.</p> + +<p>For the append operation, there is nothing new in the <code>createFile</code> function that is called in the preceding code (see the preceding examples for the actual code). <code>createFile</code> calls <code>writeFile</code>. In <code>writeFile</code>, you check whether an append operation is requested.</p> + +<p>Once you have a FileWriter object, call the <code>seek</code> method, and pass in the index value for the position where you want to write. In this example, you also test whether the file exists. After calling seek, then call the write method of FileWriter.</p> +<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">writeFile</span><span class="p">(</span><span class="nx">fileEntry</span><span class="p">,</span> <span class="nx">dataObj</span><span class="p">,</span> <span class="nx">isAppend</span><span class="p">)</span> <span class="p">{</span> + <span class="c1">// Create a FileWriter object for our FileEntry (log.txt).</span> + <span class="nx">fileEntry</span><span class="p">.</span><span class="nx">createWriter</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">fileWriter</span><span class="p">)</span> <span class="p">{</span> + + <span class="nx">fileWriter</span><span class="p">.</span><span class="nx">onwriteend</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Successful file read..."</span><span class="p">);</span> + <span class="nx">readFile</span><span class="p">(</span><span class="nx">fileEntry</span><span class="p">);</span> + <span class="p">};</span> + + <span class="nx">fileWriter</span><span class="p">.</span><span class="nx">onerror</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Failed file read: "</span> <span class="o">+</span> <span class="nx">e</span><span class="p">.</span><span class="nx">toString</span><span class="p">());</span> + <span class="p">};</span> + + <span class="c1">// If we are appending data to file, go to the end of the file.</span> + <span class="k">if</span> <span class="p">(</span><span class="nx">isAppend</span><span class="p">)</span> <span class="p">{</span> + <span class="k">try</span> <span class="p">{</span> + <span class="nx">fileWriter</span><span class="p">.</span><span class="nx">seek</span><span class="p">(</span><span class="nx">fileWriter</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span> + <span class="p">}</span> + <span class="k">catch</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"file doesn't exist!"</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">}</span> + <span class="nx">fileWriter</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="nx">dataObj</span><span class="p">);</span> + <span class="p">});</span> +<span class="p">}</span> +</code></pre></div> +<h2>Store an existing binary file <a name="binaryFile"></a></h2> + +<p>We already showed how to write to a file that you just created in the sandboxed file system. What if you need to get access to an existing file and convert that to something you can store on your device? In this example, you obtain a file using an xhr request, and then save it to the cache in the sandboxed file system.</p> + +<p>Before you get the file, get a FileSystem reference using <code>requestFileSystem</code>. By passing window.TEMPORARY in the method call (same as before), the returned FileSystem object (fs) represents the cache in the sandboxed file system. Use <code>fs.root</code> to get the DirectoryEntry object that you need.</p> +<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nb">window</span><span class="p">.</span><span class="nx">requestFileSystem</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">TEMPORARY</span><span class="p">,</span> <span class="mi">5</span> <span class="o">*</span> <span class="mi">1024</span> <span class="o">*</span> <span class="mi">1024</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">fs</span><span class="p">)</span> <span class="p">{</span> + + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'file system open: '</span> <span class="o">+</span> <span class="nx">fs</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span> + <span class="nx">getSampleFile</span><span class="p">(</span><span class="nx">fs</span><span class="p">.</span><span class="nx">root</span><span class="p">);</span> + +<span class="p">},</span> <span class="nx">onErrorLoadFs</span><span class="p">);</span> +</code></pre></div> +<p>For completeness, here is the xhr request to get a Blob image. There is nothing Cordova-specific in this code, except that you forward the DirectoryEntry reference that you already obtained as an argument to the saveFile function. You will save the blob image and display it later after reading the file (to validate the operation).</p> +<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">getSampleFile</span><span class="p">(</span><span class="nx">dirEntry</span><span class="p">)</span> <span class="p">{</span> + + <span class="kd">var</span> <span class="nx">xhr</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">XMLHttpRequest</span><span class="p">();</span> + <span class="nx">xhr</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="s1">'GET'</span><span class="p">,</span> <span class="s1">'http://cordova.apache.org/static/img/cordova_bot.png'</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span> + <span class="nx">xhr</span><span class="p">.</span><span class="nx">responseType</span> <span class="o">=</span> <span class="s1">'blob'</span><span class="p">;</span> + + <span class="nx">xhr</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> + <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">status</span> <span class="o">==</span> <span class="mi">200</span><span class="p">)</span> <span class="p">{</span> + + <span class="kd">var</span> <span class="nx">blob</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Blob</span><span class="p">([</span><span class="k">this</span><span class="p">.</span><span class="nx">response</span><span class="p">],</span> <span class="p">{</span> <span class="na">type</span><span class="p">:</span> <span class="s1">'image/png'</span> <span class="p">});</span> + <span class="nx">saveFile</span><span class="p">(</span><span class="nx">dirEntry</span><span class="p">,</span> <span class="nx">blob</span><span class="p">,</span> <span class="s2">"downloadedImage.png"</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">};</span> + <span class="nx">xhr</span><span class="p">.</span><span class="nx">send</span><span class="p">();</span> +<span class="p">}</span> +</code></pre></div> +<blockquote> +<p><em>Note</em> For Cordova 5 security, the preceding code requires that you add the domain name, http://cordova.apache.org, to the Content-Security-Policy <meta> element in index.html.</p> +</blockquote> + +<p>After getting the file, copy the contents to a new file. The current DirectoryEntry object is already associated with the app cache.</p> +<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">saveFile</span><span class="p">(</span><span class="nx">dirEntry</span><span class="p">,</span> <span class="nx">fileData</span><span class="p">,</span> <span class="nx">fileName</span><span class="p">)</span> <span class="p">{</span> + + <span class="nx">dirEntry</span><span class="p">.</span><span class="nx">getFile</span><span class="p">(</span><span class="nx">fileName</span><span class="p">,</span> <span class="p">{</span> <span class="na">create</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="na">exclusive</span><span class="p">:</span> <span class="kc">false</span> <span class="p">},</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">fileEntry</span><span class="p">)</span> <span class="p">{</span> + + <span class="nx">writeFile</span><span class="p">(</span><span class="nx">fileEntry</span><span class="p">,</span> <span class="nx">fileData</span><span class="p">);</span> + + <span class="p">},</span> <span class="nx">onErrorCreateFile</span><span class="p">);</span> +<span class="p">}</span> +</code></pre></div> +<p>In writeFile, you pass in the Blob object as the dataObj and you will save that in the new file.</p> +<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">writeFile</span><span class="p">(</span><span class="nx">fileEntry</span><span class="p">,</span> <span class="nx">dataObj</span><span class="p">,</span> <span class="nx">isAppend</span><span class="p">)</span> <span class="p">{</span> + + <span class="c1">// Create a FileWriter object for our FileEntry (log.txt).</span> + <span class="nx">fileEntry</span><span class="p">.</span><span class="nx">createWriter</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">fileWriter</span><span class="p">)</span> <span class="p">{</span> + + <span class="nx">fileWriter</span><span class="p">.</span><span class="nx">onwriteend</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Successful file write..."</span><span class="p">);</span> + <span class="k">if</span> <span class="p">(</span><span class="nx">dataObj</span><span class="p">.</span><span class="nx">type</span> <span class="o">==</span> <span class="s2">"image/png"</span><span class="p">)</span> <span class="p">{</span> + <span class="nx">readBinaryFile</span><span class="p">(</span><span class="nx">fileEntry</span><span class="p">);</span> + <span class="p">}</span> + <span class="k">else</span> <span class="p">{</span> + <span class="nx">readFile</span><span class="p">(</span><span class="nx">fileEntry</span><span class="p">);</span> + <span class="p">}</span> + <span class="p">};</span> + + <span class="nx">fileWriter</span><span class="p">.</span><span class="nx">onerror</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Failed file write: "</span> <span class="o">+</span> <span class="nx">e</span><span class="p">.</span><span class="nx">toString</span><span class="p">());</span> + <span class="p">};</span> + + <span class="nx">fileWriter</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="nx">dataObj</span><span class="p">);</span> + <span class="p">});</span> +<span class="p">}</span> +</code></pre></div> +<p>After writing to the file, read it and display it. You saved the image as binary data, so you can read it using FileReader.readAsArrayBuffer.</p> +<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">readBinaryFile</span><span class="p">(</span><span class="nx">fileEntry</span><span class="p">)</span> <span class="p">{</span> + + <span class="nx">fileEntry</span><span class="p">.</span><span class="nx">file</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">file</span><span class="p">)</span> <span class="p">{</span> + <span class="kd">var</span> <span class="nx">reader</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">FileReader</span><span class="p">();</span> + + <span class="nx">reader</span><span class="p">.</span><span class="nx">onloadend</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> + + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Successful file write: "</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">result</span><span class="p">);</span> + <span class="nx">displayFileData</span><span class="p">(</span><span class="nx">fileEntry</span><span class="p">.</span><span class="nx">fullPath</span> <span class="o">+</span> <span class="s2">": "</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">result</span><span class="p">);</span> + + <span class="kd">var</span> <span class="nx">blob</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Blob</span><span class="p">([</span><span class="k">new</span> <span class="nx">Uint8Array</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">result</span><span class="p">)],</span> <span class="p">{</span> <span class="na">type</span><span class="p">:</span> <span class="s2">"image/png"</span> <span class="p">});</span> + <span class="nx">displayImage</span><span class="p">(</span><span class="nx">blob</span><span class="p">);</span> + <span class="p">};</span> + + <span class="nx">reader</span><span class="p">.</span><span class="nx">readAsArrayBuffer</span><span class="p">(</span><span class="nx">file</span><span class="p">);</span> + + <span class="p">},</span> <span class="nx">onErrorReadFile</span><span class="p">);</span> +<span class="p">}</span> +</code></pre></div> +<p>After reading the data, you can display the image using code like this. Use window.URL.createObjectURL to get a DOM string for the Blob image.</p> +<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">displayImage</span><span class="p">(</span><span class="nx">blob</span><span class="p">)</span> <span class="p">{</span> + + <span class="c1">// Displays image if result is a valid DOM string for an image.</span> + <span class="kd">var</span> <span class="nx">elem</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'imageFile'</span><span class="p">);</span> + <span class="c1">// Note: Use window.URL.revokeObjectURL when finished with image.</span> + <span class="nx">elem</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">URL</span><span class="p">.</span><span class="nx">createObjectURL</span><span class="p">(</span><span class="nx">blob</span><span class="p">);</span> +<span class="p">}</span> +</code></pre></div> +<h2>Display an image file <a name="displayImage"></a></h2> + +<p>To display an image using a FileEntry, you can call the <code>toURL</code> method.</p> +<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">displayImageByFileURL</span><span class="p">(</span><span class="nx">fileEntry</span><span class="p">)</span> <span class="p">{</span> + <span class="kd">var</span> <span class="nx">elem</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'imageFile'</span><span class="p">);</span> + <span class="nx">elem</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="nx">fileEntry</span><span class="p">.</span><span class="nx">toURL</span><span class="p">();</span> +<span class="p">}</span> +</code></pre></div> +<p>If you are using some platform-specific URIs instead of a FileEntry and you want to display an image, you may need to include the main part of the URI in the Content-Security-Policy <meta> element in index.html. For example, on Windows 10, you can include <code>ms-appdata:</code> in your <meta> element. Here is an example.</p> +<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Security-Policy"</span> <span class="na">content=</span><span class="s">"default-src 'self' data: gap: ms-appdata: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"</span><span class="nt">></span> +</code></pre></div> +<h2>Create Directories <a name="createDir"></a></h2> + +<p>In the code here, you create directories in the root of the app storage location. You could use this code with any writable storage location (that is, any DirectoryEntry). Here, you write to the application cache (assuming that you used window.TEMPORARY to get your FileSystem object) by passing fs.root into this function.</p> + +<p>This code creates the /NewDirInRoot/images folder in the application cache. For platform-specific values, look at <em>File System Layouts</em>.</p> +<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">createDirectory</span><span class="p">(</span><span class="nx">rootDirEntry</span><span class="p">)</span> <span class="p">{</span> + <span class="nx">rootDirEntry</span><span class="p">.</span><span class="nx">getDirectory</span><span class="p">(</span><span class="s1">'NewDirInRoot'</span><span class="p">,</span> <span class="p">{</span> <span class="na">create</span><span class="p">:</span> <span class="kc">true</span> <span class="p">},</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">dirEntry</span><span class="p">)</span> <span class="p">{</span> + <span class="nx">dirEntry</span><span class="p">.</span><span class="nx">getDirectory</span><span class="p">(</span><span class="s1">'images'</span><span class="p">,</span> <span class="p">{</span> <span class="na">create</span><span class="p">:</span> <span class="kc">true</span> <span class="p">},</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">subDirEntry</span><span class="p">)</span> <span class="p">{</span> + + <span class="nx">createFile</span><span class="p">(</span><span class="nx">subDirEntry</span><span class="p">,</span> <span class="s2">"fileInNewSubDir.txt"</span><span class="p">);</span> + + <span class="p">},</span> <span class="nx">onErrorGetDir</span><span class="p">);</span> + <span class="p">},</span> <span class="nx">onErrorGetDir</span><span class="p">);</span> +<span class="p">}</span> +</code></pre></div> +<p>When creating subfolders, you need to create each folder separately as shown in the preceding code.</p> + </div> </div>
--------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@cordova.apache.org For additional commands, e-mail: commits-h...@cordova.apache.org
![https://travis-ci.org/apache/cordova-plugin-file.svg?branch=master"](https://travis-ci.org/apache/cordova-plugin-file.svg?branch=master"){kind=link}
