Merge drag-and-drop image upload commits

mickaobrien · mickaobrien · commit f32b6d70ac95 · 2019-10-29T15:18:12.000Z
diff --git a/curate/models.py b/curate/models.py
@@ -403,7 +403,6 @@ def make_thumbnail(self):
             return False
 
         image.thumbnail(settings.THUMB_SIZE, Image.ANTIALIAS)
-        fh.close()
 
         # Path to save to, name, and extension
         thumb_name, thumb_extension = os.path.splitext(self.image.name)
@@ -426,6 +425,8 @@ def make_thumbnail(self):
         image.save(temp_thumb, FTYPE)
         temp_thumb.seek(0)
 
+        fh.close()
+
         # Load a ContentFile into the thumbnail field so it gets saved
         self.thumbnail.save(thumb_filename, ContentFile(temp_thumb.read()), save=False)
         temp_thumb.close()
diff --git a/curate/views_api.py b/curate/views_api.py
@@ -512,18 +512,25 @@ class ImageUploadView(APIView):
     def put(self, request, **kwargs):
         if 'file' not in request.data:
             raise ParseError("Empty content")
-        f = request.data['file']
-        article = get_object_or_404(Article, id=self.kwargs['article_pk'])
-
-        try:
-            img = Image.open(f)
-            img.verify()
-        except:
-            raise ParseError("File is not in a supported image format")
-        kf = KeyFigure()
-        kf.article = article
-        kf.image.save(f.name, f, save=True)
-        serializer=KeyFigureSerializer(instance=kf)
+
+        files = request.data.getlist('file')
+        article = get_object_or_404(Article.objects.prefetch_related('key_figures'), id=self.kwargs['article_pk'])
+
+        original_figures = list(article.key_figures.all())
+
+        new_figures = []
+
+        for file in files:
+            try:
+                img = Image.open(file)
+                img.verify()
+            except:
+                raise ParseError("File is not in a supported image format")
+            new_figures.append(KeyFigure.objects.create(article=article, image=file))
+
+        all_figures = original_figures + new_figures
+        serializer = KeyFigureSerializer(all_figures, many=True)
+
         return Response(serializer.data, status=status.HTTP_201_CREATED)
 
 # Autocomplete views
diff --git a/dist/js/bundle.js b/dist/js/bundle.js
diff --git a/package.json b/package.json
@@ -23,9 +23,10 @@
     "path": "^0.12.7",
     "query-string": "^6.2.0",
     "react": "^16.9.0",
-    "react-cookie": "^3.0.4",
+    "react-cookie": "^4.0.1",
     "react-debounce-input": "^3.2.0",
     "react-dom": "^16.9.0",
+    "react-dropzone": "^10.1.10",
     "react-image-lightbox": "^5.1.0",
     "react-responsive-carousel": "^3.1.43",
     "react-router": "^5.0.1",
diff --git a/src/components/ArticleContent.jsx b/src/components/ArticleContent.jsx
@@ -87,6 +87,9 @@ const styles = theme => ({
   additionalLink: {
     marginRight: theme.spacing(1)
   },
+  figureList: {
+    paddingTop: theme.spacing(1),
+  }
 });
 
 class ArticleContent extends React.PureComponent {
@@ -257,7 +260,9 @@ class ArticleContent extends React.PureComponent {
             }
           </Typography>
           <ArticleKeywords keywords={article.keywords} />
-          <FigureList figures={show_figures} loading={loading} onFigureClick={this.handle_figure_click} />
+          <div className={classes.figureList}>
+              <FigureList figures={show_figures} loading={loading} onFigureClick={this.handle_figure_click} />
+          </div>
           <div hidden={this.empty(article.author_contributions)}>
             <Typography component="span" variant="body2">
               <span className={classes.grayedTitle}>Author contributions:</span>
diff --git a/src/components/ArticleEditor.jsx b/src/components/ArticleEditor.jsx
@@ -35,16 +35,19 @@ import {
   Tooltip,
 } from '@material-ui/core';
 import ChipInput from 'material-ui-chip-input'
-import C from '../constants/constants';
-import TransparencyIcon from '../components/shared/TransparencyIcon.jsx';
-import FigureSelector from './FigureSelector.jsx';
-import LabeledBox from '../components/shared/LabeledBox.jsx';
-import Loader from '../components/shared/Loader.jsx';
+
 import { makeStyles } from '@material-ui/styles';
 import { withStyles } from '@material-ui/core/styles';
 import { clone, debounce, find, get, includes, set, truncate } from 'lodash'
 import {json_api_req, simple_api_req, unspecified, summarize_api_errors} from '../util/util.jsx'
+
 import {retrieve_authors,retrieve_title, retrieve_abstract} from '../components/curateform/DOILookup.jsx'
+import C from '../constants/constants';
+import KeyFigureUploader from './KeyFigureUploader.jsx';
+import LabeledBox from '../components/shared/LabeledBox.jsx';
+import Loader from '../components/shared/Loader.jsx';
+import TransparencyIcon from '../components/shared/TransparencyIcon.jsx';
+
 const Transition = React.forwardRef((props, ref) => {
   return <Slide direction="up" {...props} ref={ref}/>;
 })
@@ -538,6 +541,7 @@ function initialFormState() {
     commentaries: [],
     media_coverage: [],
     transparency_urls: [],
+    dragging_files: false,
   }
 }
 
