Fix uploading enterprise logo

client/src/i18n/en/form.json

@@ -1037,6 +1037,8 @@
             "EMAIL": "Email mistyped",
             "EXCEPTION": "There was a problem validating this field. Please check your internet connection.",
             "FORMAT_NAME_VARIABLE": "a variable name must start with a letter (uppercase or lowercase) and can only contain letters, numbers, and _ or - characters, spaces and special characters are not allowed!",
+            "FILE_SIZE_LIMIT": "The maximum allowed upload file size is {{ limit }}!",
+            "UPLOAD_TOO_LARGE": "The uploaded file is too large!",
             "INTEGER": "This value must be a whole number (integer).",
             "INVALID_DATE": "Invalid date",
             "MAX": "This value is too large!  Choose a lower value.",

client/src/i18n/fr/form.json

@@ -1038,6 +1038,8 @@
             "EMAIL": "Email mal saisie",
             "EXCEPTION": "Il y avait un problème de validation avec ce champ. S'il vous plaît vérifier votre connexion Internet.",
             "FORMAT_NAME_VARIABLE": "un nom de variable doit commencer par une lettre (majuscule ou minuscule) et ne peut contenir que des lettres, des chiffres et les caractères _ ou -, les espaces et les caractères spéciaux ne sont pas autorisés!",
+            "FILE_SIZE_LIMIT": "La taille maximale autorisée du fichier à télécharger est {{ limite }} !",
+            "UPLOAD_TOO_LARGE": "Le fichier téléchargé est trop gros !",
             "INTEGER": "Cette valeur doit être un nombre entier (Entier).",
             "INVALID_DATE": "Date invalide",
             "MAX": "Cette valeur est trop grande! Choisissez une valeur inférieure.",

client/src/modules/enterprises/enterprises.html

@@ -61,13 +61,20 @@
                       <i class="fa fa-edit"></i> <span translate>ENTERPRISE.UPDATE_LOGO</span>
                       <input
                         type="file"
+                        name="logo"
                         accept="image/*"
                         ng-model="EnterpriseCtrl.file"
-                        ngf-max-size="2MB"
+                        ngf-max-size="{{ EnterpriseCtrl.maxLogoFileSize }}"
                         ngf-select="EnterpriseCtrl.setThumbnail($file)"
                         style="display: none;">
                     </label>
                   </div>
+                  <div class="help-block text-center form-warning"
+                    ng-messages="EnterpriseForm.logo.$error"
+                    ng-show="EnterpriseForm.logo.$error.maxSize">
+                    <div ng-messages-include="modules/templates/messages.tmpl.html"></div>
+                    <span translate translate-values="{ limit : '{{EnterpriseCtrl.maxLogoFileSize}}' }">FORM.VALIDATION.FILE_SIZE_LIMIT</span>
+                  </div>
                 </div>
 
                 <div class="form-group" ng-class="{ 'has-error' : EnterpriseForm.$submitted && EnterpriseForm.name.$invalid }">

client/src/modules/enterprises/enterprises.js

@@ -20,6 +20,7 @@ function EnterpriseController(Enterprises, util, Notify, Projects, Modal, Scroll
   vm.length50 = util.length50;
   vm.length100 = util.length100;
   vm.hasEnterprise = false;
+  vm.maxLogoFileSize = '2MB';
 
   let $touched = false;
 

client/src/modules/templates/messages.tmpl.html

@@ -41,3 +41,8 @@
 
 <!-- displays: "You must enter a valid number." -->
 <p ng-message="number" translate>FORM.ERRORS.NUMBER </p>
+
+<!-- displays: "The uploaded file is too large!" -->
+<p ng-message="maxSize" style="margin-bottom: 0;">
+  <i class="fa fa-warning"></i> <span translate>FORM.VALIDATION.UPLOAD_TOO_LARGE</span>
+</p>

server/config/express.js

@@ -47,6 +47,7 @@ exports.configure = function configure(app) {
       directives : {
         defaultSrc : ['\'self\'', '\'unsafe-inline\'', 'blob:'],
         fontSrc : ['\'self\'', 'https://fonts.gstatic.com'],
+        imgSrc : ['\'self\'', 'blob:', 'data:'],
       },
     },
   }));

server/lib/uploader.js

@@ -43,6 +43,7 @@ if (path.isAbsolute(dir) || dir.startsWith('..')) {
 }
 const rootDir = path.resolve(`${__dirname}/../..`);
 const fsdir = path.join(rootDir, dir); // global path
+debug('ROOT dir: ', rootDir);
 debug('UPLOAD_DIR: ', dir);
 debug('UPLOAD_DIR Abs dir: ', fsdir);
 
@@ -74,15 +75,15 @@ const mkdirp = (dpath) => fs.promises.mkdir(dpath, { recursive : true });
 function Uploader(prefix, fields) {
   // format the upload directory.  Add a trailing slash for consistency
   const hasTrailingSlash = (prefix[prefix.length - 1] === '/');
-  const directory = path.join(dir, hasTrailingSlash ? prefix : `${prefix}/`);
+  const linkDirectory = path.join(dir, hasTrailingSlash ? prefix : `${prefix}/`);
 
   // configure the storage space using multer's diskStorage.  This will allow
   const storage = multer.diskStorage({
     destination : async (req, file, cb) => {
 
       try {
         // NOTE: need absolute path here for mkdirp
-        const fullFolderPath = path.join(fsdir, directory);
+        const fullFolderPath = path.join(fsdir, hasTrailingSlash ? prefix : `${prefix}/`);
         debug(`creating upload directory ${fullFolderPath}.`);
         await mkdirp(fullFolderPath);
         cb(null, fullFolderPath);
@@ -94,7 +95,7 @@ function Uploader(prefix, fields) {
       const id = uuid();
 
       // ensure that a link is passed to the req.file object
-      file.link = `${directory}${id}`;
+      file.link = `${linkDirectory}${id}`;
       debug(`Storing file in ${file.link}.`);
       cb(null, id);
     },