Populating image files with ng-flow.js from json
angularjs, base64, flow-js, javascript, json
Solution
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`).
Problem
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?