Refactor code to remove dependency

Author: cp-dharti-r

README.md

@@ -69,7 +69,7 @@ yarn add @canopassoftware/vue-file-upload
 
 ## Examples
 
-We are providing some examples with design. so, you can easily take it and use into your project.
+We are providing some examples with design. so, you can easily use it in your project.
 
 ### Canvas View
 

next.config.js

@@ -1,8 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  images: {
-    domains: ["picsum.photos"],
-  },
-};
+const nextConfig = {};
 
 module.exports = nextConfig;

src/app/page.tsx

@@ -3,12 +3,14 @@
 import Image from "next/image";
 import React, { useState } from "react";
 import SingleFileUpload from "../components/singleFile";
+import img from "../assets/images/example-img.jpg";
+import { StaticImageData } from "next/image";
 
 export default function App() {
   const [previewFileData, setPreviewFileData] = useState(
     {} as {
       previewType: string;
-      previewUrl: string | ArrayBuffer | null;
+      previewUrl: string | StaticImageData | ArrayBuffer | null;
       previewName: string;
       isDragging: boolean;
     }
@@ -18,7 +20,7 @@ export default function App() {
     await new Promise((resolve) => setTimeout(resolve, 2000));
     setPreviewFileData({
       previewType: "image",
-      previewUrl: "https://picsum.photos/300/224",
+      previewUrl: img,
       previewName: file.name,
       isDragging: false,
     });
@@ -27,7 +29,7 @@ export default function App() {
   return (
     <main className="min-h-screen flex flex-col justify-between p-5">
       <SingleFileUpload
-        uploadedFile={setPreviewFileData}
+        uploadedFile={[previewFileData, setPreviewFileData]}
         callback={handleFileUploading}
         uploadBtn={"Save"}
         progressBtn={"Saving..."}

src/assets/images/example-img.jpg

@@ -24,8 +24,9 @@ export default function SingleFileUpload({
   filePreview = filePreviewImg,
   children,
 }: any) {
+  const [previewFileData, setPreviewFileData] = uploadedFile;
   const [isUploading, setIsUploading] = useState(false);
-  const [fileObj, setFileObj] = useState({});
+  const [fileObj, setFileObj] = useState(null);
 
   const fileData = {} as {
     previewType: string;
@@ -80,7 +81,7 @@ export default function SingleFileUpload({
       }
       fileData.previewName = file.name;
       setFileObj(file);
-      uploadedFile(fileData);
+      setPreviewFileData(fileData);
     };
     reader.onerror = (error) => {
       console.error(`Error while reading file ${file.name}: ${error}`);
@@ -89,11 +90,13 @@ export default function SingleFileUpload({
   };
 
   const uploadingFunction = async () => {
+    if (isUploading) {
+      return;
+    }
     setIsUploading(true);
 
     await callback(fileObj);
-
-    console.log(uploadedFile)
+    setFileObj(previewFileData);
 
     setIsUploading(false);
   };