API & Client: set file size limit for upload - fix #33

fittrackee_client/src/components/Activity/ActivityForms/FormWithGpx.jsx

@@ -4,11 +4,14 @@ import { connect } from 'react-redux'
 import { setLoading } from '../../../actions/index'
 import { addActivity, editActivity } from '../../../actions/activities'
 import { history } from '../../../index'
-import { gpxLimit } from '../../../utils'
+import { fileSizeLimit, gpxLimit, zipSizeLimit } from '../../../utils'
 
 function FormWithGpx(props) {
   const { activity, loading, onAddActivity, onEditActivity, sports } = props
   const sportId = activity ? activity.sport_id : ''
+  // prettier-ignore
+  const zipTooltip =
+    `no folder inside, ${gpxLimit} files max, max size: ${zipSizeLimit}`
   return (
     <form
       encType="multipart/form-data"
@@ -49,10 +52,28 @@ function FormWithGpx(props) {
       ) : (
         <div className="form-group">
           <label>
-            {/* prettier-ignore */}
-            <strong>gpx</strong> file or <strong>zip</strong> file containing
-            {/* prettier-ignore */}
-            <strong> gpx</strong> (no folder inside, {gpxLimit} files max):
+            <strong>gpx</strong> file
+            <sup>
+              <i
+                className="fa fa-question-circle"
+                aria-hidden="true"
+                data-toggle="tooltip"
+                data-placement="top"
+                title={`max size: ${fileSizeLimit}`}
+              />
+            </sup>{' '}
+            or <strong> zip</strong> file containing <strong>gpx </strong>
+            files
+            <sup>
+              <i
+                className="fa fa-question-circle"
+                aria-hidden="true"
+                data-toggle="tooltip"
+                data-placement="top"
+                title={zipTooltip}
+              />
+            </sup>{' '}
+            :
             <input
               accept=".gpx, .zip"
               className="form-control form-control-file gpx-file"

fittrackee_client/src/components/User/Profile.jsx

@@ -5,7 +5,7 @@ import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 
 import { deletePicture, uploadPicture } from '../../actions/user'
-import { apiUrl } from '../../utils'
+import { apiUrl, fileSizeLimit } from '../../utils'
 
 function Profile({ message, onDeletePicture, onUploadPicture, user }) {
   const createdAt = user.created_at
@@ -76,7 +76,8 @@ function Profile({ message, onDeletePicture, onUploadPicture, user }) {
                         accept=".png,.jpg,.gif"
                       />
                       <br />
-                      <button type="submit">Send</button>
+                      <button type="submit">Send</button> (max. size:{' '}
+                      {fileSizeLimit})
                     </form>
                   </div>
                 </div>

fittrackee_client/src/utils/index.js

@@ -1,6 +1,15 @@
 import { format, parse } from 'date-fns'
 import { DateTime } from 'luxon'
 
+const suffixes = ['bytes', 'KB', 'MB', 'GB', 'TB']
+const getFileSize = fileSize => {
+  const i = Math.floor(Math.log(fileSize) / Math.log(1024))
+  return (
+    (!fileSize && '0 bytes') ||
+    `${(fileSize / Math.pow(1024, i)).toFixed(1)}${suffixes[i]}`
+  )
+}
+
 export const version = '0.2.1-beta' // version stored in 'utils' for now
 export const apiUrl = `${process.env.REACT_APP_API_URL}/api/`
 /* prettier-ignore */
@@ -8,6 +17,12 @@ export const thunderforestApiKey = `${
   process.env.REACT_APP_THUNDERFOREST_API_KEY
 }`
 export const gpxLimit = `${process.env.REACT_APP_GPX_LIMIT_IMPORT}`
+export const fileSizeLimit = getFileSize(
+  +process.env.REACT_APP_MAX_SINGLE_FILE_SIZE
+)
+export const zipSizeLimit = getFileSize(
+  +process.env.REACT_APP_MAX_ZIP_FILE_SIZE
+)
 export const isRegistrationAllowed =
   process.env.REACT_APP_ALLOW_REGISTRATION !== 'false'