@@ -1242,7 +1246,7 @@ class ArticleEditor extends React.Component {
 
   render() {
     let {classes, article_id, open} = this.props
-    let { doi_loading, form, snack_message, loading } = this.state
+    let { doi_loading, dragging_files, form, snack_message, loading } = this.state
     let content = <Loader />
 
     const replication = form.article_type === 'REPLICATION'
@@ -1256,7 +1260,14 @@ class ArticleEditor extends React.Component {
     const rep_std_details = find(C.REPORTING_STANDARDS_TYPES, {value: form.reporting_standards_type})
 
     if (!loading && article_id != null) content = (
-      <Grid container spacing={3}>
+      <Grid
+          container
+          spacing={3}
+          onDragEnter={() => this.setState({ dragging_files: true })}
+          onDragEnd={ () => this.setState({ dragging_files: false }) }
+          onDragExit={ () => this.setState({ dragging_files: false }) }
+          onDrop={ () => this.setState({ dragging_files: false }) }
+      >
         <Grid item className="ArticleEditorHalf">
           <Grid container>
             <Grid item xs={6}>
@@ -1641,9 +1652,12 @@ Completing all 7 earns you "Basic 7 (retroactive)" compliance
         <Typography variant="overline">Key Figures</Typography>
         <Grid container>
           <Grid item xs={12}>
-            <FigureSelector article_id={article_id}
-              onChange={this.update_figures}
-              figures={form.key_figures} />
+              <KeyFigureUploader
+                  dragging_files={dragging_files}
+                  onChange={this.update_figures}
+                  article_id={article_id}
+                  figures={form.key_figures}
+              />
           </Grid>
         </Grid>
       </Grid>
diff --git a/src/components/KeyFigureUploader.jsx b/src/components/KeyFigureUploader.jsx
@@ -0,0 +1,101 @@
+import React, { useCallback, useState } from 'react'
+import {useDropzone} from 'react-dropzone'
+import { useCookies } from 'react-cookie';
+
+import { concat } from 'lodash'
+import { makeStyles } from '@material-ui/styles';
+import { Button, Icon, Typography } from '@material-ui/core';
+
+import FigureList from './shared/FigureList.jsx';
+import Loader from './shared/Loader.jsx';
+
+
+const useStyles = makeStyles(theme => ({
+  figurelist: {
+    paddingTop: theme.spacing(1),
+  },
+}))
+
+export default function KeyFigureUploader({ article_id, dragging_files, figures, onChange }) {
+    const classes = useStyles()
+    const [cookies] = useCookies()
+    const [number_images_loading, set_number_images_loading] = useState(0)
+
+    const onDrop = useCallback(acceptedFiles => {
+        let formData  = new FormData();
+        acceptedFiles.forEach(file => formData.append('file', file))
+
+        set_number_images_loading(acceptedFiles.length)
+
+        fetch(`/api/articles/${article_id}/key_figures/upload/`, {
+            method: 'PUT',
+            headers: {
+                'X-CSRFToken': cookies.csrftoken,
+            },
+            body: formData
+        }).then(response => {
+            if (response.ok) {
+                return response.json()
+            } else {
+                set_number_images_loading(0)
+                throw new Error('Error uploading images')
+            }
+        }).then(data => {
+            onChange(data)
+            set_number_images_loading(0)
+        })
+    }, [])
+    const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})
+
+    return (
+        <div>
+            <div
+                {...getRootProps()}
+                style={
+                    {
+                        backgroundColor: (isDragActive || dragging_files) ? 'rgba(0,255,0,0.05)' : null,
+                        width: '100%',
+                        height: '8rem',
+                        borderRadius: 8,
+                        border: 'dashed 2px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }
+                }
+            >
+                <input {...getInputProps()} accept=".png,.jpg,.gif,.pdf"/>
+                {
+                    isDragActive ?
+                    <Typography variant="h4">Drop the files here</Typography> :
+                    <div style={{display: 'flex', width: '50%', justifyContent: 'space-evenly'}}>
+                        <div style={{ display: 'flex', alignItems: 'center' }}>
+                            <Icon style={{ fontSize: '3rem' }} color="disabled">add</Icon>
+                            <Icon style={{ fontSize: '3rem' }} color="disabled">photo_library</Icon>
+                        </div>
+                        <div style={{ display: 'flex', flexDirection: 'column' }}>
+                            <Typography>
+                                Drag and drop images here&nbsp;
+                                <Typography color="textSecondary" component="span">
+                                    (.png, .jpg, .gif or .pdf)
+                                </Typography>
+                            </Typography>
+                            <Typography align="center" color="textSecondary">or</Typography>
+                            <Button variant="outlined">
+                                Browse to select image files
+                            </Button>
+                        </div>
+                    </div>
+                }
+            </div>
+            <div className={classes.figurelist}>
+                <FigureList
+                    figures={figures}
+                    show_delete={true}
+                    number_images_loading={number_images_loading}
+                    onChange={onChange}
+                />
+            </div>
+        </div>
+    )
+}
diff --git a/src/components/shared/FigureList.jsx b/src/components/shared/FigureList.jsx
@@ -2,12 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import Loader from './Loader.jsx';
+import { withCookies, Cookies } from 'react-cookie';
 
+import { times } from 'lodash'
 import {TextField, Button, Icon, Typography, Menu, Grid, InputLabel,
 	FormControl, Select, OutlinedInput, InputBase, Tooltip} from '@material-ui/core';
 
 import { withStyles } from '@material-ui/core/styles';
 
+import { simple_api_req } from '../../util/util.jsx'
+
 const styles = {
     container: {
        display: 'flex',
@@ -43,14 +47,26 @@ class FigureList extends React.Component {
         this.handle_add = this.handle_add.bind(this)
     }
 
-    delete_figure = idx => {
-        if (this.props.onDelete != null) this.props.onDelete(idx)
+    delete_figure(idx) {
+    	let {figures, cookies} = this.props
+        let pk = figures[idx].id
+        this.setState({loading: true}, () => {
+            simple_api_req('DELETE', `/api/key_figures/${pk}/delete/`, null, cookies.get('csrftoken'), (res) => {
+                figures.splice(idx, 1)
+                this.setState({loading: false}, () => {
+                    if (this.props.onChange != null) this.props.onChange(figures)
+                })
+            }, (err) => {
+                this.setState({loading: false})
+                console.error(err)
+            })
+        })
     }
 
     figure_click = (idx, event) => {
-        let {figures, showDelete} = this.props
+        let {figures, show_delete} = this.props
         console.log(`figure_click ${idx}`)
-        if (showDelete) this.delete_figure(idx)
+        if (show_delete) this.delete_figure(idx)
         else this.props.onFigureClick(figures, idx)
     }
 
@@ -59,49 +75,57 @@ class FigureList extends React.Component {
     }
 
     render_thumbnail(kf, i) {
-        let {classes, showDelete} = this.props
+        let {classes, show_delete} = this.props
         let kind = kf.is_table ? 'Table' : 'Figure'
         let img = (
             <img key={i}
                   className={classes.thumbnail}
                   style={{backgroundImage: `url(${kf.image})`}} />
         )
-        let tooltip = showDelete ? "Delete figure" : "Enlarge figure"
+        let tooltip = show_delete ? "Delete figure" : "Enlarge figure"
         return <Tooltip title={tooltip} key={i}><a key={i} href="#" onClick={this.figure_click.bind(this, i)}>{ img }</a></Tooltip>
     }
 
 	render() {
-		let {classes, figures, showAdd, loading} = this.props
-        let addButton, spinner
+		let {classes, figures, showAdd, loading, number_images_loading} = this.props
         if (figures == null) figures = []
-        if (showAdd) addButton = <a href="#" onClick={this.handle_add} className={classes.thumbnail}>
-            <span className={classes.add}>
-                <Icon fontSize='large'>add</Icon> <Typography variant="body2">Add</Typography>
-            </span>
-        </a>
+
+        let spinner
         if (loading) spinner = <Loader size="25" />
+
+        let loading_images = []
+        times(number_images_loading, (i) => {
+            loading_images.push(
+                <div className={classes.thumbnail} key={`uploading_image_${i}`} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                    <Loader/>
+                </div>
+            )
+        })
+
 		return (
 			<div className={classes.container}>
 				{ figures.map(this.render_thumbnail) }
-                { addButton }
                 { spinner }
+                { loading_images }
             </div>
         )
 	}
 }
 
 FigureList.propTypes = {
-    onDelete: PropTypes.func,
-    showDelete: PropTypes.bool,
+    onChange: PropTypes.func,
+    show_delete: PropTypes.bool,
     showAdd: PropTypes.bool,
-    loading: PropTypes.bool
+    loading: PropTypes.bool,
+    number_images_loading: PropTypes.number,
 }
 
 FigureList.defaultProps = {
 	figures: [],
-    showDelete: false,
+    show_delete: false,
     showAdd: false,
-    loading: false
+    loading: false,
+    number_images_loading: 0,
 };
 
-export default withStyles(styles)(FigureList);
+export default withCookies(withStyles(styles)(FigureList));
diff --git a/yarn.lock b/yarn.lock
