upload

Author: MillerRen

Diff for: server/api/file/file.controller.js

@@ -3,6 +3,18 @@
 var _ = require('lodash');
 var File = require('./file.model');
 
+var mongoose = require('mongoose');
+var Grid = require('gridfs-stream');
+var multer = require('multer');
+var gfs = Grid(mongoose.connection.db, mongoose.mongo);
+var storage = require('multer-gridfs-storage')({
+      gfs:gfs,
+      metadata: function(req, file, cb){
+          cb(null, {user:req.user._id});
+      }
+  });
+var upload = multer({ storage: storage });
+
 // Get list of files
 exports.index = function(req, res) {
   File.find({'metadata.user':req.user._id})
@@ -24,15 +36,32 @@ exports.show = function(req, res) {
   });
 };
 
+// Get a single file entity
+exports.entity = function(req, res) {
+  File.findById(req.params.id, function (err, file) {
+    if(err) { return handleError(res, err); }
+    if(!file) { return res.status(404).send(''); }
+    var rs = gfs.createReadStream({
+      _id: req.params.id
+    })
+    rs.pipe(res)
+  });
+};
+
 // Creates a new file in the DB.
 exports.create = function(req, res, next) {
   console.log(req.file)
-  File.findById(req.file.id, function (err, file) {
+  upload.single('file')(req, res, function (err) {
     if (err) {
-      return handleError(err)
+      return res.status(500).json(err)
     }
-    res.json(file)
-  })
+    File.findById(req.file.id, function (err, file) {
+      if (err) {
+        return handleError(err)
+      }
+      res.json(file)
+    })
+  });
 };
 
 // Updates an existing file in the DB.

Diff for: server/api/file/index.js

@@ -3,18 +3,6 @@
 var express = require('express');
 var config = require('../../config/environment');
 
-var mongoose = require('mongoose');
-var Grid = require('gridfs-stream');
-var multer = require('multer');
-var gfs = Grid(mongoose.connection.db, mongoose.mongo);
-var storage = require('multer-gridfs-storage')({
-      gfs:gfs,
-      metadata: function(req, file, cb){
-          cb(null, {user:req.user._id});
-      }
-  });
-var upload = multer({ storage: storage });
-
 var auth = require('../../auth/auth.service');
 
 var controller = require('./file.controller');
@@ -23,9 +11,10 @@ var router = express.Router();
 
 router.get('/', auth.isAuthenticated(), controller.count, controller.index);
 router.get('/:id', auth.isAuthenticated(), controller.show);
-router.post('/', auth.isAuthenticated(), upload.single('file'), controller.create);
+router.post('/', auth.isAuthenticated(), controller.create);
 router.put('/:id', auth.isAuthenticated(), controller.update);
 router.patch('/:id', auth.isAuthenticated(), controller.update);
 router.delete('/:id', auth.isAuthenticated(), controller.destroy);
+router.get('/entity/:id', controller.entity);
 
 module.exports = router;

Diff for: src/components/Uploader/index.vue

@@ -5,19 +5,27 @@
 </template>
 <script>
 export default {
+  props: {
+    url: {
+      type: String,
+      required: true
+    }
+  },
   data () {
     return {
-      url: '/api/files'
     }
   },
   methods: {
     onChange (e) {
       var fd = new FormData()
       fd.append('file', e.target.files[0])
       this.$http.post(this.url, fd)
-      .then(() => {})
-      .catch(() => {})
-      console.log('on change', e)
+      .then((response) => {
+        this.$emit('success', response.body)
+      })
+      .catch((err) => {
+        this.$emit('error', err)
+      })
     }
   }
 }

Diff for: src/views/Account/Profile.vue

@@ -1,12 +1,29 @@
 <template>
 <div class="view-profile container">
-	<div class="col-sm-4 col-sm-offset-4">
-		<img src="../../assets/logo.png" alt="" class="img-responsive img-cycle">
-		<Uploader></Uploader>
-	</div>
+  <div class="col-sm-4 col-sm-offset-4">
+    <img :src="src" alt="" class="img-responsive img-cycle">
+    <Uploader :url="url" @success="onUploadSuccess" @error="onUploadError"></Uploader>
+  </div>
 </div>
 </template>
 
-<script></script>
+<script>
+export default {
+  data () {
+    return {
+      url: '/api/files',
+      src: require('../../assets/logo.png')
+    }
+  },
+  methods: {
+    onUploadSuccess (data) {
+      this.src = '/api/files/entity/' + data._id
+    },
+    onUploadError (err) {
+      console.log(err)
+    }
+  }
+}
+</script>
 
 <style></style>