use an api call to get max_upload_size and max_upload_time

fix elabftw#5232
There was a problem with this setting being a build arg

Author: NicolasCARPi

apidoc/v2/openapi.yaml

@@ -1715,13 +1715,23 @@ paths:
                 type: object
                 properties:
                   allowed_extensions:
+                    description: allowlist of file extensions accepted for import
                     type: array
                     items:
                       type: string
                     example: [".eln", ".csv"]
                   max_filesize:
+                    description: maximum size of an uploaded file in bytes
                     type: integer
                     example: 2147483648
+                  max_upload_size:
+                    description: value of MAX_UPLOAD_SIZE env parameter
+                    type: string
+                    example: 3G
+                  max_upload_time:
+                    description: value of MAX_UPLOAD_TIME env parameter
+                    type: integer
+                    example: 900000
     post:
       tags: ['Import']
       summary: Send a file to import

builder.js

@@ -94,11 +94,6 @@ module.exports = (env) => {
       ],
     },
     plugins: [
-      // https://webpack.js.org/plugins/define-plugin/
-      new webpack.DefinePlugin({
-            '__MAX_UPLOAD_SIZE__': JSON.stringify(env.MAX_UPLOAD_SIZE),
-            '__MAX_UPLOAD_TIME__': JSON.stringify(env.MAX_UPLOAD_TIME),
-        }),
       new MiniCssExtractPlugin(
         {
           filename: 'vendor.min.css',

package.json

@@ -81,9 +81,9 @@
     "apidocv2": "docker run --name swagger --rm -e SWAGGER_JSON=/c/openapi.yaml -v $(pwd)/apidoc/v2/:/c -p 8085:8080 -d swaggerapi/swagger-ui && echo 'APIv2 Doc: http://localhost:8085' && echo 'Run docker stop swagger to remove it.'",
     "brotli": "brotli -vf web/assets/*.css web/assets/*.js web/assets/*.svg web/assets/images/*.svg",
     "zopfli": "zopfli -i1000 web/assets/*.css web/assets/*.js web/assets/*.svg web/assets/images/*.svg",
-    "build": "webpack-cli --env MAX_UPLOAD_SIZE=$MAX_UPLOAD_SIZE --env MAX_UPLOAD_TIME=$MAX_UPLOAD_TIME --progress --config builder.js",
-    "build:dev": "webpack-cli --env MAX_UPLOAD_SIZE=$MAX_UPLOAD_SIZE --env MAX_UPLOAD_TIME=$MAX_UPLOAD_TIME --config builder.js",
-    "build:prod": "webpack-cli --env MAX_UPLOAD_SIZE=$MAX_UPLOAD_SIZE --env MAX_UPLOAD_TIME=$MAX_UPLOAD_TIME --mode production --env production --config builder.js",
+    "build": "webpack-cli --progress --config builder.js",
+    "build:dev": "webpack-cli --config builder.js",
+    "build:prod": "webpack-cli --mode production --env production --config builder.js",
     "buildnode": "webpack-cli --progress --config node-builder.js",
     "buildnode:dev": "webpack-cli --config node-builder.js",
     "buildall": "CYPRESS_INSTALL_BINARY=0 yarn install --immutable && yarn buildjs && yarn buildcss && yarn buildparser && yarn brotli && yarn zopfli",
@@ -120,7 +120,7 @@
     "unit": "tests/run.sh unit",
     "unit-ci": "php vendor/bin/codecept run unit",
     "watchpdfcss": "sass --quiet-deps --watch src/scss/pdf.scss:web/assets/pdf.min.css",
-    "watchjs": "webpack-cli --env MAX_UPLOAD_SIZE=$MAX_UPLOAD_SIZE --env MAX_UPLOAD_TIME=$MAX_UPLOAD_TIME  --config builder.js --mode=development --watch --progress",
+    "watchjs": "webpack-cli --config builder.js --mode=development --watch --progress",
     "watchnode": "webpack-cli --config node-builder.js --mode=development --watch --progress"
   },
   "repository": "git+https://github.com/elabftw/elabftw.git",

src/Import/Handler.php

@@ -21,6 +21,7 @@
 use Elabftw\Interfaces\ImportInterface;
 use Elabftw\Interfaces\RestInterface;
 use Elabftw\Models\AuditLogs;
+use Elabftw\Models\Config;
 use Elabftw\Models\Users;
 use Psr\Log\LoggerInterface;
 use Symfony\Component\HttpFoundation\File\UploadedFile;
@@ -41,6 +42,8 @@ public function readOne(): array
         return array(
             'allowed_extensions' => self::ALLOWED_EXTENSIONS,
             'max_filesize' => UploadedFile::getMaxFilesize(),
+            'max_upload_size' => Config::fromEnv('MAX_UPLOAD_SIZE'),
+            'max_upload_time' => (int) Config::fromEnv('MAX_UPLOAD_TIME'),
         );
     }
 

src/ts/edit.ts

@@ -45,7 +45,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 
   // initialize the file uploader
   const uploader = new Uploader();
-  const dropZone = uploader.init();
+  const dropZone = await uploader.init();
 
   ////////////////
   // DATA RECOVERY

src/ts/global.d.ts

@@ -674,7 +674,7 @@ export function sizeToMb(size: string): number {
   };
 
   const regex = /^(\d+(?:\.\d+)?)([BKMGTPE]?)$/i;
-  const match = size.match(regex);
+  const match = size.toString().match(regex);
 
   if (!match) {
     throw new Error('Invalid size format');

src/ts/misc.ts

@@ -8,21 +8,23 @@
 import Dropzone from '@deltablot/dropzone';
 import { reloadElements, sizeToMb } from './misc';
 import i18next from 'i18next';
+import { Api } from './Apiv2.class';
 
 export class Uploader
 {
   // holds the resolve function of tinymce image handler
   tinyImageSuccess: (value: string | PromiseLike<string>) => void;
 
-  getOptions() {
+  async getOptions() {
     /* eslint-disable-next-line @typescript-eslint/no-this-alias */
     const that = this;
-    const sizeInMb = sizeToMb(__MAX_UPLOAD_SIZE__);
+    const importInfo = await (new Api()).getJson('import');
+    const sizeInMb = sizeToMb(importInfo.max_upload_size);
     return {
       // i18n message to user
       dictDefaultMessage: `<i class='fas fa-upload'></i> ${i18next.t('dropzone-upload-area')}<br> ${i18next.t('dropzone-filesize-limit')} ${sizeInMb} MB`,
       maxFilesize: sizeInMb,
-      timeout: __MAX_UPLOAD_TIME__,
+      timeout: importInfo.max_upload_time,
       init: function(): void {
         // once upload is finished
         this.on('complete', function() {
@@ -39,15 +41,15 @@ export class Uploader
                 // The 'undefined' check is not enough. That is just for before any file was pasted.
                 that.tinyImageSuccess = null;
               }
-              that.init();
+              this.init();
             });
           }
         });
       },
     };
   }
 
-  init(): Dropzone {
+  async init(): Promise<Dropzone> {
     // FIXME just added "as any" for now
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const dropzoneEl = document.getElementById('elabftw-dropzone') as any;
@@ -56,7 +58,7 @@ export class Uploader
       if (Object.prototype.hasOwnProperty.call(dropzoneEl, 'dropzone')) {
         return dropzoneEl.dropzone;
       }
-      return new Dropzone(dropzoneEl, this.getOptions());
+      return new Dropzone(dropzoneEl, await this.getOptions());
     }
   }
 }