diff options
Diffstat (limited to 'animism-align/frontend/app')
3 files changed, 96 insertions, 1 deletions
diff --git a/animism-align/frontend/app/views/media/components/media.form.js b/animism-align/frontend/app/views/media/components/media.form.js index a646e8e..76d6f3e 100644 --- a/animism-align/frontend/app/views/media/components/media.form.js +++ b/animism-align/frontend/app/views/media/components/media.form.js @@ -7,6 +7,7 @@ import { TextInput, LabelDescription, Select, TextArea, Checkbox, SubmitButton, import MediaImageForm from './media.formImage' import MediaVideoForm from './media.formVideo' +import MediaFileForm from './media.formFile' const newMedia = () => ({ type: 'image', @@ -25,7 +26,7 @@ const newMedia = () => ({ }) const MEDIA_UPLOAD_TYPES = [ - 'image', 'video' + 'image', 'video', 'file', ].map(name => ({ name, label: capitalize(name) })) export default class MediaForm extends Component { @@ -172,6 +173,14 @@ export default class MediaForm extends Component { /> } + {data.type === 'file' && + <MediaFileForm + data={data} + onChange={this.handleSelect} + onSettingsChange={this.handleSettingsChange} + /> + } + <TextInput title="Author" name="author" diff --git a/animism-align/frontend/app/views/media/components/media.formFile.js b/animism-align/frontend/app/views/media/components/media.formFile.js new file mode 100644 index 0000000..d3b1ae8 --- /dev/null +++ b/animism-align/frontend/app/views/media/components/media.formFile.js @@ -0,0 +1,67 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' + +import { session } from 'app/session' +import actions from 'app/actions' +import { capitalize } from 'app/utils' + +import { TextInput, LabelDescription, Select, TextArea, Checkbox, SubmitButton, Loader, FileInputField } from 'app/common' + +export default class MediaFileForm extends Component { + state = { + img: null, + } + + 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(file) { + console.log('uploading file') + const uploadData = { + image: file, + tag: "file", + username: 'animism', + } + // uploadData['__image_filename'] = file.filename + return actions.upload.upload(uploadData).then(data => { + this.handleSettingsChange("file", data.res) + }) + } + + render() { + const { data } = this.props + console.log(data.settings) + return ( + <div className='fileForm'> + <FileInputField + title="Upload file" + mime="*/*" + onChange={this.handleUpload} + /> + {data.settings.file && + <LabelDescription> + {data.settings.file.url} + </LabelDescription> + } + </div> + ) + } +} diff --git a/animism-align/frontend/app/views/media/containers/media.index.js b/animism-align/frontend/app/views/media/containers/media.index.js index ef6e3be..7935563 100644 --- a/animism-align/frontend/app/views/media/containers/media.index.js +++ b/animism-align/frontend/app/views/media/containers/media.index.js @@ -76,6 +76,8 @@ class MediaIndex extends Component { {order.filter(id => lookup[id].type === 'image').map(id => <MediaItem key={id} data={lookup[id]} />)} <h2>Video</h2> {order.filter(id => lookup[id].type === 'video').map(id => <MediaItem key={id} data={lookup[id]} />)} + <h2>Files</h2> + {order.filter(id => lookup[id].type === 'file').map(id => <FileItem key={id} data={lookup[id]} />)} </div> </div> {order.length >= 50 && <button className='loadMore' onClick={() => this.fetch(true)}>Load More</button>} @@ -104,6 +106,23 @@ const MediaItem = ({ data }) => { ) } +const FileItem = ({ data }) => { + // console.log(data) + return ( + <div className='cell'> + <div className='meta center'> + <Link to={"/media/" + data.id + "/edit/"}> + <div> + <i>{data.title}</i><br /> + {data.settings.file.url}<br /> + </div> + </Link> + </div> + </div> + ) +} + + const mapStateToProps = state => ({ media: state.media, }) |