garrettmills
2 years ago
parent
2b2e7d2ebe
commit
b8a0e957bb
18 changed files with 227 additions and 17 deletions
@ -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