@sqlrooms/dropzone 0.6.0 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +107 -0
- package/dist/file-dropzone.js +1 -1
- package/dist/file-dropzone.js.map +1 -1
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -0
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
package/README.md
ADDED
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
This package is part of the SQLRooms framework.
|
|
2
|
+
|
|
3
|
+
A flexible file upload component for SQLRooms applications that provides drag-and-drop functionality for files. This package makes it easy to handle file uploads with a modern, user-friendly interface.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- 📁 **Drag and Drop**: Intuitive drag-and-drop file upload interface
|
|
8
|
+
- 📋 **File Selection**: Traditional file selection dialog support
|
|
9
|
+
- 🔍 **File Validation**: Validate file types and sizes
|
|
10
|
+
- 📊 **Upload Progress**: Track and display upload progress
|
|
11
|
+
- 🎨 **Customizable**: Flexible styling and configuration options
|
|
12
|
+
- 🧩 **React Integration**: Seamless integration with React applications
|
|
13
|
+
|
|
14
|
+
## Installation
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install @sqlrooms/dropzone
|
|
18
|
+
# or
|
|
19
|
+
yarn add @sqlrooms/dropzone
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Basic Usage
|
|
23
|
+
|
|
24
|
+
### Simple File Dropzone
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
import {FileDropzone} from '@sqlrooms/dropzone';
|
|
28
|
+
|
|
29
|
+
function MyFileUploader() {
|
|
30
|
+
const handleFileDrop = (files) => {
|
|
31
|
+
console.log('Files dropped:', files);
|
|
32
|
+
// Process the files...
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<FileDropzone
|
|
37
|
+
onFileDrop={handleFileDrop}
|
|
38
|
+
accept=".csv,.json,.xlsx"
|
|
39
|
+
maxSize={10 * 1024 * 1024} // 10MB
|
|
40
|
+
/>
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### With Custom Styling
|
|
46
|
+
|
|
47
|
+
```tsx
|
|
48
|
+
import {FileDropzone} from '@sqlrooms/dropzone';
|
|
49
|
+
|
|
50
|
+
function CustomStyledDropzone() {
|
|
51
|
+
return (
|
|
52
|
+
<FileDropzone
|
|
53
|
+
onFileDrop={handleFiles}
|
|
54
|
+
className="border-2 border-dashed border-blue-400 rounded-lg p-8 hover:border-blue-600 transition-colors"
|
|
55
|
+
activeClassName="border-green-500 bg-green-50"
|
|
56
|
+
rejectClassName="border-red-500 bg-red-50"
|
|
57
|
+
dragMessage="Drop your files here"
|
|
58
|
+
idleMessage="Drag files or click to upload"
|
|
59
|
+
rejectMessage="File type not supported"
|
|
60
|
+
/>
|
|
61
|
+
);
|
|
62
|
+
}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### With File Type Validation
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
import {FileDropzone} from '@sqlrooms/dropzone';
|
|
69
|
+
|
|
70
|
+
function DataFileUploader() {
|
|
71
|
+
const handleFileDrop = (files) => {
|
|
72
|
+
// Process data files...
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
return (
|
|
76
|
+
<div className="p-4 border rounded-lg">
|
|
77
|
+
<h2 className="text-xl font-bold mb-2">Upload Data Files</h2>
|
|
78
|
+
<p className="mb-4 text-gray-600">
|
|
79
|
+
Supported formats: CSV, JSON, Excel, Parquet
|
|
80
|
+
</p>
|
|
81
|
+
<FileDropzone
|
|
82
|
+
onFileDrop={handleFileDrop}
|
|
83
|
+
accept={{
|
|
84
|
+
'text/csv': ['.csv'],
|
|
85
|
+
'application/json': ['.json'],
|
|
86
|
+
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': [
|
|
87
|
+
'.xlsx',
|
|
88
|
+
],
|
|
89
|
+
'application/octet-stream': ['.parquet'],
|
|
90
|
+
}}
|
|
91
|
+
maxFiles={5}
|
|
92
|
+
maxSize={50 * 1024 * 1024} // 50MB
|
|
93
|
+
/>
|
|
94
|
+
</div>
|
|
95
|
+
);
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## Advanced Features
|
|
100
|
+
|
|
101
|
+
- **Multiple File Upload**: Support for uploading multiple files at once
|
|
102
|
+
- **File Preview**: Preview files before uploading
|
|
103
|
+
- **Custom Validation**: Define custom validation rules for files
|
|
104
|
+
- **Upload Cancellation**: Cancel ongoing uploads
|
|
105
|
+
- **Accessibility**: Fully accessible interface with keyboard support
|
|
106
|
+
|
|
107
|
+
For more information, visit the SQLRooms documentation.
|
package/dist/file-dropzone.js
CHANGED
|
@@ -59,6 +59,6 @@ export const FileDropzone = (props) => {
|
|
|
59
59
|
noClick: true,
|
|
60
60
|
noKeyboard: true,
|
|
61
61
|
});
|
|
62
|
-
return (_jsx("div", { className: cn('relative flex h-full cursor-pointer flex-col overflow-hidden rounded-lg border-2 border-dashed p-2 transition-colors', isDragActive ? 'border-muted bg-muted/50' : 'border-muted', isInvalid && 'border-destructive', !isAddingDropped && 'hover:border-muted', className), ...getRootProps(), onClick: isAddingDropped ? undefined : open, children: isAddingDropped ? (_jsxs("div", { className: "flex h-full w-full items-center justify-center gap-4 text-xs text-muted-foreground", children: [_jsx(Spinner, { className: "h-4 w-4" }), "Adding files..."] })) : (_jsxs(_Fragment, { children: [_jsx("input", { ...getInputProps() }), _jsx("div", { className: "relative flex h-full flex-col", children: _jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Plus, { className: "h-6 w-6" }), _jsx("p", { className: "text-sm text-muted-foreground", children: isDragActive ? 'Drop here ...' : 'Add files' })] }), acceptedFormats && (_jsxs("div", { className: "flex flex-wrap justify-center gap-2", children: [_jsx("p", { className: "text-xs font-bold", children: "Supported formats:" }), _jsx("p", { className: "text-xs text-muted-foreground", children: Object.values(acceptedFormats).flat().join(', ') })] })), children] }) })] })) }));
|
|
62
|
+
return (_jsx("div", { className: cn('relative flex h-full min-h-[180px] cursor-pointer flex-col overflow-hidden rounded-lg border-2 border-dashed p-2 transition-colors', isDragActive ? 'border-muted bg-muted/50' : 'border-muted', isInvalid && 'border-destructive', !isAddingDropped && 'hover:border-muted', className), ...getRootProps(), onClick: isAddingDropped ? undefined : open, children: isAddingDropped ? (_jsxs("div", { className: "flex h-full w-full items-center justify-center gap-4 text-xs text-muted-foreground", children: [_jsx(Spinner, { className: "h-4 w-4" }), "Adding files..."] })) : (_jsxs(_Fragment, { children: [_jsx("input", { ...getInputProps() }), _jsx("div", { className: "relative flex h-full flex-col", children: _jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Plus, { className: "h-6 w-6" }), _jsx("p", { className: "text-sm text-muted-foreground", children: isDragActive ? 'Drop here ...' : 'Add files' })] }), acceptedFormats && (_jsxs("div", { className: "flex flex-wrap justify-center gap-2", children: [_jsx("p", { className: "text-xs font-bold", children: "Supported formats:" }), _jsx("p", { className: "text-xs text-muted-foreground", children: Object.values(acceptedFormats).flat().join(', ') })] })), children] }) })] })) }));
|
|
63
63
|
};
|
|
64
64
|
//# sourceMappingURL=file-dropzone.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"file-dropzone.js","sourceRoot":"","sources":["../src/file-dropzone.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AACnC,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAC,IAAI,EAAC,MAAM,cAAc,CAAC;AAClC,OAAO,EAAC,EAAE,EAAE,OAAO,EAAC,MAAM,cAAc,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,CAAC,MAAM,YAAY,GAOpB,CAAC,KAAK,EAAE,EAAE;IACb,MAAM,EACJ,SAAS,EACT,MAAM,EACN,QAAQ,GAAG,IAAI,EACf,SAAS,EACT,eAAe,EACf,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9D,MAAM,EAAC,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,IAAI,EAAC,GAAG,WAAW,CAAC;QACpE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;YACtB,kBAAkB,CAAC,IAAI,CAAC,CAAC;YACzB,IAAI,CAAC;gBACH,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC;oBAAS,CAAC;gBACT,kBAAkB,CAAC,KAAK,CAAC,CAAC;YAC5B,CAAC;QACH,CAAC;QACD,MAAM,EAAE,eAAe;QACvB,QAAQ;QACR,OAAO,EAAE,IAAI;QACb,UAAU,EAAE,IAAI;KACjB,CAAC,CAAC;IAEH,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CACX,
|
|
1
|
+
{"version":3,"file":"file-dropzone.js","sourceRoot":"","sources":["../src/file-dropzone.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AACnC,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAC,IAAI,EAAC,MAAM,cAAc,CAAC;AAClC,OAAO,EAAC,EAAE,EAAE,OAAO,EAAC,MAAM,cAAc,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,CAAC,MAAM,YAAY,GAOpB,CAAC,KAAK,EAAE,EAAE;IACb,MAAM,EACJ,SAAS,EACT,MAAM,EACN,QAAQ,GAAG,IAAI,EACf,SAAS,EACT,eAAe,EACf,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9D,MAAM,EAAC,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,IAAI,EAAC,GAAG,WAAW,CAAC;QACpE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;YACtB,kBAAkB,CAAC,IAAI,CAAC,CAAC;YACzB,IAAI,CAAC;gBACH,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC;oBAAS,CAAC;gBACT,kBAAkB,CAAC,KAAK,CAAC,CAAC;YAC5B,CAAC;QACH,CAAC;QACD,MAAM,EAAE,eAAe;QACvB,QAAQ;QACR,OAAO,EAAE,IAAI;QACb,UAAU,EAAE,IAAI;KACjB,CAAC,CAAC;IAEH,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CACX,oIAAoI,EACpI,YAAY,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,cAAc,EAC1D,SAAS,IAAI,oBAAoB,EACjC,CAAC,eAAe,IAAI,oBAAoB,EACxC,SAAS,CACV,KACG,YAAY,EAAE,EAClB,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,YAE1C,eAAe,CAAC,CAAC,CAAC,CACjB,eAAK,SAAS,EAAC,oFAAoF,aACjG,KAAC,OAAO,IAAC,SAAS,EAAC,SAAS,GAAG,uBAE3B,CACP,CAAC,CAAC,CAAC,CACF,8BACE,mBAAW,aAAa,EAAE,GAAI,EAC9B,cAAK,SAAS,EAAC,+BAA+B,YAC5C,eAAK,SAAS,EAAC,wDAAwD,aACrE,eAAK,SAAS,EAAC,yBAAyB,aACtC,KAAC,IAAI,IAAC,SAAS,EAAC,SAAS,GAAG,EAC5B,YAAG,SAAS,EAAC,+BAA+B,YACzC,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,WAAW,GAC3C,IACA,EACL,eAAe,IAAI,CAClB,eAAK,SAAS,EAAC,qCAAqC,aAClD,YAAG,SAAS,EAAC,mBAAmB,mCAAuB,EACvD,YAAG,SAAS,EAAC,+BAA+B,YACzC,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,GAC/C,IACA,CACP,EACA,QAAQ,IACL,GACF,IACL,CACJ,GACG,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {FC, useState} from 'react';\nimport {useDropzone} from 'react-dropzone';\nimport {Plus} from 'lucide-react';\nimport {cn, Spinner} from '@sqlrooms/ui';\n\n/**\n * A customizable file dropzone component that handles file uploads through drag-and-drop or click interactions.\n *\n * @component\n * @example\n * ```tsx\n * // Basic usage\n * <FileDropzone\n * onDrop={async (files) => {\n * console.log('Dropped files:', files);\n * // Handle file upload\n * }}\n * />\n *\n * // With file type restrictions and single file upload\n * <FileDropzone\n * multiple={false}\n * acceptedFormats={{\n * 'text/csv': ['.csv'],\n * 'application/json': ['.json']\n * }}\n * onDrop={async (files) => {\n * const file = files[0];\n * // Handle single file upload\n * }}\n * >\n * <p>Custom dropzone content</p>\n * </FileDropzone>\n * ```\n *\n * @param props - Component props\n * @param props.className - Optional CSS class name for styling\n * @param props.isInvalid - Optional flag to indicate validation error state\n * @param props.onDrop - Async callback function called when files are dropped or selected\n * @param props.multiple - Optional flag to allow multiple file selection (default: true)\n * @param props.acceptedFormats - Optional object defining accepted MIME types and their extensions\n * @param props.children - Optional React nodes to render inside the dropzone\n */\nexport const FileDropzone: FC<{\n className?: string;\n isInvalid?: boolean;\n onDrop: (files: File[]) => Promise<void>;\n multiple?: boolean;\n acceptedFormats?: Record<string, string[]>;\n children?: React.ReactNode;\n}> = (props) => {\n const {\n isInvalid,\n onDrop,\n multiple = true,\n className,\n acceptedFormats,\n children,\n } = props;\n\n const [isAddingDropped, setIsAddingDropped] = useState(false);\n\n const {getRootProps, getInputProps, isDragActive, open} = useDropzone({\n onDrop: async (files) => {\n setIsAddingDropped(true);\n try {\n await onDrop(files);\n } finally {\n setIsAddingDropped(false);\n }\n },\n accept: acceptedFormats,\n multiple,\n noClick: true,\n noKeyboard: true,\n });\n\n return (\n <div\n className={cn(\n 'relative flex h-full min-h-[180px] cursor-pointer flex-col overflow-hidden rounded-lg border-2 border-dashed p-2 transition-colors',\n isDragActive ? 'border-muted bg-muted/50' : 'border-muted',\n isInvalid && 'border-destructive',\n !isAddingDropped && 'hover:border-muted',\n className,\n )}\n {...getRootProps()}\n onClick={isAddingDropped ? undefined : open}\n >\n {isAddingDropped ? (\n <div className=\"flex h-full w-full items-center justify-center gap-4 text-xs text-muted-foreground\">\n <Spinner className=\"h-4 w-4\" />\n Adding files...\n </div>\n ) : (\n <>\n <input {...getInputProps()} />\n <div className=\"relative flex h-full flex-col\">\n <div className=\"flex h-full flex-col items-center justify-center gap-2\">\n <div className=\"flex items-center gap-2\">\n <Plus className=\"h-6 w-6\" />\n <p className=\"text-sm text-muted-foreground\">\n {isDragActive ? 'Drop here ...' : 'Add files'}\n </p>\n </div>\n {acceptedFormats && (\n <div className=\"flex flex-wrap justify-center gap-2\">\n <p className=\"text-xs font-bold\">Supported formats:</p>\n <p className=\"text-xs text-muted-foreground\">\n {Object.values(acceptedFormats).flat().join(', ')}\n </p>\n </div>\n )}\n {children}\n </div>\n </div>\n </>\n )}\n </div>\n );\n};\n"]}
|
package/dist/index.d.ts
CHANGED
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,iBAAiB,CAAC"}
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC","sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,iBAAiB,CAAC","sourcesContent":["/**\n * {@include ../README.md}\n * @packageDocumentation\n */\n\nexport * from './file-dropzone';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sqlrooms/dropzone",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"private": false,
|
|
6
6
|
"author": "Ilya Boyandin <ilya@boyandin.me>",
|
|
@@ -32,9 +32,9 @@
|
|
|
32
32
|
"typedoc": "typedoc"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@sqlrooms/ui": "0.
|
|
35
|
+
"@sqlrooms/ui": "0.8.0",
|
|
36
36
|
"lucide-react": "^0.474.0",
|
|
37
37
|
"react-dropzone": "^14.3.5"
|
|
38
38
|
},
|
|
39
|
-
"gitHead": "
|
|
39
|
+
"gitHead": "99b46a96ab900e6b005bcd30cfbfe7b3c9d51f8d"
|
|
40
40
|
}
|