nfp_sites/nfp_moe/app/widgets/fileupload.js

65 lines
1.5 KiB
JavaScript
Raw Normal View History

2019-02-22 14:53:43 +00:00
const FileUpload = {
2022-07-20 00:33:06 +00:00
fileChanged: function(vnode, event) {
2019-02-22 14:53:43 +00:00
if (!event.target.files[0]) return
2022-07-20 00:33:06 +00:00
let preview = null
if (event.target.files[0].type.startsWith('image')) {
preview = URL.createObjectURL(event.target.files[0])
}
if (this.preview) {
this.preview.clear()
}
2019-02-20 16:10:37 +00:00
2022-07-20 00:33:06 +00:00
let out = {
file: event.target.files[0],
preview: preview,
clear: function() {
URL.revokeObjectURL(preview)
}
2019-09-13 13:33:10 +00:00
}
2022-07-20 00:33:06 +00:00
this.preview = out
vnode.attrs.onfile(out)
2019-09-13 13:33:10 +00:00
},
2019-02-20 16:10:37 +00:00
oninit: function(vnode) {
2022-07-20 00:33:06 +00:00
this.loading = false
this.preview = null
2019-02-20 16:10:37 +00:00
},
view: function(vnode) {
2019-09-13 13:33:10 +00:00
let media = vnode.attrs.media
2019-02-20 16:10:37 +00:00
2019-09-13 13:33:10 +00:00
return m('fileupload', {
class: vnode.attrs.class || null,
}, [
2022-07-20 00:33:06 +00:00
this.preview || media
2019-09-13 13:33:10 +00:00
? vnode.attrs.useimg
2022-07-26 02:55:37 +00:00
? [ m('img', { src: this.preview && this.preview.preview || media }), m('div.showicon')]
2019-09-13 13:33:10 +00:00
: m('a.display.inside', {
2022-07-26 02:55:37 +00:00
href: this.preview && this.preview.preview || media,
2019-09-13 13:33:10 +00:00
style: {
2022-07-26 02:55:37 +00:00
'background-image': 'url("' + (this.preview && this.preview.preview || media) + '")',
2019-09-13 13:33:10 +00:00
},
}, m('div.showicon'))
: m('div.inside.showbordericon')
2022-07-20 00:33:06 +00:00
,
2019-02-22 14:53:43 +00:00
m('input', {
accept: 'image/*',
type: 'file',
2022-07-20 00:33:06 +00:00
onchange: this.fileChanged.bind(this, vnode),
2019-02-22 14:53:43 +00:00
}),
2022-07-20 00:33:06 +00:00
media && vnode.attrs.ondelete
? m('button.remove', { onclick: vnode.attrs.ondelete })
: null,
this.loading
? m('div.loading-spinner')
: null,
2019-02-20 16:10:37 +00:00
])
2019-09-14 19:03:38 +00:00
},
2019-02-20 16:10:37 +00:00
}
2019-02-22 14:53:43 +00:00
module.exports = FileUpload