Populating image files with ng-flow.js from json

Question

I'm using ng-flow to upload files in my AngularJS app. I'm able to successfully save data along with uploading multiple files via ng-flow. However, when querying the data and getting it via JSON, I'm not sure how to add the files into the ng-flow object for each row. Each file is base 64 encoded in the JSON string.

To clarify, I am getting each well and each well has a name, location, permit, etc. and multiple images. All of the attributes of the well are successfully populated in the DOM except for the images.

HTML:

...
<div flow-init flow-name="well.flow">
    <span class="btn" flow-btn flow-attrs="{accept:'image/*'}">Upload File</span>

    <table>
        <tr ng-repeat="file in well.flow.files">
            <td>{{ $index+1 }}</td>
            <td>{{ file.name }}</td>
            <td>{{ file.msg }}</td>
            <td><span ng-click="file.cancel()"><i class="icon-remove"></i></span></td>
        </tr>
    </table>
</div>

Inside the AngularJS controller:

wellsFactory.getData($scope.wellsParams).then(function(data){
        angular.forEach(data.wells, function(wells, wKey){

            if(wells.files){
                var list = [];
                angular.forEach(wells.files, function(files, fKey){

                    var binaryFile = atob(files.file);
                    var byteNumbers = new Array(binaryFile.length);
                    for (var i = 0; i < binaryFile.length; i++) {
                        byteNumbers[i] = binaryFile.charCodeAt(i);
                    }
                    var byteArray = new Uint8Array(byteNumbers);
                    var blob = new Blob([byteArray.buffer], {type: "image/png"});

                    list[fKey] = blob;
                });
            /* Add blob files to wells ng-flow  */
            data.wells[wKey].flow.files = list; /* breaks */
            //** How do I add ng-flow files? **//
            }
        });

        $scope.wells = data.wells;
    });

I've successfully tested the output JSON base64 data for the image files, even after setting them as blobs.

/* Test Each File (within foreach) */
...
var reader = new FileReader();
reader.onload = function(e){
    console.log(e.target.result);
};
reader.readAsDataURL(blob);
...

How do I properly load blob based image files into ng-flow object for each row?

Answer 1

If you want to add new files to flow, use existing method flow.addFile(file).

var blob = new Blob(['a'], {type: "image/png"});
blob.name = 'file.png';
flow.addFile(blob);

If you want to clear flow.files, use flow.cancel().

Note: flow.files is not array of blobs, it is array of FlowFile https://github.com/flowjs/flow.js#flowfile

Blob can be accessed with file property (flow.files[0].file).

Answer 2

For my rails app, on the edit action I wanted to preload my existing images. listing_images is the json object of my prexisting images. Calling addFile calls all the callbacks and tries to upload my file that already exists on the server. To skip the callback and just scaffold the some placeholders:

  $scope.initExistingImages = function(listing_images, flowObj) {

    Flow.prototype.addExistingFile = function (file, event) {
      var f = new Flow.FlowFile(this, file);
      this.files.push(f);
    };

    angular.forEach(listing_images, function(value, key) {
      var blob = new Blob(['pre_existing_image'], {type: value.image_content_type});
      blob.name = value.image.image_file_name;
      blob.image_url = value.image.image_url;
      blob.image_id = value.image.id;
      blob.alt_text = value.alt_text;
      blob.listing_image_id = value.id;
      flowObj.addExistingFile(blob);
    });
  };