fixing percentage calculation and improve some pages

web/src/pages/Settings.tsx

@@ -1,5 +1,5 @@
-import { DeleteOutlined, LogoutOutlined, WarningOutlined } from '@ant-design/icons'
-import { Avatar, Button, Card, Col, Divider, Form, Input, Layout, Modal, notification, Row, Switch, Typography } from 'antd'
+import { CrownOutlined, DeleteOutlined, LogoutOutlined, WarningOutlined } from '@ant-design/icons'
+import { Avatar, Button, Card, Col, Divider, Form, Input, Layout, Modal, notification, Popover, Row, Switch, Typography } from 'antd'
 import { useForm } from 'antd/es/form/Form'
 import React, { useEffect, useState } from 'react'
 import { useHistory } from 'react-router-dom'
@@ -58,7 +58,9 @@ const Settings: React.FC = () => {
             Settings
           </Typography.Title>
           <Card loading={!me && !error}>
-            <Card.Meta avatar={<Avatar size="large" src={`${apiUrl}/users/me/photo`} />} title={me?.user.name} description={me?.user.username} />
+            <Card.Meta avatar={<Avatar size="large" src={`${apiUrl}/users/me/photo`} />} title={<>{me?.user.name} {me?.user?.plan === 'premium' && <Popover placement="top" content={<Layout style={{ padding: '7px 13px' }}>Premium</Layout>}>
+              <CrownOutlined />
+            </Popover>}</>} description={me?.user.username} />
             <Divider />
             <Form layout="horizontal" labelAlign="left" labelCol={{ span: 12 }} wrapperCol={{ span: 12 }}>
               <Form.Item label="Expandable Rows" name="expandable_rows">

web/src/pages/components/Navbar.tsx

@@ -28,7 +28,7 @@ const Navbar: React.FC<Props> = ({ user, page }) => {
     <Layout.Header style={{ background: '#0088CC' }}>
       <div key="logo" className="logo" style={{ marginRight: '30px' }}>
         <Link to="/" style={{ color: '#fff' }}>
-          <img src="/teledrive-logo/logoteledrive-white.png" style={{ height: '24px' }} /> {user?.plan === 'premium' && <Popover placement="bottom" content={<>Premium</>}>
+          <img src="/teledrive-logo/logoteledrive-white.png" style={{ height: '24px' }} /> {user?.plan === 'premium' && <Popover placement="bottom" content={<Layout style={{ padding: '7px 13px' }}>Premium</Layout>}>
             <CrownOutlined />
           </Popover>}
         </Link>

web/src/pages/dashboard/components/Upload.tsx

@@ -22,19 +22,21 @@ const Upload: React.FC<Props> = ({ dataFileList: [fileList, setFileList], parent
       description: 'Please don\'t close/reload this browser'
     })
     // const maxSize = 1024 * 1024 * 1024 * 2
-    const maxSize = 2_000_000_000
+    const maxSize = 2_000_000
+    const chunkSize = 512 * 1024
+
     const fileParts = Math.ceil(file.size / maxSize)
     let deleted = false
 
     try {
       let firstResponse: any
-      let totalParts: number = 1
+      let totalParts: number = 0
+
+      const totalAllParts = Math.ceil(file.size % maxSize / chunkSize) + (fileParts - 1) * Math.ceil(maxSize / chunkSize)
 
       for (let j = 0; j < fileParts; j++) {
         const fileBlob = file.slice(j * maxSize, Math.min(j * maxSize + maxSize, file.size))
-        const chunkSize = 512 * 1024
         const parts = Math.ceil(fileBlob.size / chunkSize)
-        const partName = `.part${j + 1}`
 
         for (let i = 0; i < parts; i++) {
           if (firstResponse?.file && cancelUploading.current && file.uid === cancelUploading.current) {
@@ -50,7 +52,7 @@ const Upload: React.FC<Props> = ({ dataFileList: [fileList, setFileList], parent
           const { data: response } = await req.post(`/files/upload${i > 0 && firstResponse?.file?.id ? `/${firstResponse?.file.id}` : ''}`, data, {
             params: {
               ...parent?.id ? { parent_id: parent.link_id || parent.id || undefined } : {},
-              name: `${file.name}${fileParts > 1 ? partName : ''}`,
+              name: `${file.name}${fileParts > 1 ? `.part${j + 1}` : ''}`,
               size: fileBlob.size,
               mime_type: file.type || mime.lookup(file.name) || 'application/octet-stream',
               part: i,
@@ -59,9 +61,8 @@ const Upload: React.FC<Props> = ({ dataFileList: [fileList, setFileList], parent
           })
           firstResponse = response
 
-          const percent = ((totalParts / (parts * fileParts)) * 100).toFixed(1) // eslint-disable-line
+          const percent = (++totalParts / totalAllParts * 100).toFixed(1)
           onProgress({ percent }, file)
-          totalParts += 1
         }
       }
       // notification.close(`upload-${file.uid}`)