garrettmills
4 years ago
parent
2b2e7d2ebe
commit
b8a0e957bb
@ -0,0 +1,60 @@
|
||||
import { Component } from '../../../../lib/vues6/vues6.js'
|
||||
|
||||
const template = `
|
||||
<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" ref="modal">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content" v-if="ready">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Change Profile Photo</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<input type="file" name="image" ref="input" required>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="do_upload"
|
||||
>Change</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
||||
export default class ProfilePhotoUploaderComponent extends Component {
|
||||
static get selector() { return 'coreid-profile-photo-uploader' }
|
||||
static get template() { return template }
|
||||
static get params() { return [] }
|
||||
|
||||
ready = false
|
||||
|
||||
show() {
|
||||
this.ready = true
|
||||
this.$nextTick(() => {
|
||||
$(this.$refs.modal).modal()
|
||||
})
|
||||
}
|
||||
|
||||
close() {
|
||||
$(this.$refs.modal).modal('hide')
|
||||
}
|
||||
|
||||
async do_upload() {
|
||||
if ( this.$refs.input.files.length < 1 ) return
|
||||
const data = new FormData()
|
||||
data.append('photo', this.$refs.input.files[0])
|
||||
try {
|
||||
await axios.post(`/api/v1/profile/me/photo`, data, { // TODO support passed-in user_id
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
}
|
||||
})
|
||||
this.$emit('upload')
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
Stock profile photo thanks to: https://www.flaticon.com/authors/vitaly-gorbachev
|
||||
|
After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 49 KiB |
@ -0,0 +1,12 @@
|
||||
const Middleware = require('flitter-upload/middleware/UploadFile')
|
||||
|
||||
/*
|
||||
* Middleware to upload the files included in the request
|
||||
* to the default file store backend. Stores instances of
|
||||
* the "upload::File" model in "request.uploads".
|
||||
*/
|
||||
class UploadFile extends Middleware {
|
||||
|
||||
}
|
||||
|
||||
module.exports = exports = UploadFile
|
||||
@ -0,0 +1,33 @@
|
||||
/*
|
||||
* flitter-upload configuration
|
||||
* ---------------------------------------------------------------
|
||||
* Specifies the configuration for various uploader aspects. Mainly,
|
||||
* contains the configuration for the different file upload backends.
|
||||
*/
|
||||
const upload_config = {
|
||||
/*
|
||||
* The name of the upload backend to use by default.
|
||||
*/
|
||||
default_store: 'flitter',
|
||||
|
||||
/*
|
||||
* Stores available to the uploader.
|
||||
*/
|
||||
stores: {
|
||||
|
||||
/*
|
||||
* Example of the basic, filesystem-backed uploader.
|
||||
* The name of the store is arbitrary. Here, it's called 'flitter'.
|
||||
*/
|
||||
flitter: {
|
||||
// This is a filesystem backed 'FlitterStore'
|
||||
type: 'FlitterStore',
|
||||
|
||||
// Destination for uploaded files. Will be relative to the root
|
||||
// path of the application.
|
||||
destination: './uploads',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
module.exports = exports = upload_config
|
||||
Loading…
Reference in new issue