Add image support

generators/app/files.js

@@ -46,6 +46,7 @@ const files = {
         'app/shared/components/alert-message/alert-message.styles.js',
         'app/shared/components/form/inputs/jhi-date-input.js',
         'app/shared/components/form/inputs/jhi-date-input.web.js',
+        'app/shared/components/form/inputs/jhi-image-input.js',
         'app/shared/components/form/inputs/jhi-list-input.js',
         'app/shared/components/form/inputs/jhi-multi-list-input.js',
         'app/shared/components/form/inputs/jhi-switch-input.js',

generators/app/templates/app/shared/components/form/inputs/jhi-image-input.js.ejs

@@ -0,0 +1,89 @@
+import React, { useEffect } from 'react';
+import { View, StyleSheet, Text, Image, Button, Platform } from 'react-native';
+import * as ImagePicker from 'expo-image-picker';
+import { MaterialIcons } from '@expo/vector-icons';
+/* eslint-disable react-native/no-inline-styles */
+
+export default React.forwardRef((props, ref) => {
+  const { label, labelStyle, error, onChange, inputType, contentType, value, testID, ...otherProps } = props;
+
+  const [photo, setPhoto] = React.useState(null);
+
+  useEffect(() => {
+    (async () => {
+      if (Platform.OS !== 'web') {
+        const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
+        if (status !== 'granted') {
+          // eslint-disable-next-line no-alert
+          alert('Sorry, Camera roll permissions are required to make this work!');
+        }
+      }
+    })();
+  }, []);
+
+  const choosePhoto = async () => {
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.All,
+      aspect: [4, 3],
+      quality: 1,
+      allowsEditing: true,
+      base64: true,
+    });
+    if (!result.cancelled) {
+      onChange(result.base64);
+    }
+  };
+
+  const removePhoto = () => {
+    onChange('');
+  };
+
+  return (
+    <View style={styles.container}>
+      {/* if there's a label, render it */}
+      {label && <Text style={[styles.label, labelStyle]}>{label}</Text>}
+      <Button title="Choose Photo" onPress={choosePhoto} />
+      {/* render the base64 image or plain image input */}
+      {value ? (
+        <View>
+          <Image
+            ref={ref}
+            style={[styles.imageSize, { borderColor: error ? '#fc6d47' : '#c0cbd3' }]}
+            source={{ uri: inputType === 'image-base64' ? `data:${contentType};base64,${value}` : value }}
+          />
+          <MaterialIcons name="delete" size={24} color="red" onPress={removePhoto}
+                         style={styles.deleteIcon} />
+        </View>
+      ) : (
+        <></>
+      )}
+      {/* if there's an error, render it */}
+      {!!error && !!error.message && <Text style={styles.textError}>{error && error.message}</Text>}
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  imageSize: {
+    width: '100%',
+    height: undefined,
+    aspectRatio: 1,
+  },
+  container: {
+    marginVertical: 8,
+  },
+  label: {
+    paddingVertical: 5,
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  textError: {
+    color: '#fc6d47',
+    fontSize: 14,
+  },
+  deleteIcon: {
+    right: 0,
+    top: -60,
+    position: 'absolute',
+  },
+});

generators/app/templates/app/shared/components/form/jhi-form-field.js.ejs

@@ -6,6 +6,7 @@ import AppSwitchInput from './inputs/jhi-switch-input';
 import AppListInput from './inputs/jhi-list-input';
 import AppMultiListInput from './inputs/jhi-multi-list-input';
 import AppDateInput from './inputs/jhi-date-input';
+import AppImageInput from './inputs/jhi-image-input';
 import { StyleSheet, Text } from 'react-native';
 import ApplicationStyles from '../../themes/application.styles';
 
@@ -20,7 +21,7 @@ export default React.forwardRef((props, ref) => {
   if (!inputType) {
     inputType = 'text';
   }
-  if (!['text', 'boolean', 'number', 'date', 'datetime', 'select-one', 'select-multiple'].includes(inputType)) {
+  if (!['text', 'boolean', 'number', 'date', 'datetime', 'select-one', 'select-multiple', 'image', 'image-base64'].includes(inputType)) {
     return <Text style={styles.errorText}>INVALID INPUT TYPE '{inputType}'</Text>;
   }
 
@@ -108,6 +109,17 @@ export default React.forwardRef((props, ref) => {
           {...otherProps}
         />
       )}
+      {(inputType === 'image-base64' || inputType === 'image') && (
+        <AppImageInput
+          ref={ref}
+          inputType={inputType}
+          value={values[name]}
+          onChange={(value) => setFieldValue(name, value)}
+          onBlur={() => setFieldTouched(name)}
+          error={hasError}
+          {...otherProps}
+        />
+      )}
       {hasError && <Text style={styles.errorText}>{errors[name]}</Text>}
     </React.Fragment>
   );

generators/app/templates/app/shared/themes/application.styles.js.ejs

@@ -92,9 +92,10 @@ const ApplicationStyles = {
     },
     entityButtons: { marginBottom: 20 },
     imageBlob: {
-      width: 200,
-      height: 100,
-      resizeMode: 'contain',
+      width: '50%',
+      height: undefined,
+      aspectRatio: 1,
+      resizeMode: 'cover',
       borderWidth: 1,
       borderColor: 'lightgrey',
     },

generators/app/templates/e2e/config.json.ejs

@@ -1,8 +1,8 @@
 {
-    "testEnvironment": "./environment",
-    "testRunner": "jest-circus/runner",
-    "testTimeout": 300000,
-    "testRegex": "\\.spec\\.js$",
-    "reporters": ["detox/runners/jest/streamlineReporter"],
-    "verbose": true
+  "testEnvironment": "./environment",
+  "testRunner": "jest-circus/runner",
+  "testTimeout": 300000,
+  "testRegex": "\\.spec\\.js$",
+  "reporters": ["detox/runners/jest/streamlineReporter"],
+  "verbose": true
 }

generators/app/templates/package.json

@@ -4,6 +4,7 @@
   "version": "0.0.1",
   "dependencies": {
     "apisauce": "2.1.2",
+    "expo-image-picker": "13.3.1",
     "format-json": "1.0.3",
     "identity-obj-proxy": "3.0.0",
     "lodash": "4.17.21",

generators/app/templates/package.json.ejs

@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "apisauce": "REPLACE_WITH_VERSION",
+    "expo-image-picker": "REPLACE_WITH_VERSION",
     "format-json": "REPLACE_WITH_VERSION",
     "identity-obj-proxy": "REPLACE_WITH_VERSION",
     "lodash": "REPLACE_WITH_VERSION",

lib/entity-helpers.js

@@ -26,6 +26,9 @@ const getEntityFormFieldType = field => {
   if (fieldType === 'Boolean') {
     return 'boolean';
   }
+  if (fieldType === 'byte[]' && field.fieldTypeBlobContent === 'image') {
+    return 'image-base64';
+  }
   if (fieldIsEnum) {
     return 'select-one';
   }
@@ -36,6 +39,7 @@ const getEntityFormFieldAttributes = (
   fieldType,
   fieldName,
   fieldIsEnum,
+  fieldIsImage,
   nextFieldName,
   nextFieldType,
   nextFieldIsEnum,
@@ -69,6 +73,10 @@ const getEntityFormFieldAttributes = (
     attributes += `
         inputType='date'
         `;
+  } else if (fieldType === 'byte[]' && fieldIsImage) {
+    attributes += `
+        inputType='image-base64'
+        `;
   } else if (fieldType === 'Instant' || fieldType === 'ZonedDateTime') {
     attributes += `
         inputType='datetime'
@@ -111,6 +119,7 @@ const getEntityFormField = (field, nextField, numRelationships) => {
       fieldType,
       fieldName,
       fieldIsEnum,
+      field.fieldTypeBlobContent === 'image',
       `${fieldName}ContentType`,
       'String',
       false,
@@ -120,6 +129,7 @@ const getEntityFormField = (field, nextField, numRelationships) => {
       'String',
       `${fieldName}ContentType`,
       false,
+      false,
       nextFieldName,
       nextFieldType,
       false,
@@ -132,6 +142,7 @@ const getEntityFormField = (field, nextField, numRelationships) => {
     fieldType,
     fieldName,
     fieldIsEnum,
+    field.fieldTypeBlobContent === 'image',
     nextFieldName,
     nextFieldType,
     nextFieldIsEnum,