Mailing-List: contact dev-help@cordova.apache.org; run by ezmlm
Precedence: bulk
Reply-To: dev@cordova.apache.org
From: jasongin <git@git.apache.org>
To: dev@cordova.apache.org
Reply-To: dev@cordova.apache.org
References: <git-pr-176-cordova-plugin-file@git.apache.org>
In-Reply-To: <git-pr-176-cordova-plugin-file@git.apache.org>
Subject: [GitHub] cordova-plugin-file pull request: adding sample section to
 readme
Content-Type: text/plain
Message-Id: <20160407191318.C2CDDDFDEC@git1-us-west.apache.org>
Date: Thu,  7 Apr 2016 19:13:18 +0000 (UTC)

Github user jasongin commented on a diff in the pull request:

    https://github.com/apache/cordova-plugin-file/pull/176#discussion_r58928337
  
    --- Diff: README.md ---
    @@ -671,89 +718,111 @@ window.requestFileSystem(window.TEMPORARY, 5 * 1024 * 1024, function (fs) {
     }, onErrorLoadFs);
     ```
     
    -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 image as a DOM string URL and display it later after reading the file (to validate the operation).
    +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).
     
    -```
    +```js
     function getSampleFile(dirEntry) {
     
         var xhr = new XMLHttpRequest();
         xhr.open('GET', 'http://cordova.apache.org/static/img/cordova_bot.png', true);
         xhr.responseType = 'blob';
     
    -    xhr.onload = function (e) {
    +    xhr.onload = function() {
             if (this.status == 200) {
     
                 var blob = new Blob([this.response], { type: 'image/png' });
    -            var img = new Image();
    -            // Note: Use window.URL.revokeObjectURL when finished with image.
    -            img.src = window.URL.createObjectURL(blob);
    -
    -            saveFile(dirEntry, img.src, "downloadedImage.png");
    +            saveFile(dirEntry, blob, "downloadedImage.png");
             }
         };
         xhr.send();
     }
     ```
     >*Note* 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.
     
    -After getting the file, copy the contents to a new file. The current DirectoryEntry object is already associated the app cache.
    +After getting the file, copy the contents to a new file. The current DirectoryEntry object is already associated with the app cache.
     
    -```
    -function saveFile(dirEntry, srcImage, fileName) {
    +```js
    +function saveFile(dirEntry, fileData, fileName) {
     
         dirEntry.getFile(fileName, { create: true, exclusive: false }, function (fileEntry) {
     
    -        writeFile(fileEntry, srcImage);
    +        writeFile(fileEntry, fileData);
     
         }, onErrorCreateFile);
     }
     ```
     
    -In writeFile, you pass in the DOM string URL as the dataObj and you will save that in the new file.
    +In writeFile, you pass in the Blob object as the dataObj and you will save that in the new file.
    +
    +```js
    +function writeFile(fileEntry, dataObj, isAppend) {
     
    -```
    -function writeFile(fileEntry, dataObj) {
         // Create a FileWriter object for our FileEntry (log.txt).
         fileEntry.createWriter(function (fileWriter) {
     
    -        fileWriter.onwriteend = function (e) {
    +        fileWriter.onwriteend = function() {
                 console.log("Successful file write...");
    -            readFile(fileEntry);
    +            if (dataObj.type == "image/png") {
    +                readBinaryFile(fileEntry);
    +            }
    +            else {
    +                readFile(fileEntry);
    +            }
             };
     
    -        fileWriter.onerror = function (e) {
    +        fileWriter.onerror = function() {
                 console.log("Failed file write: " + e.toString());
             };
     
    -        // If data object is not passed in,
    -        // create a new Blob instead.
    -        if (!dataObj) {
    -            dataObj = new Blob(['some file data'], { type: 'text/plain' });
    -        }
    -
             fileWriter.write(dataObj);
         });
     }
     ```
     
    -After writing to the file, read it and display it. These operations re-use the code that we showed you already in previous tasks, so theres nothing new there (see the previous sections). After reading the data, you can display the image using code like this.
    +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.
    +
    +```js
    +function readBinaryFile(fileEntry) {
    +
    +    fileEntry.file(function (file) {
    +        var reader = new FileReader();
    +
    +        reader.onloadend = function() {
     
    +            console.log("Successful file write: " + this.result);
    +            displayFileData(fileEntry.fullPath + ": " + this.result);
    +
    +            var blob = new Blob([new Uint8Array(this.result)], { type: "image/png" });
    +            displayImage(blob);
    +        };
    +
    +        reader.readAsArrayBuffer(file);
    +
    +    }, onErrorReadFile);
    +}
     ```
    -function displayImageData(fileData) {
     
    +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.
    +
    +```js
    +function displayImage(blob) {
    +
    +    var img = new Image();
    +    // Note: Use window.URL.revokeObjectURL when finished with image.
    +    img.src = window.URL.createObjectURL(blob);
    --- End diff --
    
    I don't think you need to create this extra Image object. You can assign the result of createObjectURL(blob) directly to elem.src.


---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@cordova.apache.org
For additional commands, e-mail: dev-help@cordova.apache.org