update src/components/UploadFile/UploadDesign1/index.js

src/components/UploadFile/UploadDesign1/index.js

@@ -6,6 +6,7 @@ export default class UploadDesign1 extends Component {
   state = {
     uploadPercentage: 0,
     avatar: "",
+    fileName: "",
   };
 
   UploadDesign1 = ({ target: { files } }) => {
@@ -47,7 +48,10 @@ export default class UploadDesign1 extends Component {
           <div className="">
             <img src="images/UploadFilefile.svg" className="" alt="" />
             <input
-              onChange={this.uploadFile}
+              onChange={(e) => {
+                this.setState({ fileName: e.target.files[0].name });
+                this.uploadFile();
+              }}
               type="file"
               className="opacity-0 absolute top-[39%] left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-20 cursor-pointer"
               name=""
@@ -91,6 +95,7 @@ export default class UploadDesign1 extends Component {
                 className={`bg-[#68A8E6] h-3 rounded duration-500 w-72`}
               ></div>
             </div>
+            <p className="bg-red-400">{this.state.fileName}</p>
           </div>
         </div>
       </div>