Remplir les fichiers image avec ng-flow.js à partir de json

Question

j'utilise ng-flux pour télécharger des fichiers dans mon application AngularJS.Je suis capable de sauvegarder avec succès des données tout en téléchargeant plusieurs fichiers via ng-flow.Cependant, lors de l'interrogation des données et de leur obtention via JSON, je ne sais pas comment ajouter les fichiers dans l'objet ng-flow pour chaque ligne.Chaque fichier est codé en base 64 dans la chaîne JSON.

Pour clarifier, je reçois chaque puits et chaque puits a un nom, un emplacement, un permis, etc.et plusieurs images.Tous les attributs du puits sont renseignés avec succès dans le DOM, à l'exception des 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>

À l'intérieur du contrôleur AngularJS :

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;
    });

J'ai testé avec succès les données de sortie JSON base64 pour les fichiers image, même après les avoir définis comme blobs.

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

Comment charger correctement des fichiers image basés sur des blob dans un objet ng-flow pour chaque ligne ?

Answer 1

Si vous souhaitez ajouter de nouveaux fichiers au flux, utilisez la méthode existante flow.addFile(file).

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

Si vous voulez effacer flow.files, utiliser flow.cancel().

Note: flow.files n'est pas un tableau de blobs, c'est un tableau de FlowFile https://github.com/flowjs/flow.js#flowfile

Blob est accessible avec file propriété (flow.files[0].file).

Answer 2

Pour l'application My Rails, sur l'action Modifier, je voulais précharger mes images existantes.listing_images est l'objet JSON de mes images PREXISTING.Appeling AddFile appelle tous les rappels et essaie de télécharger mon fichier qui existe déjà sur le serveur.Pour ignorer le rappel et juste l'échafaudage, certains espibrons:

  $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);
    });
  };