You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

react-filezone

Package Overview
Dependencies
Maintainers
0
Versions
13
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-filezone - npm Package Compare versions

Comparing version

0.3.1
to
0.4.1

2

package.json
{
"name": "react-filezone",
"version": "0.3.1",
"version": "0.4.1",
"description": "filezone: A Robust, Flexible React File Upload Library with Advanced Features and Seamless User Experience",

@@ -5,0 +5,0 @@ "main": "dist/index.js",

264

README.md
# react-filezone
filezone is a robust, flexible React file upload library with advanced features and a seamless user experience.
A powerful, flexible React file upload library with advanced features and a seamless user experience.
## Features
## 🚀 Features
- 🚀 Multiple and single file upload modes
- 📂 File type and size validation
- 📊 Upload progress tracking
- 🔄 Concurrent upload support
- 🛡️ Error handling
- 💻 TypeScript support
- Multiple and single file upload modes
- Advanced file type and size validation
- Detailed upload progress tracking
- Concurrent upload support
- Robust error handling
- Full TypeScript support
- Drag and drop functionality
- Customizable file preview generation
## Installation
## 📦 Installation
Install the package using npm or yarn:
```bash

@@ -24,11 +24,24 @@ npm install react-filezone

## Usage
## 🔧 Configuration Options
### Basic Image Upload Component
### Global Configuration
```typescript
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `mode` | 'single' \| 'multiple' | 'multiple' | Upload mode |
| `maxFiles` | number | 3 | Maximum number of files |
| `maxFileSize` | number | 10GB | Maximum file size in bytes |
| `allowedFileTypes` | string[] | ['*/*'] | Allowed MIME types |
| `maxConcurrentUploads` | number | 5 | Maximum concurrent uploads |
| `disabled` | boolean | false | Disable file upload |
## 📝 Usage Examples
### 1. Basic Image Upload
```tsx
import React from 'react';
import { useUpload } from 'react-filezone';
const ImageUploader: React.FC = () => {
const BasicImageUploader: React.FC = () => {
const {

@@ -39,4 +52,3 @@ acceptedFiles,

getInputProps,
removeFile,
isDragActive
removeFile
} = useUpload({

@@ -56,6 +68,3 @@ action: '/api/upload',

<div>
<div
{...getRootProps()}
className={`dropzone ${isDragActive ? 'active' : ''}`}
>
<div {...getRootProps()} className="dropzone">
<input {...getInputProps()} />

@@ -65,9 +74,5 @@ <p>Drag and drop images here, or click to select</p>

{errors.length > 0 && (
<div className="error-container">
{errors.map((error, index) => (
<p key={index} className="error">{error}</p>
))}
</div>
)}
{errors.map((error, index) => (
<div key={index} className="error">{error}</div>
))}

@@ -96,90 +101,8 @@ <div className="preview-container">

export default ImageUploader;
export default BasicImageUploader;
```
## Video Upload with Strict Configuration
### 2. Professional Document Upload with Custom Headers
```typescript
import React from 'react';
import { useUpload } from 'react-filezone';
const VideoUploader: React.FC = () => {
const {
acceptedFiles,
errors,
getRootProps,
getInputProps,
removeFile,
restartUpload,
isDragActive
} = useUpload({
action: '/api/upload-video',
globalConfig: {
mode: 'single', // Only one video at a time
allowedFileTypes: ['video/mp4', 'video/quicktime'],
maxFileSize: 100 * 1024 * 1024, // 100MB
maxConcurrentUploads: 1
},
metadata: {
category: 'user-content',
source: 'web-upload'
},
onUploadStart: (files) => {
console.log('Starting upload for:', files[0].file.name);
},
onUploadComplete: (data) => {
console.log('Video uploaded successfully:', data);
},
onError: (error, file) => {
console.error('Upload failed:', error, file);
}
});
return (
<div>
<div
{...getRootProps()}
className={`video-dropzone ${isDragActive ? 'drag-active' : ''}`}
>
<input {...getInputProps()} />
<p>Drag and drop a video file here, or click to select</p>
</div>
{errors.map((error, index) => (
<div key={index} className="error-message">{error}</div>
))}
{acceptedFiles.map((file) => (
<div key={file.id} className="video-preview">
{file.videoPreviewUrl && (
<video
src={file.videoPreviewUrl}
controls
className="video-thumbnail"
/>
)}
<div className="upload-status">
<p>{file.file.name}</p>
<p>Status: {file.state.status}</p>
<p>Progress: {file.state.progress}%</p>
{file.state.status === 'error' && (
<button onClick={() => restartUpload(file.id)}>
Retry Upload
</button>
)}
<button onClick={() => removeFile(file.id)}>Remove</button>
</div>
</div>
))}
</div>
);
};
export default VideoUploader;
```
## Document Upload with Custom Headers
```typescript
import React from 'react';
```tsx
import React, { useState } from 'react';

@@ -196,3 +119,3 @@ import { useUpload } from 'react-filezone';

removeFile,
isDragActive
uploadFile
} = useUpload({

@@ -213,4 +136,10 @@ action: '/api/upload-documents',

},
onUploadStart: (files) => {
console.log('Starting upload for:', files.map(f => f.file.name));
},
onUploadComplete: (data) => {
console.log('Documents uploaded successfully:', data);
alert('Documents uploaded successfully!');
},
onError: (error, file) => {
console.error(`Upload failed for ${file.file.name}:`, error);
}

@@ -228,6 +157,3 @@ });

