ultra-image-uploader 0.0.1 → 0.0.2

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.
Files changed (2) hide show
  1. package/README.md +65 -120
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -16,11 +16,11 @@ A modern React component for handling image uploads with drag-and-drop functiona
16
16
  ## Installation
17
17
 
18
18
  ```bash
19
- npm install ultra-image-uploaderer
19
+ npm install ultra-image-uploader
20
20
  # or
21
- yarn add ultra-image-uploaderer
21
+ yarn add ultra-image-uploader
22
22
  # or
23
- pnpm add ultra-image-uploaderer
23
+ pnpm add ultra-image-uploader
24
24
  ```
25
25
 
26
26
  ## Quick Start
@@ -28,16 +28,16 @@ pnpm add ultra-image-uploaderer
28
28
  ### Basic Usage
29
29
 
30
30
  ```tsx
31
- import { ImageUploader, imageUrl } from "ultra-image-uploaderer";
31
+ import { ImageUploader } from "ultra-image-uploader";
32
32
  import { useState } from "react";
33
33
 
34
34
  function App() {
35
- const [images, setImages] = useState<File[]>([]);
35
+ const [imageFiles, setImagesFiles] = useState<File[]>([]);
36
36
 
37
37
  return (
38
38
  <ImageUploader
39
- images={images}
40
- setImages={setImages}
39
+ images={imageFiles}
40
+ setImages={setImagesFiles}
41
41
  mode="add"
42
42
  multiple={true}
43
43
  />
@@ -48,154 +48,99 @@ function App() {
48
48
  ### With ImgBB Integration
49
49
 
50
50
  ```tsx
51
- import { ImageUploader, imageUrl } from "ultra-image-uploaderer";
51
+ import { ImageUploader, uploadImagesToImageBB } from "ultra-image-uploader";
52
52
  import { useState } from "react";
53
53
 
