cordova-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jasongin <...@git.apache.org>
Subject [GitHub] cordova-plugin-file pull request: adding sample section to readme
Date Thu, 07 Apr 2016 19:13:18 GMT
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


Mime
View raw message