first commit
This commit is contained in:
239
hooks/use-file-upload.ts
Normal file
239
hooks/use-file-upload.ts
Normal file
@@ -0,0 +1,239 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useCallback } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
export interface UploadOptions {
|
||||
folder?: string
|
||||
type?: 'product-images' | 'category-image' | 'user-avatar' | 'general'
|
||||
productName?: string
|
||||
categoryName?: string
|
||||
userId?: string
|
||||
maxFiles?: number
|
||||
maxSize?: number // in MB
|
||||
allowedTypes?: string[]
|
||||
onProgress?: (progress: number) => void
|
||||
}
|
||||
|
||||
export interface UploadResult {
|
||||
url: string
|
||||
downloadUrl?: string
|
||||
pathname?: string
|
||||
size?: number
|
||||
uploadedAt?: Date
|
||||
type: string
|
||||
}
|
||||
|
||||
export function useFileUpload() {
|
||||
const [uploading, setUploading] = useState(false)
|
||||
const [progress, setProgress] = useState(0)
|
||||
|
||||
const uploadFiles = useCallback(async (
|
||||
files: File[] | FileList,
|
||||
options: UploadOptions = {}
|
||||
): Promise<UploadResult[]> => {
|
||||
const fileArray = Array.from(files)
|
||||
|
||||
// Validate files
|
||||
if (fileArray.length === 0) {
|
||||
throw new Error('No files selected')
|
||||
}
|
||||
|
||||
if (options.maxFiles && fileArray.length > options.maxFiles) {
|
||||
throw new Error(`Maximum ${options.maxFiles} files allowed`)
|
||||
}
|
||||
|
||||
// Validate file types and sizes
|
||||
const maxSizeBytes = (options.maxSize || 10) * 1024 * 1024
|
||||
const allowedTypes = options.allowedTypes || [
|
||||
'image/jpeg',
|
||||
'image/png',
|
||||
'image/webp',
|
||||
'image/gif',
|
||||
'application/pdf'
|
||||
]
|
||||
|
||||
for (const file of fileArray) {
|
||||
if (file.size > maxSizeBytes) {
|
||||
throw new Error(`File "${file.name}" exceeds maximum size of ${options.maxSize || 10}MB`)
|
||||
}
|
||||
|
||||
if (!allowedTypes.includes(file.type)) {
|
||||
throw new Error(`File type "${file.type}" is not allowed`)
|
||||
}
|
||||
}
|
||||
|
||||
setUploading(true)
|
||||
setProgress(0)
|
||||
|
||||
try {
|
||||
const formData = new FormData()
|
||||
|
||||
// Add files
|
||||
fileArray.forEach(file => {
|
||||
formData.append('files', file)
|
||||
})
|
||||
|
||||
// Add options
|
||||
if (options.folder) formData.append('folder', options.folder)
|
||||
if (options.type) formData.append('type', options.type)
|
||||
if (options.productName) formData.append('productName', options.productName)
|
||||
if (options.categoryName) formData.append('categoryName', options.categoryName)
|
||||
if (options.userId) formData.append('userId', options.userId)
|
||||
|
||||
// Create XMLHttpRequest for progress tracking
|
||||
const xhr = new XMLHttpRequest()
|
||||
|
||||
const uploadPromise = new Promise<UploadResult[]>((resolve, reject) => {
|
||||
xhr.upload.addEventListener('progress', (event) => {
|
||||
if (event.lengthComputable) {
|
||||
const progress = Math.round((event.loaded / event.total) * 100)
|
||||
setProgress(progress)
|
||||
options.onProgress?.(progress)
|
||||
}
|
||||
})
|
||||
|
||||
xhr.addEventListener('load', () => {
|
||||
if (xhr.status === 200) {
|
||||
try {
|
||||
const response = JSON.parse(xhr.responseText)
|
||||
if (response.success) {
|
||||
resolve(response.data)
|
||||
} else {
|
||||
reject(new Error(response.message || 'Upload failed'))
|
||||
}
|
||||
} catch (error) {
|
||||
reject(new Error('Invalid response from server'))
|
||||
}
|
||||
} else {
|
||||
reject(new Error(`Upload failed with status ${xhr.status}`))
|
||||
}
|
||||
})
|
||||
|
||||
xhr.addEventListener('error', () => {
|
||||
reject(new Error('Network error during upload'))
|
||||
})
|
||||
|
||||
xhr.open('POST', '/api/upload/files')
|
||||
xhr.send(formData)
|
||||
})
|
||||
|
||||
const result = await uploadPromise
|
||||
toast.success(`Successfully uploaded ${fileArray.length} file(s)`)
|
||||
return result
|
||||
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : 'Upload failed'
|
||||
toast.error(`Upload failed: ${errorMessage}`)
|
||||
throw error
|
||||
} finally {
|
||||
setUploading(false)
|
||||
setProgress(0)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const deleteFile = useCallback(async (url: string): Promise<void> => {
|
||||
try {
|
||||
const response = await fetch(`/api/upload/files?url=${encodeURIComponent(url)}`, {
|
||||
method: 'DELETE'
|
||||
})
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
if (!result.success) {
|
||||
throw new Error(result.message || 'Delete failed')
|
||||
}
|
||||
|
||||
toast.success('File deleted successfully')
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : 'Delete failed'
|
||||
toast.error(`Delete failed: ${errorMessage}`)
|
||||
throw error
|
||||
}
|
||||
}, [])
|
||||
|
||||
const deleteMultipleFiles = useCallback(async (urls: string[]): Promise<void> => {
|
||||
try {
|
||||
const searchParams = new URLSearchParams()
|
||||
urls.forEach(url => searchParams.append('urls', url))
|
||||
|
||||
const response = await fetch(`/api/upload/files?${searchParams.toString()}`, {
|
||||
method: 'DELETE'
|
||||
})
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
if (!result.success) {
|
||||
throw new Error(result.message || 'Delete failed')
|
||||
}
|
||||
|
||||
toast.success(`Successfully deleted ${urls.length} file(s)`)
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : 'Delete failed'
|
||||
toast.error(`Delete failed: ${errorMessage}`)
|
||||
throw error
|
||||
}
|
||||
}, [])
|
||||
|
||||
const listFiles = useCallback(async (options?: {
|
||||
prefix?: string
|
||||
limit?: number
|
||||
cursor?: string
|
||||
}) => {
|
||||
try {
|
||||
const searchParams = new URLSearchParams()
|
||||
if (options?.prefix) searchParams.set('prefix', options.prefix)
|
||||
if (options?.limit) searchParams.set('limit', options.limit.toString())
|
||||
if (options?.cursor) searchParams.set('cursor', options.cursor)
|
||||
|
||||
const response = await fetch(`/api/upload/files?${searchParams.toString()}`)
|
||||
const result = await response.json()
|
||||
|
||||
if (!result.success) {
|
||||
throw new Error(result.message || 'Failed to list files')
|
||||
}
|
||||
|
||||
return result.data
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : 'Failed to list files'
|
||||
toast.error(errorMessage)
|
||||
throw error
|
||||
}
|
||||
}, [])
|
||||
|
||||
return {
|
||||
uploadFiles,
|
||||
deleteFile,
|
||||
deleteMultipleFiles,
|
||||
listFiles,
|
||||
uploading,
|
||||
progress
|
||||
}
|
||||
}
|
||||
|
||||
// Utility function to get optimized image URL
|
||||
export function getOptimizedImageUrl(
|
||||
originalUrl: string,
|
||||
options?: {
|
||||
width?: number
|
||||
height?: number
|
||||
quality?: number
|
||||
format?: 'webp' | 'jpeg' | 'png'
|
||||
}
|
||||
): string {
|
||||
if (!options) return originalUrl
|
||||
|
||||
const url = new URL(originalUrl)
|
||||
const searchParams = new URLSearchParams()
|
||||
|
||||
if (options.width) searchParams.set('w', options.width.toString())
|
||||
if (options.height) searchParams.set('h', options.height.toString())
|
||||
if (options.quality) searchParams.set('q', options.quality.toString())
|
||||
if (options.format) searchParams.set('f', options.format)
|
||||
|
||||
if (searchParams.toString()) {
|
||||
url.search = searchParams.toString()
|
||||
}
|
||||
|
||||
return url.toString()
|
||||
}
|
||||
191
hooks/use-toast.ts
Normal file
191
hooks/use-toast.ts
Normal file
@@ -0,0 +1,191 @@
|
||||
'use client';
|
||||
|
||||
// Inspired by react-hot-toast library
|
||||
import * as React from 'react';
|
||||
|
||||
import type { ToastActionElement, ToastProps } from '@/components/ui/toast';
|
||||
|
||||
const TOAST_LIMIT = 1;
|
||||
const TOAST_REMOVE_DELAY = 1000000;
|
||||
|
||||
type ToasterToast = ToastProps & {
|
||||
id: string;
|
||||
title?: React.ReactNode;
|
||||
description?: React.ReactNode;
|
||||
action?: ToastActionElement;
|
||||
};
|
||||
|
||||
const actionTypes = {
|
||||
ADD_TOAST: 'ADD_TOAST',
|
||||
UPDATE_TOAST: 'UPDATE_TOAST',
|
||||
DISMISS_TOAST: 'DISMISS_TOAST',
|
||||
REMOVE_TOAST: 'REMOVE_TOAST',
|
||||
} as const;
|
||||
|
||||
let count = 0;
|
||||
|
||||
function genId() {
|
||||
count = (count + 1) % Number.MAX_SAFE_INTEGER;
|
||||
return count.toString();
|
||||
}
|
||||
|
||||
type ActionType = typeof actionTypes;
|
||||
|
||||
type Action =
|
||||
| {
|
||||
type: ActionType['ADD_TOAST'];
|
||||
toast: ToasterToast;
|
||||
}
|
||||
| {
|
||||
type: ActionType['UPDATE_TOAST'];
|
||||
toast: Partial<ToasterToast>;
|
||||
}
|
||||
| {
|
||||
type: ActionType['DISMISS_TOAST'];
|
||||
toastId?: ToasterToast['id'];
|
||||
}
|
||||
| {
|
||||
type: ActionType['REMOVE_TOAST'];
|
||||
toastId?: ToasterToast['id'];
|
||||
};
|
||||
|
||||
interface State {
|
||||
toasts: ToasterToast[];
|
||||
}
|
||||
|
||||
const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
|
||||
|
||||
const addToRemoveQueue = (toastId: string) => {
|
||||
if (toastTimeouts.has(toastId)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const timeout = setTimeout(() => {
|
||||
toastTimeouts.delete(toastId);
|
||||
dispatch({
|
||||
type: 'REMOVE_TOAST',
|
||||
toastId: toastId,
|
||||
});
|
||||
}, TOAST_REMOVE_DELAY);
|
||||
|
||||
toastTimeouts.set(toastId, timeout);
|
||||
};
|
||||
|
||||
export const reducer = (state: State, action: Action): State => {
|
||||
switch (action.type) {
|
||||
case 'ADD_TOAST':
|
||||
return {
|
||||
...state,
|
||||
toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
|
||||
};
|
||||
|
||||
case 'UPDATE_TOAST':
|
||||
return {
|
||||
...state,
|
||||
toasts: state.toasts.map((t) =>
|
||||
t.id === action.toast.id ? { ...t, ...action.toast } : t
|
||||
),
|
||||
};
|
||||
|
||||
case 'DISMISS_TOAST': {
|
||||
const { toastId } = action;
|
||||
|
||||
// ! Side effects ! - This could be extracted into a dismissToast() action,
|
||||
// but I'll keep it here for simplicity
|
||||
if (toastId) {
|
||||
addToRemoveQueue(toastId);
|
||||
} else {
|
||||
state.toasts.forEach((toast) => {
|
||||
addToRemoveQueue(toast.id);
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
...state,
|
||||
toasts: state.toasts.map((t) =>
|
||||
t.id === toastId || toastId === undefined
|
||||
? {
|
||||
...t,
|
||||
open: false,
|
||||
}
|
||||
: t
|
||||
),
|
||||
};
|
||||
}
|
||||
case 'REMOVE_TOAST':
|
||||
if (action.toastId === undefined) {
|
||||
return {
|
||||
...state,
|
||||
toasts: [],
|
||||
};
|
||||
}
|
||||
return {
|
||||
...state,
|
||||
toasts: state.toasts.filter((t) => t.id !== action.toastId),
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const listeners: Array<(state: State) => void> = [];
|
||||
|
||||
let memoryState: State = { toasts: [] };
|
||||
|
||||
function dispatch(action: Action) {
|
||||
memoryState = reducer(memoryState, action);
|
||||
listeners.forEach((listener) => {
|
||||
listener(memoryState);
|
||||
});
|
||||
}
|
||||
|
||||
type Toast = Omit<ToasterToast, 'id'>;
|
||||
|
||||
function toast({ ...props }: Toast) {
|
||||
const id = genId();
|
||||
|
||||
const update = (props: ToasterToast) =>
|
||||
dispatch({
|
||||
type: 'UPDATE_TOAST',
|
||||
toast: { ...props, id },
|
||||
});
|
||||
const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id });
|
||||
|
||||
dispatch({
|
||||
type: 'ADD_TOAST',
|
||||
toast: {
|
||||
...props,
|
||||
id,
|
||||
open: true,
|
||||
onOpenChange: (open) => {
|
||||
if (!open) dismiss();
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
id: id,
|
||||
dismiss,
|
||||
update,
|
||||
};
|
||||
}
|
||||
|
||||
function useToast() {
|
||||
const [state, setState] = React.useState<State>(memoryState);
|
||||
|
||||
React.useEffect(() => {
|
||||
listeners.push(setState);
|
||||
return () => {
|
||||
const index = listeners.indexOf(setState);
|
||||
if (index > -1) {
|
||||
listeners.splice(index, 1);
|
||||
}
|
||||
};
|
||||
}, [state]);
|
||||
|
||||
return {
|
||||
...state,
|
||||
toast,
|
||||
dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
|
||||
};
|
||||
}
|
||||
|
||||
export { useToast, toast };
|
||||
Reference in New Issue
Block a user