AeThex-OS/shell/aethex-shell/src-webos/hooks/use-device-file-picker.ts

81 lines
1.9 KiB
TypeScript

import { useState, useCallback } from 'react';
export interface FileResult {
name: string;
size: number;
type: string;
dataUrl?: string;
}
export function useDeviceFilePicker() {
const [file, setFile] = useState<FileResult | null>(null);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const pickFile = useCallback(async () => {
try {
setIsLoading(true);
setError(null);
// Use web file input as fallback
const input = document.createElement('input');
input.type = 'file';
input.accept = '*/*';
const filePromise = new Promise<File | null>((resolve) => {
input.onchange = (e) => {
const target = e.target as HTMLInputElement;
resolve(target.files?.[0] || null);
};
input.oncancel = () => resolve(null);
});
input.click();
const selectedFile = await filePromise;
if (!selectedFile) {
return null;
}
// Read file as data URL
const reader = new FileReader();
const dataUrlPromise = new Promise<string>((resolve, reject) => {
reader.onload = () => resolve(reader.result as string);
reader.onerror = reject;
});
reader.readAsDataURL(selectedFile);
const dataUrl = await dataUrlPromise;
const result: FileResult = {
name: selectedFile.name,
size: selectedFile.size,
type: selectedFile.type,
dataUrl,
};
setFile(result);
return result;
} catch (err) {
const message = err instanceof Error ? err.message : 'File picker error';
setError(message);
console.error('[File Picker Error]', err);
return null;
} finally {
setIsLoading(false);
}
}, []);
const clearFile = useCallback(() => {
setFile(null);
setError(null);
}, []);
return {
file,
isLoading,
error,
pickFile,
clearFile,
};
}