handle better image upload errors (#2797)

Author: willemarcel

frontend/src/components/teamsAndOrgs/messages.js

@@ -8,6 +8,10 @@ export default defineMessages({
     id: 'management.messages.notAllowed',
     defaultMessage: 'You are not allowed to manage organizations.',
   },
+  imageUploadFailed: {
+    id: 'management.messages.imageUpload.error',
+    defaultMessage: 'The image upload failed.',
+  },
   managers: {
     id: 'management.fields.managers',
     defaultMessage: 'Managers',

frontend/src/components/teamsAndOrgs/organisations.js

@@ -227,7 +227,7 @@ export function OrgInformation(props) {
                     alt={fieldProps.input.value}
                     className="h3 db pt2"
                   />
-                  {uploadError && <pre>{uploadError}</pre>}
+                  {uploadError && <FormattedMessage {...messages.imageUploadFailed} />}
                 </ReactPlaceholder>
               </>
             )}

frontend/src/locales/en.json

@@ -585,6 +585,7 @@
   "project.permissions.error.userIsNotValidationTeamMember": "You need to be member of one of the validation teams to be able to validate this project.",
   "project.permissions.error.userIsNotMappingTeamMember": "You need to be member of one of the mapping teams to be able to map this project.",
   "management.messages.notAllowed": "You are not allowed to manage organizations.",
+  "management.messages.imageUpload.error": "The image upload failed.",
   "management.fields.managers": "Managers",
   "management.link.manage": "Manage {entity}",
   "management.members": "Members",