drag n drop in assets modal

src/components/Assets.jsx

@@ -1,37 +1,64 @@
 import React, { useState, useEffect } from 'react';
 import firebase from 'firebase/app';
 import 'firebase/storage';
+import { Stack } from './Stack';
 
 const Assets = () => {
 	const [files, setFiles] = useState([]);
+	const [isFetchingFiles, setIsFetchingFiles] = useState(false);
 	const [searchTerm, setSearchTerm] = useState('');
 	const [filteredFiles, setFilteredFiles] = useState([]);
+	const [isUploading, setIsUploading] = useState(false);
+	const [uploadProgress, setUploadProgress] = useState();
+	const [listType, setListType] = useState('grid');
+
 	const storageRef = firebase.storage().ref(`assets/${window.user.uid}`);
 
-	// Function to handle file upload
-	const handleFileUpload = e => {
-		const file = e.target.files[0];
-
+	const uploadFile = file => {
 		if (file.size > 5 * 1024 * 1024) {
 			// 5MB limit
 			alert('File size must be less than 5MB');
 			return;
 		}
 
+		setIsUploading(true);
 		const fileRef = storageRef.child(file.name);
-		fileRef
-			.put(file)
-			.then(() => {
-				alert('File uploaded successfully');
-				fetchFiles();
-			})
-			.catch(error => {
+		const task = fileRef.put(file);
+
+		task.on(
+			'state_changed',
+			snapshot => {
+				// Observe state change events such as progress, pause, and resume
+				// Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
+				var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
+				console.log('Upload is ' + progress + '% done');
+			},
+			error => {
+				// Handle unsuccessful uploads
+				setIsUploading(false);
 				console.error('File upload error:', error);
-			});
+			},
+			() => {
+				// uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
+				//   console.log('File available at', downloadURL);
+				// });
+
+				alertsService.add('File uploaded successfully');
+
+				fetchFiles();
+				setIsUploading(false);
+			}
+		);
+	};
+	// Function to handle file upload
+	const handleFileUpload = e => {
+		const file = e.target.files[0];
+		uploadFile(file);
 	};
 
 	// Function to fetch existing files
 	const fetchFiles = () => {
+		setIsFetchingFiles(true);
 		storageRef
 			.listAll()
 			.then(result => {
@@ -42,9 +69,11 @@ const Assets = () => {
 				});
 
 				Promise.all(filePromises).then(setFiles);
+				setIsFetchingFiles(false);
 			})
 			.catch(error => {
 				console.error('File fetch error:', error);
+				setIsFetchingFiles(false);
 			});
 	};
 
@@ -73,56 +102,99 @@ const Assets = () => {
 	const [isDropTarget, setIsDropTarget] = useState(false);
 	const handleDragDropEvent = e => {
 		console.log('drag event, ', e.type);
-		if (e.type === 'dragleave' || e.type === 'drop') {
+		if (e.type === 'dragover') {
+			// required for drop to work
+			e.preventDefault();
+		} else if (e.type === 'dragleave') {
+			e.preventDefault();
 			setIsDropTarget(false);
-		}
-		if (e.type === 'dragenter') {
+		} else if (e.type === 'dragenter') {
 			setIsDropTarget(true);
-			ode;
-			console.log(999, e.type);
 		}
 	};
 
+	const handleDrop = e => {
+		e.preventDefault();
+		console.log('drop');
+		setIsDropTarget(false);
+
+		if (e.dataTransfer.items) {
+			const file = e.dataTransfer.items[0].getAsFile();
+			uploadFile(file);
+		}
+	};
+
+	const copyFileUrl = url => {
+		const input = document.createElement('input');
+		input.value = url;
+		input.style.opacity = 0;
+		document.body.appendChild(input);
+		input.select();
+		document.execCommand('copy');
+		document.body.removeChild(input);
+		alertsService.add('File URL copied!');
+	};
+
 	return (
-		<div>
+		<div
+			onDragEnter={handleDragDropEvent}
+			onDragLeave={handleDragDropEvent}
+			onDragOver={handleDragDropEvent}
+			onDrop={handleDrop}
+		>
 			<div
-				class="asset_manager__upload-box"
+				class="asset-manager__upload-box"
 				style={{
 					background: isDropTarget ? '#19a61940' : 'transparent',
 					borderColor: isDropTarget ? 'limegreen' : null
 				}}
-				onDragEnter={handleDragDropEvent}
-				onDragOver={handleDragDropEvent}
-				onDrop={e => {
-					handleDragDropEvent(e);
-					// setFiles(e, 'a');
-				}}
 			>
-				<p>Drop file here to upload</p>
-				<input
-					type="file"
-					onChange={handleFileUpload}
-					style={{ marginTop: 'auto' }}
-				/>
+				{isUploading ? <div class="asset-manager__progress-bar"></div> : null}
+
+				<div style={{ visibility: isUploading ? 'hidden' : 'visible' }}>
+					<p>Drop file here to upload</p>
+					<input
+						type="file"
+						onChange={handleFileUpload}
+						style={{ marginTop: 'auto' }}
+					/>
+				</div>
 			</div>
+			{isFetchingFiles && <p>Fetching your files...</p>}
 			{files.length ? (
-				<input
-					type="text"
-					placeholder="Search files"
-					value={searchTerm}
-					onChange={handleSearchChange}
-					style={{ width: '100%' }}
-				/>
+				<Stack>
+					<input
+						type="text"
+						placeholder="Search files"
+						value={searchTerm}
+						onChange={handleSearchChange}
+						style={{ width: '100%' }}
+					/>
+					<button onClick={() => setListType('list')}>List</button>
+					<button onClick={() => setListType('grid')}>Grid</button>
+				</Stack>
 			) : null}
-			<ul>
+			<div
+				class={`asset-manager__file-container ${
+					listType === 'grid' ? 'asset-manager__file-container--grid' : ''
+				}`}
+			>
 				{filteredFiles.map((file, index) => (
-					<li key={index}>
-						<a href={file.url} target="_blank" rel="noopener noreferrer">
-							<img src={file.url} height="20" /> {file.name}
-						</a>
-					</li>
+					<button
+						type="button"
+						key={index}
+						onClick={() => copyFileUrl(file.url)}
+						class={`asset-manager__file ${
+							listType === 'grid' ? 'asset-manager__file--grid' : ''
+						}`}
+					>
+						{/* <a href={file.url} target="_blank" rel="noopener noreferrer"> */}
+						<img src={file.url} />{' '}
+						<span class="asset-manager__file-name">{file.name}</span>
+						{/* </a> */}
+					</button>
 				))}
-			</ul>
+			</div>
 		</div>
 	);
 };