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