update

src/components/UploadFile/images/pause.svg

@@ -0,0 +1,7 @@
+<svg id="vuesax_linear_pause" data-name="vuesax/linear/pause" xmlns="http://www.w3.org/2000/svg" width="12.942" height="12.942" viewBox="0 0 12.942 12.942">
+  <g id="pause" transform="translate(0 0)">
+    <path id="Vector" d="M4.125,8.687V1.019C4.125.291,3.818,0,3.041,0H1.084C.307,0,0,.291,0,1.019V8.687c0,.728.307,1.019,1.084,1.019H3.041C3.818,9.706,4.125,9.415,4.125,8.687Z" transform="translate(1.618 1.618)" fill="#65a9ff"/>
+    <path id="Vector-2" data-name="Vector" d="M4.125,8.687V1.019C4.125.291,3.818,0,3.041,0H1.084C.313,0,0,.291,0,1.019V8.687c0,.728.307,1.019,1.084,1.019H3.041C3.818,9.706,4.125,9.415,4.125,8.687Z" transform="translate(7.199 1.618)" fill="#65a9ff"/>
+    <path id="Vector-3" data-name="Vector" d="M0,0H12.942V12.942H0Z" fill="#65a9ff" opacity="0"/>
+  </g>
+</svg>

src/components/UploadFile/index.js

@@ -1,6 +1,8 @@
 import React, { Component } from "react";
 
 import file from "./images/file.svg";
+
+import pause from "./images/pause.svg";
 import axios from "axios";
 
 export default class UploadFile extends Component {
@@ -42,28 +44,48 @@ export default class UploadFile extends Component {
     const { uploadPercentage } = this.state;
 
     return (
-      <div className=" relative bg-white w-full flex flex-col items-center px-4 py-7 rounded-lg border-2 border-dashed border-blue-300 mt-5">
-        <div className=" ">
-          <img src={file} className="" />
-          <input
-            onChange={this.uploadFile}
-            type="file"
-            className="opacity-0 absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-20 cursor-pointer"
-            style={{ top: "39%" }}
-            name=""
-          />{" "}
-          {uploadPercentage > 0 && (
-            <div
-              className="w-50 bg-red-500 h-2 z-50"
-              now={uploadPercentage}
-              label={`${uploadPercentage}%`}
-            ></div>
-          )}
+      <div>
+        {/* ? upload input File  */}
+        <div className="relative bg-white w-full flex flex-col items-center px-4 py-7 rounded-lg border-2 border-dashed border-blue-300 mt-5">
+          <div className=" ">
+            <img src={file} className="" />
+            <input
+              onChange={this.uploadFile}
+              type="file"
+              className="opacity-0 absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-20 cursor-pointer"
+              style={{ top: "39%" }}
+              name=""
+            />
+            {uploadPercentage > 0 && (
+              <div
+                className="w-50 bg-red-500 h-2 z-50"
+                now={uploadPercentage}
+                label={`${uploadPercentage}%`}
+              ></div>
+            )}
+          </div>
+          <p className="text-xs mt-5">
+            یک فایل را اینجا بکشید یا از{" "}
+            <span className="text-blue-300">رایانه خود انتخاب کنید</span>
+          </p>
+        </div>
+        {/* upload file progress bar */}
+        <div className="flex flex-row items-center justify-between border border-blue-500 mt-5 rounded-lg p-2">
+          {/* right section */}
+          <div className="flex flex-col gap-y-2">
+            <span className="text-xs text-blue-900">در حال آپلود فایل ...</span>
+            <span className="text-xs text-blue-900">AdobeXD.zip</span>
+          </div>
+          {/* left section */}
+          <div className="flex flex-row items-center">
+            <span className="text-xs">65 درصد</span>
+            <span className="text-xs">3 دقیقه باقیمانده</span>
+            {/* pause button */}
+            <div className="bg-blue-100 bg-opacity-50 p-2 rounded-full cursor-pointer">
+              <img src={pause} />
+            </div>
+          </div>
         </div>
-        <p className="text-xs mt-5">
-          یک فایل را اینجا بکشید یا از{" "}
-          <span className="text-blue-300">رایانه خود انتخاب کنید</span>
-        </p>
       </div>
     );
   }