Make local file uploads work via drag-n-drop

refs CNVS-28647

Test Plan:
  - Enable course images feature flag
  - Go to course settings
  - Click the "Change Image" button
  - Drag an image file to the drag-n-drop zone
  - The file will upload and the modal will close
  - The course image setting will now show the new
    image.
  - Save the course settings
  - The new image should persist.

Change-Id: I9922d3ede6fdd17d7503f8de78035245decfa320
Reviewed-on: https://gerrit.instructure.com/77177
Tested-by: Jenkins
Reviewed-by: Matt Zabriskie <mzabriskie@instructure.com>
QA-Review: Pierce Arner <pierce@instructure.com>
Product-Review: Colleen Palmer <colleen@instructure.com>

Author: claydiffrient

app/jsx/course_settings/actions.jsx

@@ -1,6 +1,9 @@
 define ([
-  "axios"
-], (axios) => {
+  'axios',
+  'i18n!actions',
+  './helpers',
+  'compiled/jquery.rails_flash_notifications'
+], (axios, I18n, Helpers) => {
 
   const Actions = {
 
@@ -22,16 +25,93 @@ define ([
       };
     },
 
+    rejectedUpload(type) {
+      return {
+        type: 'REJECTED_UPLOAD',
+        payload: {
+          rejectedFiletype: type
+        }
+      };
+    },
+
+    errorUploadingImage() {
+      $.flashError(I18n.t("There was an error uploading the image"));
+    },
+
     getCourseImage (courseId, ajaxLib = axios) {
       return (dispatch, getState) => {
         ajaxLib.get(`/api/v1/courses/${courseId}/settings`)
                .then((response) => {
                   dispatch(this.gotCourseImage(response.data.image, courseId));
                 })
                .catch((response) => {
-                  console.error('There is an error');
+                  $.flashError(I18n.t("There was an error retrieving the course image"));
                 });
       };
+    },
+
+    setCourseImageId (imageUrl, imageId) {
+      return {
+        type: 'SET_COURSE_IMAGE_ID',
+        payload: {
+          imageUrl,
+          imageId
+        }
+      };
+    },
+
+    prepareSetImage (imageUrl, imageId, ajaxLib = axios) {
+      if (imageUrl) {
+        return this.setCourseImageId(imageUrl, imageId);
+      } else {
+        // In this case the url field was blank so we could either
+        // recreate it or hit the API to get it.  We hit the api
+        // to be safe.
+        return (dispatch, getState) => {
+          ajaxLib.get(`/api/v1/files/${imageId}`)
+                 .then((response) => {
+                   dispatch(this.setCourseImageId(response.data.url, imageId));
+                 })
+                 .catch((response) => {
+                   this.errorUploadingImage();
+                 });
+        }
+      }
+    },
+
+    uploadFile (event, courseId, ajaxLib = axios) {
+      event.preventDefault();
+      return (dispatch, getState) => {
+        const type = event.dataTransfer.files[0].type;
+        const file = event.dataTransfer.files[0];
+        if (Helpers.isValidImageType(type)) {
+          const data = {
+            name: file.name,
+            size: file.size,
+            parent_folder_path: 'course_image',
+            type
+          };
+          ajaxLib.post(`/api/v1/courses/${courseId}/files`, data)
+                 .then((response) => {
+                    const formData = Helpers.createFormData(response.data.upload_params);
+                    formData.append('file', file);
+                    ajaxLib.post(response.data.upload_url, formData)
+                           .then((response) => {
+                             dispatch(this.prepareSetImage(response.data.url, response.data.id));
+                           })
+                           .catch((response) => {
+                              this.errorUploadingImage();
+                           });
+                  })
+                 .catch((response) => {
+                    this.errorUploadingImage();
+                 });
+        } else {
+          dispatch(this.rejectedUpload(type));
+          $.flashWarning(I18n.t("'%{type}' is not a valid image type (try jpg, png, or gif)", {type}));
+        }
+      };
+
     }
   };
 

app/jsx/course_settings/components/CourseImagePicker.jsx

@@ -0,0 +1,93 @@
+define([
+  'react',
+  'i18n!course_images',
+  'underscore',
+  './UploadArea'
+], (React, I18n, _, UploadArea) => {
+
+  class CourseImagePicker extends React.Component {
+    constructor (props) {
+      super(props);
+
+      this.state = {
+        draggingFile: false
+      };
+
+      this.onDrop = this.onDrop.bind(this);
+      this.onDragLeave = this.onDragLeave.bind(this);
+      this.onDragEnter = this.onDragEnter.bind(this);
+      this.shouldAcceptDrop = this.shouldAcceptDrop.bind(this);
+    }
+
+    onDrop (e) {
+      this.setState({draggingFile: false});
+      this.props.handleFileUpload(e, this.props.courseId);
+      e.preventDefault();
+      e.stopPropagation();
+    }
+
+    onDragLeave () {
+      this.setState({draggingFile: false});
+    }
+
+    onDragEnter (e) {
+      if (this.shouldAcceptDrop(e.dataTransfer)) {
+        this.setState({draggingFile: true});
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    }
+
+    shouldAcceptDrop (dataTransfer) {
+      if (dataTransfer) {
+        return (_.indexOf(dataTransfer.types, 'Files') >= 0);
+      }
+    }
+
+    render () {
+      return (
+        <div className="CourseImagePicker"
+          onDrop={this.onDrop}
+          onDragLeave={this.onDragLeave}
+          onDragOver={this.onDragEnter}
+          onDragEnter={this.onDragEnter}>
+          { this.state.draggingFile ?
+            <div className="DraggingOverlay">
+              <div className="DraggingOverlay__Content">
+                <div className="DraggingOverlay__Icon">
+                  <i className="icon-upload" />
+                </div>
+                <div className="DraggingOverlay__Instructions">
+                  {I18n.t('Drop Image')}
+                </div>
+              </div>
+            </div>
+            :
+            null
+          }
+          <div className="ic-Action-header CourseImagePicker__Header">
+            <h3 className="ic-Action-header__Heading">{I18n.t('Change Image')}</h3>
+            <div className="ic-Action-header__Secondary">
+              <button
+                className="CourseImagePicker__CloseBtn"
+                onClick={this.props.handleClose}
+                type="button"
+              >
+                <i className="icon-x" />
+                <span className="screenreader-only">
+                  {I18n.t('Close')}
+                </span>
+              </button>
+            </div>
+          </div>
+          <div className="CourseImagePicker__Content">
+            <UploadArea />
+          </div>
+        </div>
+      );
+    }
+  }
+
+  return CourseImagePicker;
+
+});

app/jsx/course_settings/components/CourseImageSelector.jsx

@@ -2,8 +2,9 @@ define([
   'react',
   'react-modal',
   'i18n!course_images',
-  '../actions'
-], (React, Modal, I18n, Actions) => {
+  '../actions',
+  './CourseImagePicker'
+], (React, Modal, I18n, Actions, CourseImagePicker) => {
 
   class CourseImageSelector extends React.Component {
 
@@ -12,6 +13,7 @@ define([
       this.state = props.store.getState();
 
       this.handleChange = this.handleChange.bind(this);
+      this.handleModalClose = this.handleModalClose.bind(this);
     }
 
     componentWillMount () {
@@ -23,6 +25,10 @@ define([
       this.setState(this.props.store.getState());
     }
 
+    handleModalClose () {
+      this.props.store.dispatch(Actions.setModalVisibility(false));
+    }
+
     render () {
 
       const styles = {
@@ -31,7 +37,12 @@ define([
 
       return (
         <div>
-          <input ref="hiddenInput" type="hidden" name={this.props.name} value={this.state.courseImage} />
+          <input
+            ref="hiddenInput"
+            type="hidden"
+            name={this.state.hiddenInputName}
+            value={this.state.courseImage}
+          />
           <div
             className="CourseImageSelector"
             style={(this.state.imageUrl) ? styles : {}}
@@ -47,9 +58,13 @@ define([
           <Modal
             className="CourseImageSelector__Modal"
             isOpen={this.state.showModal}
-            onRequestClose={() => this.props.store.dispatch(Actions.setModalVisibility(false))}
+            onRequestClose={this.handleModalClose}
           >
-            Picker will render here :)
+            <CourseImagePicker
+              courseId={this.props.courseId}
+              handleClose={this.handleModalClose}
+              handleFileUpload={(e, courseId) => this.props.store.dispatch(Actions.uploadFile(e, courseId))}
+            />
           </Modal>
         </div>
       );

app/jsx/course_settings/components/UploadArea.jsx

@@ -0,0 +1,29 @@
+define([
+  'react',
+  'i18n!course_images',
+  'classnames'
+], (React, I18n, classnames) => {
+
+  class UploadArea extends React.Component {
+    render () {
+      return (
+        <div className="UploadArea">
+          <div className="UploadArea__Content">
+            <div className="UploadArea__Icon">
+              <i className="icon-upload" />
+            </div>
+            <div className="UploadArea__Instructions">
+              <strong>{I18n.t('Drag and drop your image here or browse your computer.')}</strong>
+              <div className="UploadArea__FileTypes">
+                {I18n.t('jpg, png, or gif files')}
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+  }
+
+  return UploadArea;
+
+});

app/jsx/course_settings/helpers.jsx

@@ -0,0 +1,28 @@
+define ([], () => {
+
+  const Helpers = {
+    isValidImageType (mimeType) {
+      switch (mimeType) {
+        case 'image/jpeg':
+        case 'image/gif':
+        case 'image/png':
+          return true;
+          break;
+        default:
+          return false;
+          break;
+      }
+    },
+
+    createFormData (uploadParams) {
+      const formData = new FormData();
+      Object.keys(uploadParams).forEach((key) => {
+        formData.append(key, uploadParams[key]);
+      });
+      return formData;
+    }
+  };
+
+  return Helpers;
+
+});

app/jsx/course_settings/reducer.jsx

@@ -13,6 +13,13 @@ define([
       state.courseImage = action.payload.imageString;
       state.imageUrl = action.payload.imageUrl;
       return state;
+    },
+    SET_COURSE_IMAGE_ID (state, action) {
+      state.imageUrl = action.payload.imageUrl;
+      state.courseImage = action.payload.imageId;
+      state.showModal = false;
+      state.hiddenInputName = "course[image_id]"
+      return state;
     }
   };
 

app/jsx/course_settings/store/initialState.jsx

@@ -3,7 +3,8 @@ define([], () => {
   const initialState = {
     courseImage: 'abc',
     imageUrl: '',
-    showModal: false
+    showModal: false,
+    hiddenInputName: ''
   };
 
   return initialState;