Telecharger et afficher chaque image de l'utilisateur depuis le server

Bonjour à tous,

J'utilise depuis quelques mois le framework meteor pour une application perso et je suis bloqué depuis quelques jours sur un point dont voici le soucis :

Mes utilisateurs ont des images téléchargées sur mon server (dans le fichier de la racine de mon app .uploads/). Chaque image appartient à un utilisateur qu'il a préalablement téléchargé.

Je voudrais maintenant que quand l'utilisateur arrive sur la page de son profil afficher chaque image et les données qui sont affecté à l'image (ex: date ajout, libellé, tags...), ces dernières sont stockées dans une collection Media.

Le soucis que je rencontre c'est la synchronisation entre l'envoie de mon image depuis le server vers mon client et l'affichage des autres données.

Meteor étant asynchrone, ma nouvelle collection temporaire est renvoyé plus rapidement que le téléchargement des images. Je ne sais pas comment mettre à jour ma vue une fois les données téléchargé même en utilisant (de façon basique) Future.js.

Voici le code pour plus d'explication.

Merci d'avance à tous pour votre aide.

profil.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template name="photosList">
    {{#if currentUser}}
        {{#if Template.subscriptionsReady}}
            <ul class="list-group">
                {{#each photos}}
                    <li class="list-group-item">
                        <img src="{{mediaSrc}}">
                        <h4>{{tags}}</h4>
                        <h4>Date d'ajout : {{dateCreation}}</h4>
                    </li>
                {{/each}}
            </ul>
        {{/if}}
    {{/if}}
</template>

profil.js (client)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Template.photosList.helpers({
    photos: function () {
        userMerdias = Media.find({"idUser": Meteor.userId()});
        userMerdias.forEach(function (doc) {
            let mediaSrc =  readFromServerDirect(doc.fileName);
            userMediasLocal.insert(
                {
                    "idUser" : doc.idUser,
                    "dateCreation": doc.dateCreation,
                    "fileName": doc.fileName,
                    "tags": doc.tags,
                    "mediaSrc": mediaSrc
                }
            );
        });
        return userMediasLocal.find();
    }
});

main.js (server)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
'readImageOnServer': function(fileName) {
        var fullFilePath =  pathUploads + fileName + ".jpeg";
        var smallImage;
        var myFuture = new Future();
        fs.readFileSync(fullFilePath, function (err, bitmap) {
            if(err){
                myFuture.throw(err);
            }else{
                smallImage = "data:image/jpeg;base64," + Buffer(bitmap).toString('base64');
                myFuture.return(smallImage);
            }
 
        });
        return myFuture.wait();
    },