@bigbinary/neeto-image-uploader-frontend 1.5.6 → 1.5.7

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 (6) hide show
  1. package/README.md +181 -178
  2. package/dist/index.cjs.js +3 -4
  3. package/dist/index.cjs.js.map +1 -1
  4. package/dist/index.js +3 -4
  5. package/dist/index.js.map +1 -1
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -1,209 +1,212 @@
1
- # neeto-image-uploader
2
-
3
- **neeto-image-uploader-nano** enables the management of assets across projects for an induvidual organization.
4
-
5
- # Index
6
-
7
- - [General information](#general-information)
8
- - [Installation instructions](#installation-instructions)
9
- - [Engine Installation](#engine-installation)
10
- - [Frontend package Installation](#frontend-package-installation)
11
- - [Components](#components)
12
- - [1. AssetLibrary](#1-assetlibrary)
13
- - [2. ImageUploader](#2-imageuploader)
14
- - [Hooks](#hooks)
15
- - [1. useImageUpload](#1-useimageuploader)
16
- - [Development instructions](#development-instructions)
17
- - [Engine development](#engine-development)
18
- - [Frontend package development](#frontend-package-development)
19
- - [Setup](#setup)
20
-
21
- # General information
22
-
23
- - This nano deals with accessing assets across projects for an organization.
24
-
25
- # Installation instructions
26
-
27
- ## Engine Installation
28
-
29
- 1. Add the following line to your application's Gemfile:
30
-
31
- ```ruby
32
- source "NEETO_GEM_SERVER_URL" do
33
- # ..existing gems
34
-
35
- gem 'neeto-image-uploader-engine'
36
- end
37
- ```
38
-
39
- 2. Run the following command to install the engine:
40
-
41
- ```shell
42
- bundle install
43
- ```
44
-
45
- 3. Add the following line to your application's `config/routes.rb`:
46
-
47
- ```ruby
48
- mount NeetoImageUploaderEngine::Engine => "/neeto_image_uploader_engine"
49
- ```
50
-
51
- 4. Add the following keys to environment variables (all 6 keys are required):
52
-
53
- ```zsh
54
- IMAGE_KIT_PUBLIC_KEY
55
- IMAGE_KIT_PRIVATE_KEY
56
- IMAGE_KIT_URL_ENDPOINT
57
- IMAGE_KIT_DEFAULT_FOLDER
58
-
59
- UNSPLASH_ACCESS_KEY #(for fetching images from unsplash)
60
- ```
61
-
62
- 5. Add the following lines to `secrets.yml`:
63
-
64
- ```yml
65
- image_kit_public_key: <%= ENV["IMAGE_KIT_PUBLIC_KEY"] %>
66
- image_kit_private_key: <%= ENV["IMAGE_KIT_PRIVATE_KEY"] %>
67
- image_kit_url_endpoint: <%= ENV["IMAGE_KIT_URL_ENDPOINT"] %>
68
- unsplash_access_key: <%= ENV["UNSPLASH_ACCESS_KEY"] %>
69
- ```
70
-
71
- 6. Add the folowing linse in `application_helper.rb` inside `app/helpers` folder:
72
-
73
- ```ruby
74
- module ApplicationHelper
75
- def get_client_props
76
- global_props = NeetoCommonsBackend::Helpers.common_client_props(@organization, current_user)
77
-
78
- image_kit_props = {
79
- image_kit: {
80
- url_endpoint: Rails.application.secrets.image_kit_url_endpoint,
81
- public_key: Rails.application.secrets.image_kit_public_key,
82
- folder: NeetoCommonsBackend::EnvConstants.client_app_name
83
- }
84
- }
85
-
86
- global_props.deep_merge!(image_kit_props)
1
+ # neeto-image-uploader-nano
2
+ The `neeto-image-uploader-nano` manages assets across neeto products. The nano exports the `@bigbinary/neeto-image-uploader-frontend` NPM package and `neeto-image-uploader-engine` Rails engine for development.
3
+
4
+ # Contents
5
+ 1. [Development with Host Application](#development-with-host-application)
6
+ - [Engine](#engine)
7
+ - [Installation](#installation)
8
+ - [Frontend package](#frontend-package)
9
+ - [Installation](#installation-1)
10
+ - [Components](#components)
11
+ - [Hooks](#hooks)
12
+ - [Upload Config](#upload-config)
13
+ 2. [Instructions for Publishing](#instructions-for-publishing)
14
+
15
+ # Development with Host Application
16
+ ## Engine
17
+ The engine is used to manage assets across neeto products.
18
+
19
+ ### Installation
20
+ 1. Add this line to your application's Gemfile:
21
+ ```ruby
22
+ source "NEETO_GEM_SERVER_URL" do
23
+ # ..existing gems
24
+
25
+ gem 'neeto-image-uploader-engine'
87
26
  end
88
- end
89
- ```
90
-
91
- 7. Add the following file `imagekitio.rb` inside `config/initializers`
92
-
93
- ```ruby
94
- # frozen_string_literal: true
95
-
96
- require "imagekitio"
97
-
98
- ImageKitIo.configure do |config|
99
- config.public_key = Rails.application.secrets.image_kit_public_key
100
- config.private_key = Rails.application.secrets.image_kit_private_key
101
- config.url_endpoint = Rails.application.secrets.image_kit_url_endpoint
102
- end
103
- ```
104
-
105
- ## Frontend package installation
106
-
107
- Install the latest neeto-image-uploader-frontend package using the below command:
108
-
109
- ```shell
110
- yarn add @bigbinary/neeto-image-uploader-frontend
111
- ```
27
+ ```
28
+ 2. And then execute:
29
+ ```zsh
30
+ bundle install
31
+ ```
32
+ 3. Add this line to your application's `config/routes.rb` file:
33
+ ```ruby
34
+ mount NeetoImageUploaderEngine::Engine => "/neeto_image_uploader_engine"
35
+ ```
36
+ 4. Add the following keys to environment variables (all 6 keys are required):
37
+ ```zsh
38
+ IMAGE_KIT_PUBLIC_KEY
39
+ IMAGE_KIT_PRIVATE_KEY
40
+ IMAGE_KIT_URL_ENDPOINT
112
41
 
113
- The frontend exports two components `AssetLibrary` and `ImageUploader`.
42
+ UNSPLASH_ACCESS_KEY #(for fetching images from unsplash)
43
+ ```
114
44
 
115
- # Components
45
+ ## Frontend package
46
+ ### Installation
47
+ 1. Install the latest `neeto-image-uploader-frontend` package using the below command:
48
+ ```zsh
49
+ yarn add @bigbinary/neeto-image-uploader-frontend
50
+ ```
116
51
 
117
- ## 1. AssetLibrary
52
+ ### Components
53
+ #### 1. `AssetLibrary` ([source code](https://github.com/bigbinary/neeto-image-uploader-nano/blob/0c060e75a32bc04308491a50b96c3b7d4d6f7c83/app/javascript/src/components/Modal/index.jsx))
118
54
 
119
55
  <div align="center">
120
56
  <img src="https://github.com/bigbinary/neeto-editor/assets/70290286/90f445f5-ed28-4e25-8e20-033887f06039" alt="Asset library"/>
121
57
  </div>
122
58
 
123
- ## 2. ImageUploader
59
+ **Props**
60
+ - `isOpen`: A boolean to specify whether the modal is open or not.
61
+ - `onClose`: A callback function triggered when the modal is closed.
62
+ - `onUploadComplete`: A callback function triggered when the image upload is complete.
63
+ - `uploadConfig`: Configuration object for image uploads.
64
+
65
+ **Usage**
66
+ ```jsx
67
+ import React, { useState } from "react";
68
+ import { AssetLibrary } from "@bigbinary/neeto-image-uploader-frontend";
69
+
70
+ const App = () => {
71
+ const [isAssetLibraryOpen, setIsAssetLibraryOpen] = useState(false);
72
+ const [image, setImage] = useState({ url: TEST_IMAGE_SRC, signedId: "" });
73
+
74
+ const handleUploadComplete = image => setImage(image);
75
+
76
+ return (
77
+ <AssetLibrary
78
+ isOpen={isAssetLibraryOpen}
79
+ onClose={() => setIsAssetLibraryOpen(false)}
80
+ onUploadComplete={handleUploadComplete}
81
+ />
82
+ );
83
+ };
84
+
85
+ export default App;
86
+ ```
87
+
88
+ #### 2. `ImageUploader` ([source code](https://github.com/bigbinary/neeto-image-uploader-nano/blob/0c060e75a32bc04308491a50b96c3b7d4d6f7c83/app/javascript/src/components/ImageUploader/index.jsx))
124
89
 
125
90
  <div align="center">
126
91
  <img src="https://github.com/bigbinary/neeto-editor/assets/70290286/d293d887-38fd-4e55-a53d-dd591a52f053" alt="Image Uploader"/>
127
92
  </div>
128
93
 
129
- # Hooks
94
+ **Props**
95
+ - `onUploadComplete`: A callback function triggered when the image upload is complete.
96
+ - `className`: Additional classes to be applied to the component.
97
+ - `src`: The source URL of the image to be displayed initially.
98
+ - `uploadConfig`: Configuration object for image uploads.
99
+
100
+ **Usage**
101
+ ```jsx
102
+ import React, { useState } from "react";
103
+ import { ImageUploader } from "@bigbinary/neeto-image-uploader-frontend";
104
+
105
+ const App = () => {
106
+ const [isAssetLibraryOpen, setIsAssetLibraryOpen] = useState(false);
107
+ const [image, setImage] = useState({ url: TEST_IMAGE_SRC, signedId: "" });
108
+
109
+ const handleUploadComplete = image => setImage(image);
110
+
111
+ return (
112
+ <ImageUploader
113
+ className="mb-8 h-52 w-80"
114
+ key={image.url}
115
+ src={image.url}
116
+ onUploadComplete={handleUploadComplete}
117
+ />
118
+ );
119
+ };
120
+
121
+ export default App;
122
+ ```
130
123
 
131
- ## 1. useImageUpload
124
+ #### 3. `BasicImageUploader` ([source code](https://github.com/bigbinary/neeto-image-uploader-nano/blob/0c060e75a32bc04308491a50b96c3b7d4d6f7c83/app/javascript/src/components/BasicImageUploader.jsx))
125
+
126
+ **Props**
127
+ - `src`: The source URL of the image to be displayed initially.
128
+ - `className`: Additional classes to be applied to the component.
129
+ - `imageFallbackProps`: Props to be passed to the ImageWithFallback component.
130
+ - `onDrop`: Callback function triggered when an image is dropped or selected for upload.
131
+ - `isDisabled`: A boolean to specify whether the uploader is disabled.
132
+ - `onRemove`: Callback function triggered when the "Remove" button is clicked.
133
+
134
+ **Usage**
135
+ ```jsx
136
+ import React, { useState } from "react";
137
+ import { noop } from "neetocist";
138
+ import { BasicImageUploader } from "@bigbinary/neeto-image-uploader-frontend";
139
+
140
+ const App = () => {
141
+ const [image, setImage] = useState({ url: TEST_IMAGE_SRC, signedId: "" });
142
+
143
+ return (
144
+ <BasicImageUploader
145
+ className="h-52 w-80"
146
+ src={image.url}
147
+ uploadProgress={0}
148
+ onDrop={noop}
149
+ onRemove={() => setImage({ url: "", signedId: "" })}
150
+ />
151
+ );
152
+ };
153
+
154
+ export default App;
155
+ ```
132
156
 
133
- The `useImageUpload` hook is a React custom hook that simplifies the process of uploading images in your application. It handles both development and production scenarios, tracks upload progress, and provides a clean interface for image uploading.
157
+ ### Hooks
158
+ #### 1. `useImageUpload` ([source code](https://github.com/bigbinary/neeto-image-uploader-nano/blob/0c060e75a32bc04308491a50b96c3b7d4d6f7c83/app/javascript/src/hooks/useImageUpload.js))
134
159
 
135
- ### Import the hook
160
+ - The `useImageUpload` hook is a React custom hook that simplifies the process of uploading images in your application. It handles both development and production scenarios, tracks upload progress, and provides a clean interface for image uploading.
161
+ - Usage in [neetoAuth](https://github.com/bigbinary/neeto-auth-web/blob/9fdf3baf49f60c2ad7d7bf0518af9c00885f56ef/app/javascript/src/components/Dashboard/Account/Profile/ChangeProfile.jsx#L59).
136
162
 
163
+ **Returns**
164
+ - `uploadImage`: Function to initiate image upload. It takes two parameters:
165
+ - `file`: The image file to be uploaded.
166
+ - `onUploadComplete`: Callback function called when the upload is complete.
167
+ - `uploadProgress`: Number representing the upload progress (0-100).
168
+ - `isUploading`: Boolean indicating whether an upload is in progress.
169
+
170
+ **Usage**
171
+ ##### Import the hook
137
172
  ```jsx
138
173
  import { useImageUpload } from "@bigbinary/neeto-image-uploader-frontend";
139
174
  ```
140
175
 
141
- ### Invoke the hook
142
-
176
+ ##### Invoke the hook
143
177
  ```jsx
144
- const { uploadImage, uploadProgress, isUploading } = useImageUpload();
178
+ const { uploadImage, uploadProgress, isUploading } = useImageUpload();
145
179
  ```
146
180
 
147
- ### Call uploadImage to Upload an Image
148
-
181
+ ##### Call uploadImage to Upload an Image
149
182
  ```jsx
150
- const handleImageUpload = async (file) => {
151
- uploadImage(file, (uploadedImageData) => {
152
- // Handle the uploaded image data
153
- });
154
- };
183
+ const handleImageUpload = async (file) => {
184
+ uploadImage(file, (uploadedImageData) => {
185
+ // Handle the uploaded image data
186
+ });
187
+ };
155
188
  ```
156
189
 
157
- # Development instructions
158
-
159
- ## Engine development
160
-
161
- 1. Add this line to your application's Gemfile (replace the path to the local
162
- copy of neeto-image-uploader-engine):
163
-
164
- ```ruby
165
- gem 'neeto-image-uploader-engine', path: '../neeto-image-uploader-engine'
166
- ```
167
-
168
- 2. And then execute:
169
-
170
- ```shell
171
- bundle install
172
- ```
173
-
174
- 3. Refer [engine installation](#engine-installation).
175
-
176
- ## Frontend package development
177
-
178
- The usage of `yalc` is explained in this video:
179
- <https://www.youtube.com/watch?v=QBiYGP0Rhe0>
180
-
181
- 1. See the changes in the host app by executing the following command \
182
- <br/> Use this command if releasing package for the first time.
183
-
184
- ```shell
185
- yarn build && yalc publish
186
- ```
187
-
188
- Use this command to see changes after the initial publish.
189
-
190
- ```shell
191
- yarn release
192
- ```
193
-
194
- ### Setup
195
-
196
- 1. Setup and run the Rails server of the dummy application:
197
-
198
- ```zsh
199
- ./test/dummy/bin/setup
200
-
201
- rails server
190
+ ### Upload Config
191
+ The "Upload Config" section describes the default upload configuration. This configuration can be overridden by passing the `uploadConfig` prop.
192
+
193
+ ```js
194
+ {
195
+ "maxImageSize": globalProps.endUserUploadedFileSizeLimitInMb,
196
+ "allowedImageTypes": {
197
+ "image/png": [".png"],
198
+ "image/jpg": [".jpg", ".jpeg"],
199
+ "image/gif": [".gif"],
200
+ "image/svg+xml": [".svg"]
201
+ }
202
+ }
202
203
  ```
203
204
 
204
- 2. Setup and run the example app:
205
+ Example: Overriding upload config in [neetoForm](https://github.com/bigbinary/neeto-form-web/blob/48db536b74c1e09176d7634c23d8a59c71d848e9/app/javascript/src/components/Form/Design/Sidebar/commons/ImageBlock.jsx#L59).
205
206
 
206
- ```zsh
207
- yarn install
208
- ./bin/webpacker-dev-server
209
- ```
207
+ **Keys**
208
+ - `maxImageSize`: The maximum size allowed for uploaded images.
209
+ - `allowedImageTypes`: An object specifying the allowed image types and their corresponding file extensions.
210
+
211
+ # Instructions for Publishing
212
+ Consult the [building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages) guide for details on how to publish.
package/dist/index.cjs.js CHANGED
@@ -2226,7 +2226,6 @@ var DEFAULT_CROP_CONFIG = {
2226
2226
  x: 0,
2227
2227
  y: 0
2228
2228
  };
2229
- var IMAGE_KIT_DEFAULT_FOLDER = process.env.IMAGE_KIT_DEFAULT_FOLDER;
2230
2229
  var INFINITE_SCROLLER_SIZES = [{
2231
2230
  columns: 4,
2232
2231
  gutter: 0
@@ -3407,7 +3406,7 @@ var useImageUploader = function useImageUploader(_ref) {
3407
3406
  xhr: XHRProgress,
3408
3407
  file: file,
3409
3408
  fileName: file.name,
3410
- folder: initializers.globalProps.imagekit.folder || IMAGE_KIT_DEFAULT_FOLDER,
3409
+ folder: initializers.globalProps.imagekit.folder,
3411
3410
  customMetadata: {
3412
3411
  organizationKey: initializers.globalProps.organization.publicApiKey,
3413
3412
  appName: initializers.globalProps.appName
@@ -4831,7 +4830,7 @@ var uploadWithImageKit = function uploadWithImageKit(file) {
4831
4830
  return imagekit.upload({
4832
4831
  file: file,
4833
4832
  fileName: UNSPLASH_DEFAULT_NAME,
4834
- folder: initializers.globalProps.imagekit.folder || IMAGE_KIT_DEFAULT_FOLDER,
4833
+ folder: initializers.globalProps.imagekit.folder,
4835
4834
  customMetadata: {
4836
4835
  organizationKey: initializers.globalProps.organization.publicApiKey,
4837
4836
  appName: initializers.globalProps.appName
@@ -5359,7 +5358,7 @@ var useImageUpload = function useImageUpload() {
5359
5358
  xhr: XHRProgress,
5360
5359
  file: file,
5361
5360
  fileName: file.name,
5362
- folder: initializers.globalProps.imagekit.folder || IMAGE_KIT_DEFAULT_FOLDER,
5361
+ folder: initializers.globalProps.imagekit.folder,
5363
5362
  customMetadata: {
5364
5363
  organizationKey: initializers.globalProps.organization.publicApiKey,
5365
5364
  appName: initializers.globalProps.appName