+ fabricCanvasRef.current = canvas}/>
+
+ )
+}
+
+
+export default Canvas
\ No newline at end of file
diff --git a/src/components/cards.js b/src/components/cards.js
new file mode 100644
index 0000000..17ee7d1
--- /dev/null
+++ b/src/components/cards.js
@@ -0,0 +1,113 @@
+import { useEffect, useMemo, useRef } from "react"
+import Draggable from "./utils/draggable"
+
+import { FileImageOutlined, GithubOutlined, GitlabOutlined, LinkOutlined,
+ AudioOutlined, VideoCameraOutlined,
+ FileTextOutlined} from "@ant-design/icons"
+
+
+export function DraggableWidgetCard({name, img, url}){
+
+ const urlIcon = useMemo(() => {
+ if (url){
+ const host = new URL(url).hostname.toLowerCase()
+
+ if (host === "github.com"){
+ return
+
+
+ { file.fileType === "image" &&
+ 
+ }
+
+ {
+ file.fileType === "video" &&
+
+ }
+
+ {
+ file.fileType === "audio" &&
+
+ {file.name}
+
diff --git a/src/sidebar/uploadsContainer.js b/src/sidebar/uploadsContainer.js
new file mode 100644
index 0000000..a811c4d
--- /dev/null
+++ b/src/sidebar/uploadsContainer.js
@@ -0,0 +1,151 @@
+import { useEffect, useMemo, useRef, useState } from "react"
+// import { useDispatch, useSelector } from "react-redux"
+
+import { Upload, message } from "antd"
+
+import { CloseCircleFilled, InboxOutlined, SearchOutlined } from "@ant-design/icons"
+
+import { DraggableAssetCard } from "../components/cards.js"
+import { filterObjectListStartingWith } from "../utils/filter"
+import { getFileType } from "../utils/file.js"
+// import { update } from "../redux/assetSlice.js"
+
+
+
+const { Dragger } = Upload
+const fileTypes = ["JPG", "PNG", "GIF"]
+
+const props = {
+ name: 'file',
+ multiple: true,
+ showUploadList: false,
+ customRequest(options){
+ const { onSuccess, onError, file, onProgress } = options
+ onSuccess("Ok")
+ },
+ // onDrop(e) {
+ // console.log('Dropped files', e.dataTransfer.files)
+ // },
+};
+
+/**
+ * DND for file uploads
+ *
+ */
+function UploadsContainer({assets, onAssetUploadChange}) {
+
+ // const dispatch = useDispatch()
+ // const selector = useSelector(state => state.assets)
+
+ const fileUploadRef = useRef()
+ const [dragEnter, setDragEnter] = useState(false)
+
+ const [searchValue, setSearchValue] = useState("")
+ const [uploadData, setUploadData] = useState(assets) // contains all the uploaded data
+ const [uploadResults, setUploadResults] = useState(assets) // sets search results
+
+ useEffect(() => {
+ setUploadResults(uploadData)
+ }, [uploadData])
+
+ useEffect(() => {
+
+ if (searchValue.length > 0) {
+ const searchData = filterObjectListStartingWith(uploadData, "name", searchValue)
+ setUploadResults(searchData)
+ } else {
+ setUploadResults(uploadData)
+ }
+
+ }, [searchValue])
+
+ function onSearch(event) {
+
+ setSearchValue(event.target.value)
+
+ }
+
+ return (
+
{ setDragEnter(true) }}
+ onDragLeave={(e) => {
+ // Ensure the drag leave is happening on the container and not on a child element
+ if (e.currentTarget.contains(e.relatedTarget)) {
+ return
+ }
+ setDragEnter(false)
+ }}
+ >
+
+
+ )
+
+}
+
+
+export default UploadsContainer
\ No newline at end of file
diff --git a/src/sidebar/widgetsContainer.js b/src/sidebar/widgetsContainer.js
index cea9e9e..204a951 100644
--- a/src/sidebar/widgetsContainer.js
+++ b/src/sidebar/widgetsContainer.js
@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from "react"
import { CloseCircleFilled, SearchOutlined } from "@ant-design/icons"
-import DraggableWidgetCard from "../components/utils/widgetCard"
+import {DraggableWidgetCard} from "../components/cards"
import ButtonWidget from "../assets/widgets/button.png"
diff --git a/src/utils/file.js b/src/utils/file.js
new file mode 100644
index 0000000..8fb4f41
--- /dev/null
+++ b/src/utils/file.js
@@ -0,0 +1,17 @@
+
+const ImageFileExtensions = ["png", "gif", "jpg", "jpeg", "webp"]
+const VideoFileExtensions = ["mp4", "webm", "m4v", "webm"]
+
+export function getFileType(file){
+
+ if (file.type?.startsWith("image") || ImageFileExtensions.includes(file.name.split(".").at(-1))){
+ return "image"
+ }else if (file.type?.startsWith("video") || VideoFileExtensions.includes(file.name.split(".").at(-1))){
+ return "video"
+ }else if(file.type?.startsWith("audio")){
+ return "audio"
+ }
+
+ return "others"
+
+}
\ No newline at end of file
+
+
+ {
+ searchValue.length > 0 &&
+
+ setSearchValue("")}>
+
+ }
+
+ {
+ const { status } = info.file
+
+ if (status === 'done') {
+ // console.log("file: ", info)
+ let previewUrl = ""
+
+ const fileType = getFileType(info.file)
+
+ if (fileType === "image" || fileType === "video"){
+ previewUrl = URL.createObjectURL(info.file.originFileObj)
+ }
+
+ const newFileData = {
+ ...info.file,
+ previewUrl,
+ fileType
+ }
+ // dispatch(update([newFileData, ...uploadData]))
+ setUploadData(prev => [newFileData, ...prev])
+ onAssetUploadChange([newFileData, ...uploadData])
+ setDragEnter(false)
+
+ message.success(`${info.file.name} file uploaded successfully.`)
+ } else if (status === 'error') {
+ message.error(`${info.file.name} file upload failed.`)
+ setDragEnter(false)
+ }
+ }
+ }
+ >
+
+ {
+ uploadResults.map((file, index) => {
+ return (
+
+
+
Click or drag file to this area to upload
+