54
54
  function ImageUploadForm() {
55
55
  const [images, setImages] = useState<File[]>([]);
56
+ const [loading, setLoading] = useState(false);
56
57
 
57
- const handleSubmit = async () => {
58
+ const handleGetImageUrl = async () => {
59
+ setLoading(true);
58
60
  try {
59
- const uploadedUrls = await imageUrl(images, "YOUR_IMGBB_API_KEY");
60
- console.log("Uploaded image URLs:", uploadedUrls);
61
+ const result = await uploadImagesToImageBB(
62
+ images,
63
+ "your-imgbb-api-key-here"
64
+ );
65
+ console.log("Uploaded URLs:", result.urls);
61
66
  } catch (error) {
62
- console.error("Upload failed:", error);
67
+ console.error("Error uploading images:", error);
68
+ } finally {
69
+ setLoading(false);
63
70
  }
64
71
  };
65
72
 
66
73
  return (
67
- <form onSubmit={handleSubmit}>
74
+ <div>
68
75
  <ImageUploader
69
76
  images={images}
70
77
  setImages={setImages}
71
78
  mode="add"
72
79
  multiple={true}
73
80
  />
74
- <button type="submit">Upload Images</button>
75
- </form>
81
+ <button
82
+ onClick={handleGetImageUrl}
83
+ disabled={loading || images.length === 0}
84
+ className="bg-blue-500 text-white p-2 rounded disabled:opacity-50"
85
+ >
86
+ {loading ? "Uploading..." : "Upload Images"}
87
+ </button>
88
+ </div>
76
89
  );
77
90
  }
78
91
  ```
79
92
 
80
93
  ## Component Props
81
94
 
82
- | Prop | Type | Default | Description |
83
- | ----------------------- | ------------------------------------- | ----------------------------- | -------------------------------- |
84
- | `images` | `File[]` | Required | Array of selected image files |
85
- | `setImages` | `(images: File[]) => void` | Required | Function to update images array |
86
- | `mode` | `"add" \| "update"` | Required | Mode of operation |
87
- | `defaultImages` | `string[]` | `[]` | Array of existing image URLs |
88
- | `multiple` | `boolean` | `false` | Allow multiple file selection |
89
- | `maxFileSize` | `number` | `5242880` | Maximum file size in bytes (5MB) |
90
- | `allowedFileTypes` | `string[]` | `["image/jpeg", "image/png"]` | Allowed MIME types |
91
- | `containerClassName` | `string` | `""` | Custom container class |
92
- | `uploadBoxClassName` | `string` | `""` | Custom upload box class |
93
- | `imageClassName` | `string` | `""` | Custom image preview class |
94
- | `uploadBoxStyle` | `React.CSSProperties` | `{}` | Custom upload box styles |
95
- | `imageStyle` | `React.CSSProperties` | `{}` | Custom image preview styles |
96
- | `uploadIcon` | `React.ReactNode` | `<UploadCloudIcon />` | Custom upload icon |
97
- | `deleteIcon` | `React.ReactNode` | `<TrashIcon />` | Custom delete icon |
98
- | `uploadText` | `string` | `"Choose files to upload"` | Upload box text |
99
- | `dragAndDropText` | `string` | `"Drag and drop files here"` | Drag and drop text |
100
- | `fileTypeText` | `string` | `"PNG, JPG, or JPEG files"` | File type info text |
101
- | `onUpload` | `(files: File[]) => void` | - | Upload callback |
102
- | `onRemove` | `(file: File, index: number) => void` | - | Remove callback |
103
- | `onFileValidationError` | `(error: string) => void` | - | Validation error callback |
104
-
105
- ## Usage Examples
106
-
107
- ### Add Mode (New Upload)
95
+ | Prop | Type | Default | Description |
96
+ |------------------|--------------------------|------------|-------------|
97
+ | `images` | `File[]` | Required | Array of selected image files |
98
+ | `setImages` | `(files: File[]) => void`| Required | Function to update images array |
99
+ | `mode` | `"add" | "update"` | Required | Component operation mode |
100
+ | `defaultImages` | `string[]` | `[]` | Existing image URLs for update mode |
101
+ | `multiple` | `boolean` | `false` | Allow multiple file selection |
102
+ | `inputStyles` | `string` | `""` | Custom CSS classes for upload input |
103
+ | `containerStyles`| `string` | `""` | Custom CSS classes for container |
104
+ | `uploadText` | `string` | `"Browse files or drag & drop"` | Upload area text |
105
+ | `typeText` | `string` | `"PNG, JPG, JPEG, WEBP"` | Allowed file types text |
108
106
 
109
- ```tsx
110
- import { ImageUploader, imageUrl } from "ultra-image-uploaderer";
111
107
 
112
- function AddImage() {
113
- const [images, setImages] = useState<File[]>([]);
108
+ ## ImgBB Utility
114
109
 
115
- const handleSubmit = async () => {
116
- const imgUrls = await imageUrl(images, "YOUR_IMGBB_API_KEY");
117
- // Handle the uploaded image URLs
118
- };
110
+ The package includes a utility function for uploading to ImgBB:
119
111
 
120
- return (
121
- <form onSubmit={handleSubmit}>
122
- <ImageUploader
123
- images={images}
124
- setImages={setImages}
125
- mode="add"
126
- multiple={true}
127
- uploadBoxClassName="border-3 border-dashed p-5"
128
- imageClassName="w-20 h-20"
129
- />
130
- <button type="submit">Upload</button>
131
- </form>
132
- );
112
+ ```ts
113
+ interface ImageBBUrlResult {
114
+ urls: string[];
133
115
  }
134
- ```
135
-
136
- ### Update Mode (Edit Existing Images)
137
-
138
- ```tsx
139
- function UpdateImage() {
140
- const [images, setImages] = useState<File[]>([]);
141
- const existingImages = ["https://example.com/image1.jpg"];
142
116
 
143
- const handleSubmit = async () => {
144
- const newImgUrls = await imageUrl(images, "YOUR_IMGBB_API_KEY");
145
- // Combine existing and new images
146
- };
147
-
148
- return (
149
- <form onSubmit={handleSubmit}>
150
- <ImageUploader
151
- images={images}
152
- setImages={setImages}
153
- mode="update"
154
- multiple={true}
155
- defaultImages={existingImages}
156
- uploadBoxClassName="border-3 border-dashed p-5"
157
- imageClassName="w-20 h-20"
158
- />
159
- <button type="submit">Update</button>
160
- </form>
161
- );
162
- }
163
- ```
164
-
165
- ## Styling
166
-
167
- The component uses Tailwind CSS classes by default but can be customized using className props:
168
-
169
- ```tsx
170
- <ImageUploader
171
- images={images}
172
- setImages={setImages}
173
- mode="add"
174
- containerClassName="max-w-2xl mx-auto"
175
- uploadBoxClassName="border-2 border-dashed border-blue-500 rounded-lg"
176
- imageClassName="rounded-lg shadow-md"
177
- />
117
+ async function uploadImagesToImageBB(
118
+ images: File[],
119
+ apiKey: string
120
+ ): Promise<ImageBBUrlResult>
178
121
  ```
179
122
 
180
- ## ImgBB Integration
123
+ ## Development
181
124
 
182
- The package includes a utility function `imageUrl` for uploading images to ImgBB:
125
+ To contribute to this project:
183
126
 
184
- ```typescript
185
- const uploadImages = async (files: File[]) => {
186
- try {
187
- const urls = await imageUrl(files, "YOUR_IMGBB_API_KEY");
188
- console.log("Uploaded URLs:", urls);
189
- } catch (error) {
190
- console.error("Upload failed:", error);
191
- }
192
- };
193
- ```
127
+ 1. Clone the repository
128
+ 2. Install dependencies:
129
+ ```bash
130
+ yarn
131
+ ```
132
+ 3. Make your changes
133
+ 4. Run the build:
134
+ ```bash
135
+ yarn build
136
+ ```
137
+ 5. Test your changes
138
+ 6. Submit a pull request
194
139
 
195
140
  ## License
196
141
 
197
- MIT
142
+ MIT © Digontha Das
198
143
 
199
- ## Contributing
144
+ ## Support
200
145
 
201
- Contributions are welcome! Please feel free to submit a Pull Request.
146
+ For support or feature requests, please [open an issue](https://github.com/Digontha/ultra_image_uploader) on GitHub.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ultra-image-uploader",
3
- "version": "0.0.1",
3
+ "version": "0.0.2",
4
4
  "description": "React component for image uploads with drag-and-drop and ImgBB integration",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",