const FileUpload = { fileChanged: function(vnode, event) { if (!event.target.files[0]) return let preview = null if (event.target.files[0].type.startsWith('image')) { preview = URL.createObjectURL(event.target.files[0]) } if (this.preview) { this.preview.clear() } let out = { file: event.target.files[0], preview: preview, clear: function() { URL.revokeObjectURL(preview) } } this.preview = out vnode.attrs.onfile(out) }, fileRemoved: function(vnode) { if (this.preview) { this.preview.clear() this.preview = null vnode.attrs.onfile(null) } if (vnode.attrs.media) { vnode.attrs.ondelete(vnode.attrs.media) } }, oninit: function(vnode) { this.loading = false this.preview = null }, view: function(vnode) { let imageLink = this.preview && this.preview.preview || vnode.attrs.media return m('fileupload', { class: (vnode.attrs.class || '') + ' ' + (!imageLink ? 'empty' : '') + ' ' + (vnode.attrs.useimg ? 'useimg' : ''), }, [ imageLink && vnode.attrs.useimg ? m('img', { src: imageLink }) : null, imageLink && !vnode.attrs.useimg ? m('a', { href: imageLink, style: { 'background-image': 'url("' + (imageLink) + '")', 'height': vnode.attrs.height + 'px' }, }) : null , !imageLink ? [ m('div.noimage', { style: { 'padding-top': vnode.attrs.useimg ? '56.25%' : null, 'height': !vnode.attrs.useimg ? vnode.attrs.height + 'px' : null, }, }), m('div.text', vnode.children) ] : null, m('input', { accept: 'image/*', type: 'file', onchange: this.fileChanged.bind(this, vnode), }), imageLink && vnode.attrs.ondelete ? m('button.remove', { onclick: this.fileRemoved.bind(this, vnode), title: 'Remove image' }, m.trust('')) : null, /*this.loading ? m('div.loading-spinner') : null,*/ ]) }, } module.exports = FileUpload