summaryrefslogtreecommitdiff
path: root/animism-align/frontend/views/media/components/media.formImage.js
blob: d86a6d8e262f9cf5f496eaa5f5796a676eb48a36 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import React, { Component } from 'react'
import { Link } from 'react-router-dom'

import { session } from '../../../session'
import { capitalize } from '../../../util'

import { TextInput, LabelDescription, FileInputField, Select, TextArea, Checkbox, SubmitButton, Loader } from '../../../common'

import ImageSelection from './media.formImageSelection'

export default class MediaImageForm extends Component {
  state = {
  }

  constructor(props) {
    super(props)
    this.handleSelect = this.handleSelect.bind(this)
    this.handleChange = this.handleChange.bind(this)
    this.handleSettingsChange = this.handleSettingsChange.bind(this)
    this.handleUpload = this.handleUpload.bind(this)
  }

  handleChange(e) {
    const { name, value } = e.target
    this.handleSelect(name, value)
  }

  handleSelect(name, value) {
    this.props.onSelect(name, value)
  }

  handleSettingsChange(name, value) {
    this.props.onSettingsChange(name, value)
  }

  handleUpload(image) {
    // upload fullsize
    this.uploadFullSize(image)
    .then(res => {
      this.props.onSettingsChange('fullsize', data.res)
      setTimeout(() => {
      })     
    })
  }

  uploadFullSize(image) {
    actions.upload.upload({
      image,
      tag: 'fullsize',
      username: 'animism',
    }).then(data => {
      console.log(data.res)
      return data.res
    })
  }
  
  uploadThumbnail(image) {
    actions.upload.upload({
      image,
      tag: 'thumbnail',
      username: 'animism',
    }).then(data => {
      console.log(data.res)
    })
  }

  uploadCrop(image) {
    actions.upload.upload({
      image,
      tag: 'crop',
      username: 'animism',
    }).then(data => {
      console.log(data.res)
      this.props.onSelect('url', data.res.url)
    })
  }

  render() {
    const { data } = this.props
    console.log(data)
    return (
      <div className='imageForm'>
        {!data.url &&
          <FileInputField
            title='Upload image'
            onChange={this.handleUpload}
          />
        }
        {data.settings.fullsize &&
          <div>
            <ImageSelection
              url={data.settings.fullsize.url}
              crop={data.settings.crop}
            />
          </div>
        }
      </div>
    )
  }
}