Commit a2d49a0b authored by Frauke's avatar Frauke
Browse files

Added functionality for uploading files to server

parent d5016ca4
......@@ -5,6 +5,7 @@ npm-debug.log*
yarn-debug.log*
yarn-error.log*
/test/unit/coverage/
files/*
# Editor directories and files
.idea
......
This diff is collapsed.
......@@ -13,6 +13,9 @@
},
"dependencies": {
"axios": "^0.17.1",
"connect-busboy": "0.0.2",
"express": "^4.16.2",
"mime-types": "^2.1.17",
"vue": "^2.5.2",
"vue-croppa": "^1.2.0"
},
......
......@@ -22,11 +22,16 @@
<button type="submit" @click="upload">Upload</button>
<button type="reset" @click="remove">Remove image</button>
<p :class="statusMessageClass" v-if="statusMessage">{{ statusMessage }}</p>
<form method='post' id="form" @submit.prevent="submitform" action='http://localhost:3030/image' enctype="multipart/form-data">
<input type='file' name='fileUploaded'>
<input type='submit'>
</form>
</div>
</template>
<script>
const axios = require('axios')
export default {
name: 'App',
data() {
......@@ -44,6 +49,9 @@ export default {
}
},
methods: {
submitform(e) {
axios.post('http://localhost:3030/image', new FormData(e.target));
},
remove() {
this.cropWidget.remove();
},
......@@ -52,11 +60,29 @@ export default {
this.statusMessage = 'Please add a valid imagefile.'
},
upload() {
this.cropWidget.remove();
if (!this.cropWidget.hasImage()) {
this.statusMessage = 'Please add an image to upload.'
return
}
const src = this.cropWidget.img.src
const format = src.split(';')[0].split(':')[1]
this.cropWidget.promisedBlob(format, 0.8).then((blob) => {
// axios({
// url: 'http://localhost:3030/image',
// method: 'post',
// headers: { 'content-type': 'multipart/form-data' },
// data: blob
// }).then((data) => {
// console.log(data)
// }).catch((err) => console.log(err))
const data = new FormData();
data.append('file', blob);
axios.post('http://localhost:3030/image', data);
}).catch((err) => console.log(err))
}
}
}
......
const express = require('express')
const app = express()
const fileUpload = require('express-fileupload')
const busboy = require('connect-busboy')
const fs = require('fs')
const mime = require('mime-types')
app.use(busboy());
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.post('/image', function (req, res) {
req.pipe(req.busboy);
req.busboy.on('file', function(fieldname, file, filename, encoding, mimetype) {
var fstream = fs.createWriteStream('./files/' + filename + '.' + mime.extension(mimetype));
file.pipe(fstream);
fstream.on('close', function () {
res.send('upload succeeded!');
});
});
})
app.listen(3030, () => console.log('server listening on port 3030!'))
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment