UI for uploading media attachments (and cancelling them)

Mostly resolves #8, though attachments are still not displayed in public view

1 files changed, 68 insertions, 8 deletions

diff --git a/app/assets/javascripts/components/actions/compose.jsx b/app/assets/javascripts/components/actions/compose.jsx
index 4954f0f5c..a107b3352 100644
--- a/app/assets/javascripts/components/actions/compose.jsx
+++ b/app/assets/javascripts/components/actions/compose.jsx
@@ -1,12 +1,18 @@
 import api from '../api'
 
-export const COMPOSE_CHANGE         = 'COMPOSE_CHANGE';
-export const COMPOSE_SUBMIT         = 'COMPOSE_SUBMIT';
-export const COMPOSE_SUBMIT_REQUEST = 'COMPOSE_SUBMIT_REQUEST';
-export const COMPOSE_SUBMIT_SUCCESS = 'COMPOSE_SUBMIT_SUCCESS';
-export const COMPOSE_SUBMIT_FAIL    = 'COMPOSE_SUBMIT_FAIL';
-export const COMPOSE_REPLY          = 'COMPOSE_REPLY';
-export const COMPOSE_REPLY_CANCEL   = 'COMPOSE_REPLY_CANCEL';
+export const COMPOSE_CHANGE          = 'COMPOSE_CHANGE';
+export const COMPOSE_SUBMIT          = 'COMPOSE_SUBMIT';
+export const COMPOSE_SUBMIT_REQUEST  = 'COMPOSE_SUBMIT_REQUEST';
+export const COMPOSE_SUBMIT_SUCCESS  = 'COMPOSE_SUBMIT_SUCCESS';
+export const COMPOSE_SUBMIT_FAIL     = 'COMPOSE_SUBMIT_FAIL';
+export const COMPOSE_REPLY           = 'COMPOSE_REPLY';
+export const COMPOSE_REPLY_CANCEL    = 'COMPOSE_REPLY_CANCEL';
+export const COMPOSE_UPLOAD          = 'COMPOSE_UPLOAD';
+export const COMPOSE_UPLOAD_REQUEST  = 'COMPOSE_UPLOAD_REQUEST';
+export const COMPOSE_UPLOAD_SUCCESS  = 'COMPOSE_UPLOAD_SUCCESS';
+export const COMPOSE_UPLOAD_FAIL     = 'COMPOSE_UPLOAD_FAIL';
+export const COMPOSE_UPLOAD_PROGRESS = 'COMPOSE_UPLOAD_PROGRESS';
+export const COMPOSE_UPLOAD_UNDO     = 'COMPOSE_UPLOAD_UNDO';
 
 export function changeCompose(text) {
   return {
@@ -34,7 +40,8 @@ export function submitCompose() {
 
     api(getState).post('/api/statuses', {
       status: getState().getIn(['compose', 'text'], ''),
-      in_reply_to_id: getState().getIn(['compose', 'in_reply_to'], null)
+      in_reply_to_id: getState().getIn(['compose', 'in_reply_to'], null),
+      media_ids: getState().getIn(['compose', 'media_attachments']).map(item => item.get('id'))
     }).then(function (response) {
       dispatch(submitComposeSuccess(response.data));
     }).catch(function (error) {
@@ -63,3 +70,56 @@ export function submitComposeFail(error) {
   };
 }
 
+export function uploadCompose(files) {
+  return function (dispatch, getState) {
+    dispatch(uploadComposeRequest());
+
+    let data = new FormData();
+    data.append('file', files[0]);
+
+    api(getState).post('/api/media', data, {
+      onUploadProgress: function (e) {
+        dispatch(uploadComposeProgress(e.loaded, e.total));
+      }
+    }).then(function (response) {
+      dispatch(uploadComposeSuccess(response.data));
+    }).catch(function (error) {
+      dispatch(uploadComposeFail(error));
+    });
+  };
+}
+
+export function uploadComposeRequest() {
+  return {
+    type: COMPOSE_UPLOAD_REQUEST
+  };
+}
+
+export function uploadComposeProgress(loaded, total) {
+  return {
+    type: COMPOSE_UPLOAD_PROGRESS,
+    loaded: loaded,
+    total: total
+  };
+}
+
+export function uploadComposeSuccess(media) {
+  return {
+    type: COMPOSE_UPLOAD_SUCCESS,
+    media: media
+  };
+}
+
+export function uploadComposeFail(error) {
+  return {
+    type: COMPOSE_UPLOAD_FAIL,
+    error: error
+  };
+}
+
+export function undoUploadCompose(media_id) {
+  return {
+    type: COMPOSE_UPLOAD_UNDO,
+    media_id: media_id
+  };
+}