feat: display uploaded images

examples/Calinski-Harabasz/README.md

@@ -43,7 +43,7 @@ The following are the results of running the code on MATLAB R2015b - your result
 | linkage        | 1 | \_NaN\_     |
 | kmeans         | 1 | \_NaN\_     |
 
-Each experiment also produces two scatter plots to show the clustering - one based on sepal length vs. sepal width, and the other based on petal length vs. petal width.
+Each experiment also produces two scatter plots to show the clustering - one based on sepal length vs. sepal width, and the other based on petal length vs. petal width. Note that FGLab automatically displays uploaded images, so it is possible to create the plots within MATLAB and have them displayed on the experiment page.
 
 ## Citations
 

examples/Recurrent-Attention-Model/README.md

@@ -38,6 +38,8 @@ For each glimpse, the extracted patches, `patch<x>.png`, are also extracted:
 
 ![patch1](https://raw.githubusercontent.com/Kaixhin/FGLab/master/examples/Recurrent-Attention-Model/patch1.png)
 
+These images are displayed along with the normal download link for uploaded files.
+
 ## Citations
 
 [1] Mnih, V., Heess, N., & Graves, A. (2014). Recurrent models of visual attention. In *Advances in Neural Information Processing Systems* (pp. 2204-2212).

index.js

@@ -350,7 +350,7 @@ app.put("/api/experiments/:id/files", upload.array("_files"), function(req, res,
         gfs.write(fileObj.buffer, true)
         .then(function(gfs) {
           // Save file reference
-          filesP[i] = db.experiments.updateByIdAsync(req.params.id, {$push: {_files: {_id: gfs.fileId, filename: gfs.filename}}});
+          filesP[i] = db.experiments.updateByIdAsync(req.params.id, {$push: {_files: {_id: gfs.fileId, filename: gfs.filename, mimetype: gfs.contentType}}});
         })
         .catch(function(err) {
           console.log(err);

views/experiment.jade

@@ -95,7 +95,11 @@ block scripts
       // Add files
       var $files = $("#files");
       for (var i = 0; i < experiment._files.length; i++) {
-        $files.append("<li><a href='/files/'" + experiment._files[i]._id + "'>" + experiment._files[i].filename + "</a></li>");
+        var file = experiment._files[i];
+        if (file.mimetype.indexOf("image/") === 0) {
+          $files.append("<li><img src='/files/" + file._id + "' class='img-responsive'></li>");
+        }
+        $files.append("<li><a href='/files/" + file._id + "'>" + file.filename + "</a></li>");
       }
 
       if (experiment._charts) {