From 1f58406d9e0e4a7e2bbb4afa02d3c96b82bd0de1 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Fri, 7 Aug 2020 17:34:13 +0200
Subject: add generic file upload

---
 .../cli/app/controllers/upload_controller.py       |  4 +-
 .../app/views/media/components/media.form.js       | 11 +++-
 .../app/views/media/components/media.formFile.js   | 67 ++++++++++++++++++++++
 .../app/views/media/containers/media.index.js      | 19 ++++++
 4 files changed, 98 insertions(+), 3 deletions(-)
 create mode 100644 animism-align/frontend/app/views/media/components/media.formFile.js

(limited to 'animism-align')

diff --git a/animism-align/cli/app/controllers/upload_controller.py b/animism-align/cli/app/controllers/upload_controller.py
index e910f28..3b6e661 100644
--- a/animism-align/cli/app/controllers/upload_controller.py
+++ b/animism-align/cli/app/controllers/upload_controller.py
@@ -73,8 +73,8 @@ class UploadView(FlaskView):
     # TODO: here check sha256
     # upload = Upload.query.get(id)
 
-    if ext[1:] not in VALID_IMAGE_EXTS:
-      return jsonify({ 'status': 'error', 'error': 'Not a valid image' })
+    # if ext[1:] not in VALID_IMAGE_EXTS:
+      # return jsonify({ 'status': 'error', 'error': 'Not a valid image' })
 
     # convert string of image data to uint8
     file.seek(0)
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,
 })
-- 
cgit v1.2.3-70-g09d2