uploading galleries

4 files changed, 116 insertions, 49 deletions

diff --git a/animism-align/frontend/app/common/form.component.js b/animism-align/frontend/app/common/form.component.js
index bbdf26d..d427afe 100644
--- a/animism-align/frontend/app/common/form.component.js
+++ b/animism-align/frontend/app/common/form.component.js
@@ -185,9 +185,11 @@ export class FileInput extends Component {
     const files = e.dataTransfer ? e.dataTransfer.files : e.target.files
     let i
     let file, selectedFiles = []
+    mime = mime.replace(/\*/g, '.+')
+    mime = new RegExp(mime)
     for (i = 0; i < files.length; i++) {
       file = files[i]
-      if (file && file.type.indexOf(mime) === 0) {
+      if (file && file.type.match(mime)) {
         if (multiple) {
           selectedFiles.push(file)
         } else {
diff --git a/animism-align/frontend/app/utils/annotation.utils.js b/animism-align/frontend/app/utils/annotation.utils.js
index 6b47f36..6dab36d 100644
--- a/animism-align/frontend/app/utils/annotation.utils.js
+++ b/animism-align/frontend/app/utils/annotation.utils.js
@@ -17,9 +17,14 @@ export const annotationFadeTimings = annotation => {
 }
 
 export const thumbnailURL = media => {
+  console.log(media)
   switch (media.type) {
     case 'video': return media.settings.video.thumbnail_url
     case 'image': return media.settings.thumbnail.url
+    case 'gallery':
+      if (!media.settings.image_order || !media.settings.image_order.length) return null
+      const image_id = media.settings.image_order[0]
+      return media.settings.thumbnail_lookup[image_id].url
     default:      return null
   }
 }
diff --git a/animism-align/frontend/app/views/media/components/media.formGallery.js b/animism-align/frontend/app/views/media/components/media.formGallery.js
index f5a0bf3..e5311cb 100644
--- a/animism-align/frontend/app/views/media/components/media.formGallery.js
+++ b/animism-align/frontend/app/views/media/components/media.formGallery.js
@@ -16,7 +16,7 @@ const THUMBNAIL_QUALITY = 80
 
 export default class MediaGalleryForm extends Component {
   state = {
-    img: null,
+    loading: false,
   }
 
   constructor(props) {
@@ -25,8 +25,7 @@ export default class MediaGalleryForm extends Component {
     this.handleChange = this.handleChange.bind(this)
     this.handleSettingsChange = this.handleSettingsChange.bind(this)
     this.handleUpload = this.handleUpload.bind(this)
-    this.replaceTaggedSize = this.replaceTaggedSize.bind(this)
-    this.uploadTaggedSize = this.uploadTaggedSize.bind(this)
+    this.uploadSize = this.uploadSize.bind(this)
   }
 
   handleChange(e) {
@@ -43,41 +42,79 @@ export default class MediaGalleryForm extends Component {
   }
 
   handleUpload(files) {
-    // this.uploadThumbnail(img)
-  }
-
-  uploadThumbnail(img) {
-    const { fn } = this.props.data.settings.fullsize
-    const thumbnailCanvas = renderThumbnail(img, { maxSide: THUMBNAIL_SIZE })
-    thumbnailCanvas.toBlob(thumbnail => {
-      this.replaceTaggedSize(thumbnail, 'thumbnail', fn).then(data => {
-        this.props.onSettingsChange('multiple', {
-          thumbnail: data,
+    const { data } = this.props
+    this.setState({ loading: true })
+    // first, upload all the fullsize files
+    let fullsizeUploadPromises = files.map(file => {
+      return this.uploadSize(file, 'fullsize')
+    })
+    // when these are done
+    Promise.all(fullsizeUploadPromises)
+    .then(results => {
+      // get the added IDs in order 
+      const added_image_order = results.map(result => result.id)
+      // append the new IDs to the image order
+      const new_image_order = (data.settings.image_order || []).concat(added_image_order)
+      // add the images to the lookup
+      const image_lookup = results.reduce((a,b) => {
+        a[b.id] = b
+        return a
+      }, (data.settings.image_lookup || {}))
+      // add these images to the settings object
+      this.handleSettingsChange('multiple', {
+        image_order: new_image_order,
+        image_lookup: image_lookup,
+        thumbnail_lookup: data.settings.thumbnail_lookup || {},
+      })
+      // construct thumbnails and upload these
+      const thumbnailUploadPromises = files.map(file => {
+        return this.uploadThumbnail(file)
+      })
+      // once the thumbnails are done uploading
+      Promise.all(thumbnailUploadPromises)
+      .then(thumbnail_results => {
+        // add them to the thumbnail lookup, keyed off the ID of the fullsize image
+        const thumbnail_lookup = thumbnail_results.reduce((a, b, i) => {
+          const id = added_image_order[i]
+          a[id] = b
+          return a
+        }, (data.settings.thumbnail_lookup || {}))
+        // update the settings object
+        this.handleSettingsChange('multiple', {
+          thumbnail_lookup: thumbnail_lookup,
         })
+        this.setState({ loading: false })
       })
-    }, 'image/jpeg', THUMBNAIL_QUALITY)
+    })
   }
 
-  replaceTaggedSize(image, tag, fn) {
-    // when we upload an image, if the image already exists in this "position"
-    // on the record, we should also delete it
-    if (this.props.data.settings[tag] && this.props.data.settings[tag].id) {
-      return new Promise((resolve, reject) => {
-        actions.upload.destroy(this.props.data.settings[tag])
-        .then(() => {
-          console.log('destroy successful')
-          this.uploadTaggedSize(image, tag, fn).then(data => resolve(data))
-        })
-        .catch(() => {
-          console.log('error deleting the image')
-          this.uploadTaggedSize(image, tag, fn).then(data => resolve(data))
-        })
-      })
-    }
-    return this.uploadTaggedSize(image, tag, fn)
+  uploadThumbnail(file) {
+    return new Promise((resolve, reject) => {
+      const type = (file.name.match('.png') !== -1) ? 'image/png' : 'image/jpg'
+      const fr = new FileReader()
+      fr.onload = fileReaderEvent => {
+        fr.onload = null
+        const image = new Image()
+        image.onload = () => {
+          image.onload = null
+          const thumbnailCanvas = renderThumbnail(image, { maxSide: THUMBNAIL_SIZE })
+          thumbnailCanvas.toBlob(thumbnail => {
+            this.uploadSize(thumbnail, 'thumbnail', file.name)
+            .then(res => {
+              resolve(res)
+            })
+            .catch(err => {
+              reject(err)
+            })
+          }, type, THUMBNAIL_QUALITY)
+        }
+        image.src = fileReaderEvent.target.result
+      }
+      fr.readAsDataURL(file)
+    })
   }
 
-  uploadTaggedSize(image, tag, fn) {
+  uploadSize(image, tag, fn) {
     console.log('uploading size', tag)
     const uploadData = {
       image,
@@ -95,7 +132,11 @@ export default class MediaGalleryForm extends Component {
   }
 
   handleOrderChanged(image_order) {
-    this.handleSettingsChange('image_order', image_order)
+    console.log(image_order)
+    // if (image_order !== this.props.data.settings.image_order) {
+      // console.log('handle order chagned', image_order)
+      // this.handleSettingsChange('image_order', image_order)
+    // }
   }
 
   render() {
@@ -110,26 +151,38 @@ export default class MediaGalleryForm extends Component {
           mime="*/*"
           onChange={this.handleUpload}
         />
-        <ReactSortable
-          list={image_order || []}
-          setList={new_order => this.handleOrderChanged(new_order)}
-        >
-          {(image_order || []).map(image_id => {
-            <GalleryImageForm
-              id={image_id}
-              key={image_id}
-              image={image_lookup[image_id]}
-              thumbnail={image_lookup[image_id]}
-            />
-          })}
-        </ReactSortable>
+        {this.state.loading && <Loader />}
+        {image_order && image_order.length &&
+          <ReactSortable
+            list={image_order.map(id => ({ id }))}
+            setList={new_order => this.handleOrderChanged(new_order)}
+          >
+            {image_order.map(image_id => (
+              <GalleryImageForm
+                id={image_id}
+                key={image_id}
+                image={image_lookup[image_id]}
+                thumbnail={thumbnail_lookup[image_id]}
+              />
+            ))}
+          </ReactSortable>
+        }
       </div>
     )
   }
 }
 
-const GalleryImageForm =({ id, key, image, thumbnail }) => {
+const GalleryImageForm = ({ id, key, image, thumbnail }) => {
+  console.log(image, thumbnail)
   return (
-    <div />
+    <div>
+      {thumbnail
+        ? <img src={thumbnail.url} />
+        : <Loader />
+      }
+    </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 2b80362..34845d8 100644
--- a/animism-align/frontend/app/views/media/containers/media.index.js
+++ b/animism-align/frontend/app/views/media/containers/media.index.js
@@ -113,9 +113,16 @@ const GalleryItem = ({ data }) => {
   return (
     <div className='cell'>
       <div className='meta center'>
+        <div className='img'>
+          <Link to={"/media/" + data.id + "/edit/"}>
+            <img src={thumbnailURL(data)} alt={data.title} />
+          </Link>
+        </div>
         <Link to={"/media/" + data.id + "/edit/"}>
           <div>
             <i>{data.title}</i><br />
+            {data.author}<br />
+            {data.date}
           </div>
         </Link>
       </div>