nfp_sites/app/widgets/fileupload.js

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)
  },

  oninit: function(vnode) {
    this.loading = false
    this.preview = null
  },

  view: function(vnode) {
    let media = vnode.attrs.media

    return m('fileupload', {
      class: vnode.attrs.class || null,
    }, [
      this.preview || media
        ? vnode.attrs.useimg
          ? [ m('img', { src: this.preview && this.preview.preview || media }), m('div.showicon')]
          : m('a.display.inside', {
              href: this.preview && this.preview.preview || media,
              style: {
                'background-image': 'url("' + (this.preview && this.preview.preview || media) + '")',
              },
            }, m('div.showicon'))
        : m('div.inside.showbordericon')
      ,
      m('input', {
        accept: 'image/*',
        type: 'file',
        onchange: this.fileChanged.bind(this, vnode),
      }),
      media && vnode.attrs.ondelete
        ? m('button.remove', { onclick: vnode.attrs.ondelete })
        : null,
      this.loading
        ? m('div.loading-spinner')
        : null,
    ])
  },
}

module.exports = FileUpload