Improve Image Upload Workflow

android/app/build.gradle

@@ -179,7 +179,7 @@ repositories {
 dependencies {
     implementation project(':react-native-text-input-reset')
     implementation project(':react-native-notifications')
-    implementation project(':react-native-image-picker')
+    implementation project(':react-native-image-crop-picker')
     implementation project(':react-native-orientation')
     implementation project(':react-native-sentry')
     implementation project(':@remobile_react-native-toast')

android/app/src/main/java/com/zulipmobile/MainApplication.java

@@ -10,7 +10,7 @@
 import com.facebook.react.ReactApplication;
 import com.nikolaiwarner.RNTextInputReset.RNTextInputResetPackage;
 import com.wix.reactnativenotifications.RNNotificationsPackage;
-import com.imagepicker.ImagePickerPackage;
+import com.reactnative.ivpusic.imagepicker.PickerPackage;
 import com.github.yamill.orientation.OrientationPackage;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
@@ -53,7 +53,7 @@ protected List<ReactPackage> getPackages() {
             return Arrays.<ReactPackage>asList(
                     new MainReactPackage(),
                     new RNTextInputResetPackage(),
-                    new ImagePickerPackage(),
+                    new PickerPackage(),
                     new OrientationPackage(),
                     new RNSentryPackage(MainApplication.this),
                     new PhotoViewPackage(),

android/build.gradle

@@ -29,6 +29,7 @@ allprojects {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
             url "$rootDir/../node_modules/react-native/android"
         }
+        maven { url "https://jitpack.io" }
     }
 }
 

android/settings.gradle

@@ -3,8 +3,8 @@ include ':react-native-text-input-reset'
 project(':react-native-text-input-reset').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-text-input-reset/android')
 include ':react-native-notifications'
 project(':react-native-notifications').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-notifications/android')
-include ':react-native-image-picker'
-project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')
+include ':react-native-image-crop-picker'
+project(':react-native-image-crop-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-crop-picker/android')
 include ':react-native-orientation'
 project(':react-native-orientation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-orientation/android')
 include ':react-native-sentry'

package.json

@@ -56,8 +56,7 @@
     "react-intl": "^2.4.0",
     "react-native": "0.57.1",
     "react-native-device-info": "^0.21.5",
-    "rn-fetch-blob": "^0.10.13",
-    "react-native-image-picker": "^0.26.10",
+    "react-native-image-crop-picker": "^0.21.2",
     "react-native-notifications": "^1.2.0",
     "react-native-orientation": "^3.1.3",
     "react-native-photo-view": "alwx/react-native-photo-view#c58fd6b30",
@@ -79,6 +78,7 @@
     "redux-persist": "^4.10.2",
     "redux-thunk": "^2.1.0",
     "reselect": "^3.0.1",
+    "rn-fetch-blob": "^0.10.13",
     "string.fromcodepoint": "^0.2.1",
     "timezone": "^1.0.13",
     "url-parse": "^1.4.0",

src/actionConstants.js

@@ -88,4 +88,10 @@ export const DELETE_OUTBOX_MESSAGE = 'DELETE_OUTBOX_MESSAGE';
 
 export const DRAFT_UPDATE = 'DRAFT_UPDATE';
 
+export const DRAFT_IMAGE_ADD = 'DRAFT_IMAGE_ADD';
+export const DRAFT_IMAGE_REMOVE = 'DRAFT_IMAGE_REMOVE';
+export const DRAFT_IMAGE_UPLOADING = 'DRAFT_IMAGE_UPLOADING';
+export const DRAFT_IMAGE_UPLOADED = 'DRAFT_IMAGE_UPLOADED';
+export const DRAFT_IMAGE_ERROR = 'DRAFT_IMAGE_ERROR';
+
 export const CLEAR_TYPING = 'CLEAR_TYPING';

src/actionTypes.js

@@ -28,6 +28,11 @@ import {
   INIT_REALM_FILTER,
   SETTINGS_CHANGE,
   DRAFT_UPDATE,
+  DRAFT_IMAGE_ADD,
+  DRAFT_IMAGE_UPLOADING,
+  DRAFT_IMAGE_UPLOADED,
+  DRAFT_IMAGE_ERROR,
+  DRAFT_IMAGE_REMOVE,
   DO_NARROW,
   PRESENCE_RESPONSE,
   MESSAGE_SEND_START,
@@ -527,6 +532,68 @@ export type DraftUpdateAction = {
 
 export type DraftsAction = DraftUpdateAction | LogoutAction;
 
+/**
+ * **Draft Image Actions**
+ * Used by ComposeBox to show previews of images selected for
+ * upload while composing a message
+ */
+
+/**
+ * To add a draft image
+ * @prop id - A unique id for the image
+ * @prop fileName - A name for the file being uploaded
+ * @prop uri - uri of the file on the users device
+ */
+
+export type DraftImageAddAction = {
+  type: typeof DRAFT_IMAGE_ADD,
+  id: string,
+  fileName: string,
+  uri: string,
+};
+
+/**
+ * To remove a draft image
+ * @prop id - The id of the draft image being removed
+ */
+
+export type DraftImageRemoveAction = {
+  type: typeof DRAFT_IMAGE_REMOVE,
+  id: string,
+};
+
+/**
+ * Mark a draft image as currently being uploaded
+ * @prop id - The id of the file being uploaded
+ */
+
+export type DraftImageUploadingAction = {
+  type: typeof DRAFT_IMAGE_UPLOADING,
+  id: string,
+};
+
+/**
+ * Mark a draft image as successfully uploaded
+ * @prop id - The id of the file being uploaded
+ * @prop serverUri - uri of the uploaded file on the server
+ */
+
+export type DraftImageUploadedAction = {
+  type: typeof DRAFT_IMAGE_UPLOADED,
+  id: string,
+  serverUri: string,
+};
+
+/**
+ * Mark a draft image as having errored out while uplaoding
+ * @prop id - The id of the file being uploaded
+ */
+
+export type DraftImageErrorAction = {
+  type: typeof DRAFT_IMAGE_ERROR,
+  id: string,
+};
+
 export type DoNarrowAction = {
   type: typeof DO_NARROW,
   narrow: Narrow,

src/actions.js

@@ -3,6 +3,7 @@ export * from './account/accountActions';
 export * from './events/eventActions';
 export * from './nav/navActions';
 export * from './drafts/draftsActions';
+export * from './draftImages/draftImagesActions';
 export * from './message/fetchActions';
 export * from './message/messagesActions';
 export * from './realm/realmActions';

src/boot/reducers.js

@@ -11,6 +11,7 @@ import accounts from '../account/accountsReducers';
 import alertWords from '../alertWords/alertWordsReducer';
 import caughtUp from '../caughtup/caughtUpReducers';
 import drafts from '../drafts/draftsReducers';
+import draftImages from '../draftImages/draftImagesReducers';
 import fetching from '../chat/fetchingReducers';
 import flags from '../chat/flagsReducers';
 import loading from '../loading/loadingReducers';
@@ -40,6 +41,7 @@ const reducers = {
   alertWords,
   caughtUp,
   drafts,
+  draftImages,
   fetching,
   flags,
   loading,

src/boot/store.js

@@ -31,7 +31,7 @@ export const discardKeys = [
  * install of the app), where things wouldn't work right if we didn't
  * persist them.
  */
-export const storeKeys = ['migrations', 'accounts', 'drafts', 'outbox', 'settings'];
+export const storeKeys = ['migrations', 'accounts', 'drafts', 'draftImages', 'outbox', 'settings'];
 
 /**
  * Properties on the global store which we persist for caching's sake.