<div
{...getRootProps()}
className={`document-dropzone ${isDragActive ? 'active' : ''}`}
>
<div {...getRootProps()} className="document-dropzone">
<input {...getInputProps()} />

@@ -246,4 +172,10 @@ <p>Drag and drop documents here, or click to select</p>

<p>Size: {(file.file.size / 1024).toFixed(2)} KB</p>
<p>Upload Progress: {file.state.progress}%</p>
<button onClick={() => removeFile(file.id)}>Remove</button>
<p>Status: {file.state.status}</p>
<p>Progress: {file.state.progress}%</p>
<div className="actions">
<button onClick={() => removeFile(file.id)}>Remove</button>
{file.state.status === 'error' && (
<button onClick={() => uploadFile(file.id)}>Retry</button>
)}
</div>
</div>

@@ -257,7 +189,7 @@ ))}

export default DocumentUploader;
```
## Multiple File Type Upload
```typescript
### 3. Multi-Type File Upload with Strict Validation
```tsx
import React from 'react';

@@ -272,7 +204,7 @@ import { useUpload } from 'react-filezone';

getInputProps,
removeFile,
isDragActive
removeFile
} = useUpload({
action: '/api/upload-assets',
action: '/api/upload-multi',
globalConfig: {
mode: 'multiple',
allowedFileTypes: [

@@ -288,3 +220,3 @@ 'image/*',

onUploadComplete: (data) => {
console.log('Files uploaded successfully:', data);
console.log('Multi-type files uploaded:', data);
}

@@ -298,3 +230,3 @@ });

if (file.videoPreviewUrl && file.file.type.startsWith('video/')) {
return <video src={file.videoPreviewUrl} />;
return <video src={file.videoPreviewUrl} controls />;
}

@@ -306,6 +238,3 @@ return <p>{file.file.name}</p>;

<div>
<div
{...getRootProps()}
className={`multi-dropzone ${isDragActive ? 'drag-active' : ''}`}
>
<div {...getRootProps()} className="multi-dropzone">
<input {...getInputProps()} />

@@ -337,22 +266,58 @@ <p>Drag and drop multiple file types, or click to select</p>

export default MultiTypeUploader;
```
## Configuration
### 4. Single File Mode with Disabled State
### Global Configuration Options
```tsx
import React from 'react';
import { useUpload } from 'react-filezone';
- `mode`: 'single' or 'multiple' (default: 'multiple')
- `maxFiles`: Maximum number of files allowed (default: 3)
- `maxFileSize`: Maximum file size in bytes (default: 10GB)
- `allowedFileTypes`: Array of allowed MIME types (default: ['*/*'])
- `maxConcurrentUploads`: Maximum concurrent uploads (default: 5)
const ProfilePictureUploader: React.FC = () => {
const {
acceptedFiles,
errors,
getRootProps,
getInputProps,
removeFile
} = useUpload({
action: '/api/upload-profile-pic',
globalConfig: {
mode: 'single',
allowedFileTypes: ['image/*'],
maxFileSize: 2 * 1024 * 1024, // 2MB
disabled: false // Can be dynamically set based on conditions
}
});
### Hooks and Callbacks
return (
<div>
<div {...getRootProps()} className="profile-dropzone">
<input {...getInputProps()} />
<p>Click or drag a profile picture</p>
</div>
{errors.map((error, index) => (
<div key={index} className="error">{error}</div>
))}
{acceptedFiles[0] && (
<div className="profile-preview">
<img
src={acceptedFiles[0].previewUrl}
alt="Profile"
className="profile-image"
/>
<button onClick={() => removeFile(acceptedFiles[0].id)}>
Change Picture
</button>
</div>
)}
</div>
);
};
- `onUploadStart`: Triggered when files start uploading
- `onUploadProgress`: Called during upload progress
- `onError`: Called when an upload fails
export default ProfilePictureUploader;
```
## API Reference
## 📚 API Reference

@@ -366,2 +331,5 @@ ### `useUpload(options)`

- `metadata`: Additional metadata to attach to files
- `onUploadStart`: Callback when files start uploading
- `onUploadComplete`: Callback when upload completes
- `onError`: Callback for upload errors

@@ -377,8 +345,8 @@ #### Returns

## TypeScript Support
## 🛡️ TypeScript Support
Full TypeScript definitions are included for type safety and IDE support.
## License
## 📄 License
MIT License