RNickMcCandless RNickMcCandless - 11 months ago 63
AngularJS Question

Populating image files with ng-flow.js from json

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.


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

<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>

Inside the AngularJS controller:

angular.forEach(data.wells, function(wells, wKey){

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){

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

Answer Source

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';

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).