garrettmills
1 year ago
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