{"_id":"@8base/client-web-file-input","_rev":"13-f0c6aa29755ee96e1d8b5027ce1087fd","name":"@8base/client-web-file-input","dist-tags":{"beta":"1.0.13","latest":"1.0.0"},"versions":{"1.0.0":{"name":"@8base/client-web-file-input","version":"1.0.0","description":"Component integrated with filestack with the capability to add a custom s3 host outside 8base","main":"dist/index.js","module":"dist/index.js","typings":"dist/index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"yarn tsc","prettier:base":"prettier --parser typescript --single-quote","prettier:check":"npm run prettier:base -- --list-different \"{src}/**/*.{ts,tsx}\"","prettier:write":"npm run prettier:base -- --write \"{src}/**/*.{ts,tsx}\""},"peerDependencies":{"@apollo/client":"^3.3.7","graphql":"^15.5.0","react":"^17.0.1","react-dom":"^17.0.1"},"dependencies":{"@emotion/css":"^11.1.3","@types/graphql":"^14.5.0","@types/jest":"^26.0.20","@types/react":"^16.8.0","@types/react-dom":"^17.0.0","@types/react-test-renderer":"^17.0.0","apollo-client":"^2.6.10","filestack-js":"3.21.1","graphql":"^15.5.0","graphql-tag":"^2.12.6","jest":"26.6.3","react":"^17.0.1","react-apollo":"^3.1.0","react-dom":"^17.0.1","react-dropzone":"^14.2.3","react-test-renderer":"^17.0.1","ts-jest":"^26.4.4","tslib":"^2.6.2","typescript":"^4.1.3"},"jest":{"globals":{"ts-jest":{"tsConfig":"<rootDir>/tsconfig.json"}},"collectCoverageFrom":["<rootDir>/src/**","!<rootDir>/**/__tests__/**"],"moduleFileExtensions":["ts","tsx","js","jsx"],"transform":{"^.+\\.(ts|tsx)$":"ts-jest"},"testMatch":["**/__tests__/**/*.[jt]s?(x)","**/?(*.)+(spec|test).[jt]s?(x)"]},"license":"MIT","gitHead":"edece931482829dac430b9b25c23e769ab077d8d","_id":"@8base/client-web-file-input@1.0.0","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-yvzkm31yiSt7jZ0E7+WsYahnQEFrRHz/SawpcHxDtoBKYwXn2oRadxX6q8khTiigtnoGSodD/z7I4XxW41mNeg==","shasum":"0548ebbef5867e972448fcd9588085ba31cd4904","tarball":"https://registry.npmjs.org/@8base/client-web-file-input/-/client-web-file-input-1.0.0.tgz","fileCount":54,"unpackedSize":70407,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFj5IGxV2BcewKC0lqi/7nJgtHmsz1MOybFzIzdoX+SfAiAF+vpvAKa3kmggGrHTocmTU1eZEWgh3EHh8hSKEJ5DeA=="}]},"_npmUser":{"name":"8base-bot","email":"npmpublisher@8base.com"},"directories":{},"maintainers":[{"name":"dav1nx1","email":"oscar.corcho@8base.com"},{"name":"jorge.osorio","email":"jorge.osorio@8base.com"},{"name":"8base-bot","email":"npmpublisher@8base.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/client-web-file-input_1.0.0_1709334788419_0.007601686166947896"},"_hasShrinkwrap":false},"1.0.1":{"name":"@8base/client-web-file-input","version":"1.0.1","description":"Component integrated with filestack with the capability to add a custom s3 host outside 8base","main":"dist/index.js","module":"dist/index.js","typings":"dist/index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"yarn tsc","prettier:base":"prettier --parser typescript --single-quote","prettier:check":"npm run prettier:base -- --list-different \"{src}/**/*.{ts,tsx}\"","prettier:write":"npm run prettier:base -- --write \"{src}/**/*.{ts,tsx}\""},"peerDependencies":{"@apollo/client":"^3.3.7","graphql":"^15.5.0","react":"^16.13.1","react-dom":"^16.8.1"},"dependencies":{"@emotion/css":"^11.1.3","@types/graphql":"^14.5.0","@types/jest":"^26.0.20","@types/react":"^16.8.0","@types/react-dom":"^17.0.0","@types/react-test-renderer":"^17.0.0","apollo-client":"^2.6.10","filestack-js":"3.21.1","graphql":"^15.5.0","graphql-tag":"^2.12.6","jest":"26.6.3","react":"^16.13.1","react-dom":"^16.8.1","react-apollo":"^3.1.0","react-dropzone":"^14.2.3","react-test-renderer":"^17.0.1","ts-jest":"^26.4.4","tslib":"^2.6.2","typescript":"^4.1.3"},"jest":{"globals":{"ts-jest":{"tsConfig":"<rootDir>/tsconfig.json"}},"collectCoverageFrom":["<rootDir>/src/**","!<rootDir>/**/__tests__/**"],"moduleFileExtensions":["ts","tsx","js","jsx"],"transform":{"^.+\\.(ts|tsx)$":"ts-jest"},"testMatch":["**/__tests__/**/*.[jt]s?(x)","**/?(*.)+(spec|test).[jt]s?(x)"]},"license":"MIT","readme":"# File Manager (PACKAGE ONLY FOR CLIENT WEB!!!)\n\nThis package provides a simple tool for uploading files to a server or a custom s3 AWS service. Related with  [8base](https://8base.com/)\n\n## Installation\n\nYou can install the package via yarn | npm:\n\n```bash\nyarn add @8base/file-manager\nnpm install @8base/file-manager --save\n```\n\n# Usage\n\n1- Import the package using the following snippet when you want to use it in your project.\n\n```js\nimport { FileManager } from '@8base/file-manager';\n```\n2- Create a new instance of the `FileManager` class and pass an object with the required configuration parameters. The available options are:\n\n| Option | Type     | Description                                                |\n| :-------- | :------- | :--------------------------------------------------------- |\n| **apiKey** | `string` | Your 8base API key, can be found in your [profile](https://app.8base.com/#/settings) |\n| **workspace** | `number` | The workspace id of the app you want to upload files to |\n| **environment** | `string` | the environment id, if you don't know it, by default is 'Master' (default: https://api-eu-west-1.graph.8base.com/v0) |\n| **useFilestack** | `boolean` | Set this option to true if you want to use [filestack](https://www.filestack.com/) as a storage provider |\n| **useS3** | `boolean` | Set this option to true if you want to use AWS S3 service as a storage provider (default: false) |\n| **maxFiles** | `string` | Number of  files that can be uploaded at once |\n| **value** | `string` | value for the input field |\n| **onChange** | `function` | callback function when file is selected |\n\n3- You must have a apollo provider  in your app.jsx or index.jsx to use this package:\n\n```js\nconst API_TOKEN = 'xxxxxxx-xxxx-xxxx-xxxx-xxxx'\n\n// Create a middleware that adds the API token to the request headers\nconst authLink = setContext((_, { headers }) => {\n  return {\n    headers: {\n      ...headers,\n      authorization: API_TOKEN ? `Bearer ${API_TOKEN}` : '',\n    },\n  };\n});\n\nconst httpLink = createHttpLink({\n  uri: `https://api.8base.com/<your-workspace-id>`,\n});\n\nconst client = new ApolloClient({\n  link: authLink.concat(httpLink),\n  cache: new InMemoryCache(),\n});\n\nReactDOM.render(\n  <React.StrictMode>\n    <ApolloProvider client={ client }>\n      <App />\n    </ApolloProvider>\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n```\n\n## Important Notes\n- You must pass the `apiKey` to your app in order for this package to work.\n- You must configure first on your 8base backend workspace the settings related with the storage provider you want to use (see below).\n    - If you don't have any workspace, create one and then go to the settings page and add a new app service:\n    - [File Storage](https://app.8base.com/workspace/<your-workspace-id>/app-services/storageservice)\n\n\n","readmeFilename":"README.md","gitHead":"8efaf9eda09e85333d11461b6ab98d36d36eced6","_id":"@8base/client-web-file-input@1.0.1","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-OBdn557kmyDIfkLS4F66qbzRuiwlNVKcDOWA9CUDso+9XMrEaSkqHy+V09WrKd6KfHudO5GWRJJHQ0xR8JN0DQ==","shasum":"16ecf80da26d868b9a9f053cafe740177ce7d426","tarball":"https://registry.npmjs.org/@8base/client-web-file-input/-/client-web-file-input-1.0.1.tgz","fileCount":54,"unpackedSize":73215,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEDe14UwDLCtodF6fitagnd5b0B19KsTWA+5XfqeRM08AiAOd/E+sCdLiHSBIE1KxRMilv4/dKmyUiExhVHmc5iupA=="}]},"_npmUser":{"name":"8base-bot","email":"npmpublisher@8base.com"},"directories":{},"maintainers":[{"name":"dav1nx1","email":"oscar.corcho@8base.com"},{"name":"jorge.osorio","email":"jorge.osorio@8base.com"},{"name":"8base-bot","email":"npmpublisher@8base.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/client-web-file-input_1.0.1_1709339145789_0.45100446112919745"},"_hasShrinkwrap":false},"1.0.2":{"name":"@8base/client-web-file-input","version":"1.0.2","description":"Component integrated with filestack with the capability to add a custom s3 host outside 8base","main":"dist/index.js","module":"dist/index.js","typings":"dist/index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"yarn tsc","prettier:base":"prettier --parser typescript --single-quote","prettier:check":"npm run prettier:base -- --list-different \"{src}/**/*.{ts,tsx}\"","prettier:write":"npm run prettier:base -- --write \"{src}/**/*.{ts,tsx}\""},"peerDependencies":{"@apollo/client":"^3.3.7","graphql":"^15.5.0","react":"^16.13.1","react-dom":"^16.8.1"},"dependencies":{"@emotion/css":"^11.1.3","@types/graphql":"^14.5.0","@types/jest":"^26.0.20","@types/react":"^16.8.0","@types/react-dom":"^17.0.0","@types/react-test-renderer":"^17.0.0","apollo-client":"^2.6.10","filestack-js":"3.21.1","graphql":"^15.5.0","graphql-tag":"^2.12.6","jest":"26.6.3","react":"^16.13.1","react-dom":"^16.8.1","react-apollo":"^3.1.0","react-dropzone":"^14.2.3","react-test-renderer":"^17.0.1","ts-jest":"^26.4.4","tslib":"^2.6.2","typescript":"^4.1.3"},"jest":{"globals":{"ts-jest":{"tsConfig":"<rootDir>/tsconfig.json"}},"collectCoverageFrom":["<rootDir>/src/**","!<rootDir>/**/__tests__/**"],"moduleFileExtensions":["ts","tsx","js","jsx"],"transform":{"^.+\\.(ts|tsx)$":"ts-jest"},"testMatch":["**/__tests__/**/*.[jt]s?(x)","**/?(*.)+(spec|test).[jt]s?(x)"]},"license":"MIT","readme":"# File Manager (PACKAGE ONLY FOR CLIENT WEB!!!)\n\nThis package provides a simple tool for uploading files to a server or a custom s3 AWS service. Related with  [8base](https://8base.com/)\n\n## Installation\n\nYou can install the package via yarn | npm:\n\n```bash\nyarn add @8base/file-manager\nnpm install @8base/file-manager --save\n```\n\n# Usage\n\n1- Import the package using the following snippet when you want to use it in your project.\n\n```js\nimport { FileManager } from '@8base/file-manager';\n```\n2- Create a new instance of the `FileManager` class and pass an object with the required configuration parameters. The available options are:\n\n| Option | Type     | Description                                                |\n| :-------- | :------- | :--------------------------------------------------------- |\n| **apiKey** | `string` | Your 8base API key, can be found in your [profile](https://app.8base.com/#/settings) |\n| **workspace** | `number` | The workspace id of the app you want to upload files to |\n| **environment** | `string` | the environment id, if you don't know it, by default is 'Master' (default: https://api-eu-west-1.graph.8base.com/v0) |\n| **useFilestack** | `boolean` | Set this option to true if you want to use [filestack](https://www.filestack.com/) as a storage provider |\n| **useS3** | `boolean` | Set this option to true if you want to use AWS S3 service as a storage provider (default: false) |\n| **maxFiles** | `string` | Number of  files that can be uploaded at once |\n| **value** | `string` | value for the input field |\n| **onChange** | `function` | callback function when file is selected |\n\n3- You must have a apollo provider  in your app.jsx or index.jsx to use this package:\n\n```js\nconst API_TOKEN = 'xxxxxxx-xxxx-xxxx-xxxx-xxxx'\n\n// Create a middleware that adds the API token to the request headers\nconst authLink = setContext((_, { headers }) => {\n  return {\n    headers: {\n      ...headers,\n      authorization: API_TOKEN ? `Bearer ${API_TOKEN}` : '',\n    },\n  };\n});\n\nconst httpLink = createHttpLink({\n  uri: `https://api.8base.com/<your-workspace-id>`,\n});\n\nconst client = new ApolloClient({\n  link: authLink.concat(httpLink),\n  cache: new InMemoryCache(),\n});\n\nReactDOM.render(\n  <React.StrictMode>\n    <ApolloProvider client={ client }>\n      <App />\n    </ApolloProvider>\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n```\n\n## Important Notes\n- You must pass the `apiKey` to your app in order for this package to work.\n- You must configure first on your 8base backend workspace the settings related with the storage provider you want to use (see below).\n    - If you don't have any workspace, create one and then go to the settings page and add a new app service:\n    - [File Storage](https://app.8base.com/workspace/<your-workspace-id>/app-services/storageservice)\n\n\n","readmeFilename":"README.md","gitHead":"c8082fb9987e8462272f9a2d411f4f6e32fa4e99","_id":"@8base/client-web-file-input@1.0.2","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-1HQiHIBztCy2mxd6+um27X5+cgXmrTRUM0x/wld1b7XezvEp3BwkxF9iQWSKTBGp/njCxoO8Rleg4Rw95T1ZBQ==","shasum":"97bed5866018d19ba7f23437f04df5cac8ad111f","tarball":"https://registry.npmjs.org/@8base/client-web-file-input/-/client-web-file-input-1.0.2.tgz","fileCount":54,"unpackedSize":73261,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBjzp01V1u2SxrbjKkm5Fkw9cRG7iDELzOYDh0EaCAc1AiEAs1EUpvNOIMW6Z5bcpGIBA3pOJKkh72F5uHMw8yC3JTg="}]},"_npmUser":{"name":"8base-bot","email":"npmpublisher@8base.com"},"directories":{},"maintainers":[{"name":"dav1nx1","email":"oscar.corcho@8base.com"},{"name":"jorge.osorio","email":"jorge.osorio@8base.com"},{"name":"8base-bot","email":"npmpublisher@8base.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/client-web-file-input_1.0.2_1709495267502_0.32087748400784477"},"_hasShrinkwrap":false},"1.0.3":{"name":"@8base/client-web-file-input","version":"1.0.3","description":"Component integrated with filestack with the capability to add a custom s3 host outside 8base","main":"dist/index.js","module":"dist/index.js","typings":"dist/index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"yarn tsc -p .","prettier:base":"prettier --parser typescript --single-quote","prettier:check":"npm run prettier:base -- --list-different \"{src}/**/*.{ts,tsx}\"","prettier:write":"npm run prettier:base -- --write \"{src}/**/*.{ts,tsx}\""},"peerDependencies":{"apollo-client":"^2.6.3","graphql":"^14.0.0","react":"^16.8.6","react-apollo":"^3.1.0","react-dom":"^16.8.6"},"dependencies":{"@emotion/css":"^11.11.2","@types/react":"^18.2.61","filestack-js":"3.7.0","graphql-tag":"^2.10.0","react-dropzone":"^11.3.4"},"devDependencies":{"@babel/core":"^7.4.3","@types/graphql":"^14.2.0","@types/jest":"^24.0.13","apollo-client":"^2.6.3","babel-jest":"^24.8.0","graphql":"^14.3.1","jest":"24.7.1","react":"^16.8.6","react-apollo":"^3.1.0","react-dom":"^16.8.6","react-test-renderer":"^16.8.6","ts-jest":"^24.0.2","typescript":"^4.1.3"},"jest":{"globals":{"ts-jest":{"tsConfig":"<rootDir>/tsconfig.json"}},"collectCoverageFrom":["<rootDir>/src/**","!<rootDir>/**/__tests__/**"],"moduleFileExtensions":["ts","tsx","js","jsx"],"transform":{"^.+\\.(ts|tsx)$":"ts-jest"},"testMatch":["**/__tests__/**/*.[jt]s?(x)","**/?(*.)+(spec|test).[jt]s?(x)"]},"license":"MIT","readme":"# File Manager (PACKAGE ONLY FOR CLIENT WEB!!!)\n\nThis package provides a simple tool for uploading files to a server or a custom s3 AWS service. Related with  [8base](https://8base.com/)\n\n## Installation\n\nYou can install the package via yarn | npm:\n\n```bash\nyarn add @8base/file-manager\nnpm install @8base/file-manager --save\n```\n\n# Usage\n\n1- Import the package using the following snippet when you want to use it in your project.\n\n```js\nimport { FileManager } from '@8base/file-manager';\n```\n2- Create a new instance of the `FileManager` class and pass an object with the required configuration parameters. The available options are:\n\n| Option | Type     | Description                                                |\n| :-------- | :------- | :--------------------------------------------------------- |\n| **apiKey** | `string` | Your 8base API key, can be found in your [profile](https://app.8base.com/#/settings) |\n| **workspace** | `number` | The workspace id of the app you want to upload files to |\n| **environment** | `string` | the environment id, if you don't know it, by default is 'Master' (default: https://api-eu-west-1.graph.8base.com/v0) |\n| **useFilestack** | `boolean` | Set this option to true if you want to use [filestack](https://www.filestack.com/) as a storage provider |\n| **useS3** | `boolean` | Set this option to true if you want to use AWS S3 service as a storage provider (default: false) |\n| **maxFiles** | `string` | Number of  files that can be uploaded at once |\n| **value** | `string` | value for the input field |\n| **onChange** | `function` | callback function when file is selected |\n\n3- You must have a apollo provider  in your app.jsx or index.jsx to use this package:\n\n```js\nconst API_TOKEN = 'xxxxxxx-xxxx-xxxx-xxxx-xxxx'\n\n// Create a middleware that adds the API token to the request headers\nconst authLink = setContext((_, { headers }) => {\n  return {\n    headers: {\n      ...headers,\n      authorization: API_TOKEN ? `Bearer ${API_TOKEN}` : '',\n    },\n  };\n});\n\nconst httpLink = createHttpLink({\n  uri: `https://api.8base.com/<your-workspace-id>`,\n});\n\nconst client = new ApolloClient({\n  link: authLink.concat(httpLink),\n  cache: new InMemoryCache(),\n});\n\nReactDOM.render(\n  <React.StrictMode>\n    <ApolloProvider client={ client }>\n      <App />\n    </ApolloProvider>\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n```\n\n## Important Notes\n- You must pass the `apiKey` to your app in order for this package to work.\n- You must configure first on your 8base backend workspace the settings related with the storage provider you want to use (see below).\n    - If you don't have any workspace, create one and then go to the settings page and add a new app service:\n    - [File Storage](https://app.8base.com/workspace/<your-workspace-id>/app-services/storageservice)\n\n\n","readmeFilename":"README.md","gitHead":"7eaf1aba56d6f3192a3f6082f0079c07800cf74c","_id":"@8base/client-web-file-input@1.0.3","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-eHYU4DG/CnGPC92bQjvZHmFtuwwM87Ab8QnGh1SKUdUyGYcJBgUfkLbisCUK2FeEVnhLscGLxe+GW5M1S9wMHQ==","shasum":"14654b9d7f1ad66bbf69dfe27369774754fb9024","tarball":"https://registry.npmjs.org/@8base/client-web-file-input/-/client-web-file-input-1.0.3.tgz","fileCount":102,"unpackedSize":99864,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDqVCl2KH5w/e8qX+tIQzt3wCB7jSzcaDVT8ZMwRxuKgAiBFaPszSltNaa7ZseqLJiAfuEvEPpRm35Un6gQBY7YM4Q=="}]},"_npmUser":{"name":"8base-bot","email":"npmpublisher@8base.com"},"directories":{},"maintainers":[{"name":"dav1nx1","email":"oscar.corcho@8base.com"},{"name":"jorge.osorio","email":"jorge.osorio@8base.com"},{"name":"8base-bot","email":"npmpublisher@8base.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/client-web-file-input_1.0.3_1709513090435_0.10076413141291263"},"_hasShrinkwrap":false},"1.0.4":{"name":"@8base/client-web-file-input","version":"1.0.4","description":"Component integrated with filestack with the capability to add a custom s3 host outside 8base","main":"dist/index.js","module":"dist/index.js","typings":"dist/index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"yarn tsc -p .","prettier:base":"prettier --parser typescript --single-quote","prettier:check":"npm run prettier:base -- --list-different \"{src}/**/*.{ts,tsx}\"","prettier:write":"npm run prettier:base -- --write \"{src}/**/*.{ts,tsx}\""},"peerDependencies":{"apollo-client":"^2.6.3","graphql":"^14.0.0","react":"^16.8.6","react-apollo":"^3.1.0","react-dom":"^16.8.6"},"dependencies":{"@emotion/css":"^11.11.2","@types/react":"^18.2.61","filestack-js":"3.7.0","graphql-tag":"^2.10.0","react-dropzone":"^11.3.4"},"devDependencies":{"@babel/core":"^7.4.3","@types/graphql":"^14.2.0","@types/jest":"^24.0.13","apollo-client":"^2.6.3","babel-jest":"^24.8.0","graphql":"^14.3.1","jest":"24.7.1","react":"^16.8.6","react-apollo":"^3.1.0","react-dom":"^16.8.6","react-test-renderer":"^16.8.6","ts-jest":"^24.0.2","typescript":"^4.1.3"},"jest":{"globals":{"ts-jest":{"tsConfig":"<rootDir>/tsconfig.json"}},"collectCoverageFrom":["<rootDir>/src/**","!<rootDir>/**/__tests__/**"],"moduleFileExtensions":["ts","tsx","js","jsx"],"transform":{"^.+\\.(ts|tsx)$":"ts-jest"},"testMatch":["**/__tests__/**/*.[jt]s?(x)","**/?(*.)+(spec|test).[jt]s?(x)"]},"license":"MIT","readme":"# File Manager (PACKAGE ONLY FOR CLIENT WEB!!!)\n\nThis package provides a simple tool for uploading files to a server or a custom s3 AWS service. Related with  [8base](https://8base.com/)\n\n## Installation\n\nYou can install the package via yarn | npm:\n\n```bash\nyarn add @8base/file-manager\nnpm install @8base/file-manager --save\n```\n\n# Usage\n\n1- Import the package using the following snippet when you want to use it in your project.\n\n```js\nimport { FileManager } from '@8base/file-manager';\n```\n2- Create a new instance of the `FileManager` class and pass an object with the required configuration parameters. The available options are:\n\n| Option | Type     | Description                                                |\n| :-------- | :------- | :--------------------------------------------------------- |\n| **apiKey** | `string` | Your 8base API key, can be found in your [profile](https://app.8base.com/#/settings) |\n| **workspace** | `number` | The workspace id of the app you want to upload files to |\n| **environment** | `string` | the environment id, if you don't know it, by default is 'Master' (default: https://api-eu-west-1.graph.8base.com/v0) |\n| **useFilestack** | `boolean` | Set this option to true if you want to use [filestack](https://www.filestack.com/) as a storage provider |\n| **useS3** | `boolean` | Set this option to true if you want to use AWS S3 service as a storage provider (default: false) |\n| **maxFiles** | `string` | Number of  files that can be uploaded at once |\n| **value** | `string` | value for the input field |\n| **onChange** | `function` | callback function when file is selected |\n\n3- You must have a apollo provider  in your app.jsx or index.jsx to use this package:\n\n```js\nconst API_TOKEN = 'xxxxxxx-xxxx-xxxx-xxxx-xxxx'\n\n// Create a middleware that adds the API token to the request headers\nconst authLink = setContext((_, { headers }) => {\n  return {\n    headers: {\n      ...headers,\n      authorization: API_TOKEN ? `Bearer ${API_TOKEN}` : '',\n    },\n  };\n});\n\nconst httpLink = createHttpLink({\n  uri: `https://api.8base.com/<your-workspace-id>`,\n});\n\nconst client = new ApolloClient({\n  link: authLink.concat(httpLink),\n  cache: new InMemoryCache(),\n});\n\nReactDOM.render(\n  <React.StrictMode>\n    <ApolloProvider client={ client }>\n      <App />\n    </ApolloProvider>\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n```\n\n## Important Notes\n- You must pass the `apiKey` to your app in order for this package to work.\n- You must configure first on your 8base backend workspace the settings related with the storage provider you want to use (see below).\n    - If you don't have any workspace, create one and then go to the settings page and add a new app service:\n    - [File Storage](https://app.8base.com/workspace/<your-workspace-id>/app-services/storageservice)\n\n\n","readmeFilename":"README.md","gitHead":"c01be8a7346c39f4308159e33a38dd1238ae855d","_id":"@8base/client-web-file-input@1.0.4","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-tCwr8Qqw0syw3ywAL7RZGNdsIRFhqBvhO76rlluhQ1WLCKXVM5q5heBRKphwLkKI+TMeQk1ZJtwMYUvSjBafEw==","shasum":"e9e113b2f01adfb1563a9b1906581acbb85cdf4d","tarball":"https://registry.npmjs.org/@8base/client-web-file-input/-/client-web-file-input-1.0.4.tgz","fileCount":102,"unpackedSize":97058,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICN6BfX9zse2TS0oUWc1/M9Hy3kXU65hd0AZvCWAHfVAAiEAh+FBXgvjeRfMVe1IL4qTHgCU+phjQRrwSMKEAv0tvAo="}]},"_npmUser":{"name":"8base-bot","email":"npmpublisher@8base.com"},"directories":{},"maintainers":[{"name":"dav1nx1","email":"oscar.corcho@8base.com"},{"name":"jorge.osorio","email":"jorge.osorio@8base.com"},{"name":"8base-bot","email":"npmpublisher@8base.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/client-web-file-input_1.0.4_1709516563649_0.6005486851858"},"_hasShrinkwrap":false},"1.0.5":{"name":"@8base/client-web-file-input","version":"1.0.5","description":"Component integrated with filestack with the capability to add a custom s3 host outside 8base","main":"dist/index.js","module":"dist/index.js","typings":"dist/index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"yarn tsc -p .","prettier:base":"prettier --parser typescript --single-quote","prettier:check":"npm run prettier:base -- --list-different \"{src}/**/*.{ts,tsx}\"","prettier:write":"npm run prettier:base -- --write \"{src}/**/*.{ts,tsx}\""},"peerDependencies":{"apollo-client":"^2.6.3","graphql":"^14.0.0","react":"^16.8.6","react-apollo":"^3.1.0","react-dom":"^16.8.6"},"dependencies":{"@emotion/css":"^11.11.2","@types/react":"^18.2.61","filestack-js":"3.7.0","graphql-tag":"^2.10.0","react-dropzone":"^11.3.4"},"devDependencies":{"@babel/core":"^7.4.3","@types/graphql":"^14.2.0","@types/jest":"^24.0.13","apollo-client":"^2.6.3","babel-jest":"^24.8.0","graphql":"^14.3.1","jest":"24.7.1","react":"^16.8.6","react-apollo":"^3.1.0","react-dom":"^16.8.6","react-test-renderer":"^16.8.6","ts-jest":"^24.0.2","typescript":"^4.1.3"},"jest":{"globals":{"ts-jest":{"tsConfig":"<rootDir>/tsconfig.json"}},"collectCoverageFrom":["<rootDir>/src/**","!<rootDir>/**/__tests__/**"],"moduleFileExtensions":["ts","tsx","js","jsx"],"transform":{"^.+\\.(ts|tsx)$":"ts-jest"},"testMatch":["**/__tests__/**/*.[jt]s?(x)","**/?(*.)+(spec|test).[jt]s?(x)"]},"license":"MIT","readme":"# File Manager (PACKAGE ONLY FOR CLIENT WEB!!!)\n\nThis package provides a simple tool for uploading files to a server or a custom s3 AWS service. Related with  [8base](https://8base.com/)\n\n## Installation\n\nYou can install the package via yarn | npm:\n\n```bash\nyarn add @8base/file-manager\nnpm install @8base/file-manager --save\n```\n\n# Usage\n\n1- Import the package using the following snippet when you want to use it in your project.\n\n```js\nimport { FileManager } from '@8base/file-manager';\n```\n2- Create a new instance of the `FileManager` class and pass an object with the required configuration parameters. The available options are:\n\n| Option | Type     | Description                                                |\n| :-------- | :------- | :--------------------------------------------------------- |\n| **apiKey** | `string` | Your 8base API key, can be found in your [profile](https://app.8base.com/#/settings) |\n| **workspace** | `number` | The workspace id of the app you want to upload files to |\n| **environment** | `string` | the environment id, if you don't know it, by default is 'Master' (default: https://api-eu-west-1.graph.8base.com/v0) |\n| **useFilestack** | `boolean` | Set this option to true if you want to use [filestack](https://www.filestack.com/) as a storage provider |\n| **useS3** | `boolean` | Set this option to true if you want to use AWS S3 service as a storage provider (default: false) |\n| **maxFiles** | `string` | Number of  files that can be uploaded at once |\n| **value** | `string` | value for the input field |\n| **onChange** | `function` | callback function when file is selected |\n\n3- You must have a apollo provider  in your app.jsx or index.jsx to use this package:\n\n```js\nconst API_TOKEN = 'xxxxxxx-xxxx-xxxx-xxxx-xxxx'\n\n// Create a middleware that adds the API token to the request headers\nconst authLink = setContext((_, { headers }) => {\n  return {\n    headers: {\n      ...headers,\n      authorization: API_TOKEN ? `Bearer ${API_TOKEN}` : '',\n    },\n  };\n});\n\nconst httpLink = createHttpLink({\n  uri: `https://api.8base.com/<your-workspace-id>`,\n});\n\nconst client = new ApolloClient({\n  link: authLink.concat(httpLink),\n  cache: new InMemoryCache(),\n});\n\nReactDOM.render(\n  <React.StrictMode>\n    <ApolloProvider client={ client }>\n      <App />\n    </ApolloProvider>\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n```\n\n## Important Notes\n- You must pass the `apiKey` to your app in order for this package to work.\n- You must configure first on your 8base backend workspace the settings related with the storage provider you want to use (see below).\n    - If you don't have any workspace, create one and then go to the settings page and add a new app service:\n    - [File Storage](https://app.8base.com/workspace/<your-workspace-id>/app-services/storageservice)\n\n\n","readmeFilename":"README.md","gitHead":"4dba7265e49a588232273c496261105c1ff53da0","_id":"@8base/client-web-file-input@1.0.5","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-QJSqlvF8RXP6rlOH96QSrVj+lM3z4ElzeKrWkisvGuLNUdAd0NdGGkEm2aNfC4EmrjDS3slmpwMbTi2BePskJQ==","shasum":"d07825d13ca949f94aa6b31d465b421fb093be0a","tarball":"https://registry.npmjs.org/@8base/client-web-file-input/-/client-web-file-input-1.0.5.tgz","fileCount":102,"unpackedSize":96739,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFn/0buKD4yGSVp15fIm+hIcaiXbd6UuorD3F2TDddW9AiAOTqxLHEgc4zHVRViIg/1H3Y56+r7aEjRebPzk0ETb8A=="}]},"_npmUser":{"name":"8base-bot","email":"npmpublisher@8base.com"},"directories":{},"maintainers":[{"name":"dav1nx1","email":"oscar.corcho@8base.com"},{"name":"jorge.osorio","email":"jorge.osorio@8base.com"},{"name":"8base-bot","email":"npmpublisher@8base.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/client-web-file-input_1.0.5_1709527026631_0.3128485618108727"},"_hasShrinkwrap":false},"1.0.6":{"name":"@8base/client-web-file-input","version":"1.0.6","description":"Component integrated with filestack with the capability to add a custom s3 host outside 8base","main":"dist/index.js","module":"dist/index.js","typings":"dist/index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"yarn tsc -p .","prettier:base":"prettier --parser typescript --single-quote","prettier:check":"npm run prettier:base -- --list-different \"{src}/**/*.{ts,tsx}\"","prettier:write":"npm run prettier:base -- --write \"{src}/**/*.{ts,tsx}\""},"peerDependencies":{"apollo-client":"^2.6.3","graphql":"^14.0.0","react":"^16.8.6","react-apollo":"^3.1.0","react-dom":"^16.8.6"},"dependencies":{"@emotion/css":"^11.11.2","@types/react":"^18.2.61","filestack-js":"3.7.0","graphql-tag":"^2.10.0","react-dropzone":"^11.3.4"},"devDependencies":{"@babel/core":"^7.4.3","@types/graphql":"^14.2.0","@types/jest":"^24.0.13","apollo-client":"^2.6.3","babel-jest":"^24.8.0","graphql":"^14.3.1","jest":"24.7.1","react":"^16.8.6","react-apollo":"^3.1.0","react-dom":"^16.8.6","react-test-renderer":"^16.8.6","ts-jest":"^24.0.2","typescript":"^4.1.3"},"jest":{"globals":{"ts-jest":{"tsConfig":"<rootDir>/tsconfig.json"}},"collectCoverageFrom":["<rootDir>/src/**","!<rootDir>/**/__tests__/**"],"moduleFileExtensions":["ts","tsx","js","jsx"],"transform":{"^.+\\.(ts|tsx)$":"ts-jest"},"testMatch":["**/__tests__/**/*.[jt]s?(x)","**/?(*.)+(spec|test).[jt]s?(x)"]},"license":"MIT","_id":"@8base/client-web-file-input@1.0.6","readme":"# File Manager (PACKAGE ONLY FOR CLIENT WEB!!!)\n\nThis package provides a simple tool for uploading files to a server or a custom s3 AWS service. Related with  [8base](https://8base.com/)\n\n## Installation\n\nYou can install the package via yarn | npm:\n\n```bash\nyarn add @8base/file-manager\nnpm install @8base/file-manager --save\n```\n\n# Usage\n\n1- Import the package using the following snippet when you want to use it in your project.\n\n```js\nimport { FileManager } from '@8base/file-manager';\n```\n2- Create a new instance of the `FileManager` class and pass an object with the required configuration parameters. The available options are:\n\n| Option | Type     | Description                                                |\n| :-------- | :------- | :--------------------------------------------------------- |\n| **apiKey** | `string` | Your 8base API key, can be found in your [profile](https://app.8base.com/#/settings) |\n| **workspace** | `number` | The workspace id of the app you want to upload files to |\n| **environment** | `string` | the environment id, if you don't know it, by default is 'Master' (default: https://api-eu-west-1.graph.8base.com/v0) |\n| **useFilestack** | `boolean` | Set this option to true if you want to use [filestack](https://www.filestack.com/) as a storage provider |\n| **useS3** | `boolean` | Set this option to true if you want to use AWS S3 service as a storage provider (default: false) |\n| **maxFiles** | `string` | Number of  files that can be uploaded at once |\n| **value** | `string` | value for the input field |\n| **onChange** | `function` | callback function when file is selected |\n\n3- You must have a apollo provider  in your app.jsx or index.jsx to use this package:\n\n```js\nconst API_TOKEN = 'xxxxxxx-xxxx-xxxx-xxxx-xxxx'\n\n// Create a middleware that adds the API token to the request headers\nconst authLink = setContext((_, { headers }) => {\n  return {\n    headers: {\n      ...headers,\n      authorization: API_TOKEN ? `Bearer ${API_TOKEN}` : '',\n    },\n  };\n});\n\nconst httpLink = createHttpLink({\n  uri: `https://api.8base.com/<your-workspace-id>`,\n});\n\nconst client = new ApolloClient({\n  link: authLink.concat(httpLink),\n  cache: new InMemoryCache(),\n});\n\nReactDOM.render(\n  <React.StrictMode>\n    <ApolloProvider client={ client }>\n      <App />\n    </ApolloProvider>\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n```\n\n## Important Notes\n- You must pass the `apiKey` to your app in order for this package to work.\n- You must configure first on your 8base backend workspace the settings related with the storage provider you want to use (see below).\n    - If you don't have any workspace, create one and then go to the settings page and add a new app service:\n    - [File Storage](https://app.8base.com/workspace/<your-workspace-id>/app-services/storageservice)\n\n\n","readmeFilename":"README.md","gitHead":"be2c6aa8f71248d0f4ecc5c085e159f9aba10d97","_nodeVersion":"18.18.2","_npmVersion":"9.8.1","dist":{"integrity":"sha512-f6EgvZ+PtQ+xLE7rK99Msv0Ux4+Ap2nmOcxVECqoFtS/QHQwGskypcKA/Ex280VZgweIfbuxsL1VNx5Ab0F/KQ==","shasum":"f750d58e242a9d8ee43694f929254e93b9597c46","tarball":"https://registry.npmjs.org/@8base/client-web-file-input/-/client-web-file-input-1.0.6.tgz","fileCount":134,"unpackedSize":145296,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE/lXkzxG8hJh71AJ37muh1kX3/0j4oJt0ipgqTZH6sdAiEAkxalim0og2HzFpMcJnil1RDJflySCgo/KcauBZwX1po="}]},"_npmUser":{"name":"dav1nx1","email":"oscar.corcho@8base.com"},"directories":{},"maintainers":[{"name":"dav1nx1","email":"oscar.corcho@8base.com"},{"name":"jorge.osorio","email":"jorge.osorio@8base.com"},{"name":"8base-bot","email":"npmpublisher@8base.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/client-web-file-input_1.0.6_1709571043384_0.08541746365436831"},"_hasShrinkwrap":false},"1.0.7":{"name":"@8base/client-web-file-input","version":"1.0.7","description":"Component integrated with filestack with the capability to add a custom s3 host outside 8base","main":"dist/index.js","module":"dist/index.js","typings":"dist/index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"yarn tsc -p .","prettier:base":"prettier --parser typescript --single-quote","prettier:check":"npm run prettier:base -- --list-different \"{src}/**/*.{ts,tsx}\"","prettier:write":"npm run prettier:base -- --write \"{src}/**/*.{ts,tsx}\""},"peerDependencies":{"apollo-client":"^2.6.3","graphql":"^14.0.0","react":"^16.8.6","react-apollo":"^3.1.0","react-dom":"^16.8.6"},"dependencies":{"@emotion/css":"^11.11.2","@types/react":"^18.2.61","filestack-js":"3.7.0","graphql-tag":"^2.10.0","react-dropzone":"^11.3.4"},"devDependencies":{"@babel/core":"^7.4.3","@types/graphql":"^14.2.0","@types/jest":"^24.0.13","apollo-client":"^2.6.3","babel-jest":"^24.8.0","graphql":"^14.3.1","jest":"24.7.1","react":"^16.8.6","react-apollo":"^3.1.0","react-dom":"^16.8.6","react-test-renderer":"^16.8.6","ts-jest":"^24.0.2","typescript":"^4.1.3"},"jest":{"globals":{"ts-jest":{"tsConfig":"<rootDir>/tsconfig.json"}},"collectCoverageFrom":["<rootDir>/src/**","!<rootDir>/**/__tests__/**"],"moduleFileExtensions":["ts","tsx","js","jsx"],"transform":{"^.+\\.(ts|tsx)$":"ts-jest"},"testMatch":["**/__tests__/**/*.[jt]s?(x)","**/?(*.)+(spec|test).[jt]s?(x)"]},"license":"MIT","_id":"@8base/client-web-file-input@1.0.7","readme":"# File Manager (PACKAGE ONLY FOR CLIENT WEB!!!)\n\nThis package provides a simple tool for uploading files to a server or a custom s3 AWS service. Related with  [8base](https://8base.com/)\n\n## Installation\n\nYou can install the package via yarn | npm:\n\n```bash\nyarn add @8base/file-manager\nnpm install @8base/file-manager --save\n```\n\n# Usage\n\n1- Import the package using the following snippet when you want to use it in your project.\n\n```js\nimport { FileManager } from '@8base/file-manager';\n```\n2- Create a new instance of the `FileManager` class and pass an object with the required configuration parameters. The available options are:\n\n| Option | Type     | Description                                                |\n| :-------- | :------- | :--------------------------------------------------------- |\n| **apiKey** | `string` | Your 8base API key, can be found in your [profile](https://app.8base.com/#/settings) |\n| **workspace** | `number` | The workspace id of the app you want to upload files to |\n| **environment** | `string` | the environment id, if you don't know it, by default is 'Master' (default: https://api-eu-west-1.graph.8base.com/v0) |\n| **useFilestack** | `boolean` | Set this option to true if you want to use [filestack](https://www.filestack.com/) as a storage provider |\n| **useS3** | `boolean` | Set this option to true if you want to use AWS S3 service as a storage provider (default: false) |\n| **maxFiles** | `string` | Number of  files that can be uploaded at once |\n| **value** | `string` | value for the input field |\n| **onChange** | `function` | callback function when file is selected |\n\n3- You must have a apollo provider  in your app.jsx or index.jsx to use this package:\n\n```js\nconst API_TOKEN = 'xxxxxxx-xxxx-xxxx-xxxx-xxxx'\n\n// Create a middleware that adds the API token to the request headers\nconst authLink = setContext((_, { headers }) => {\n  return {\n    headers: {\n      ...headers,\n      authorization: API_TOKEN ? `Bearer ${API_TOKEN}` : '',\n    },\n  };\n});\n\nconst httpLink = createHttpLink({\n  uri: `https://api.8base.com/<your-workspace-id>`,\n});\n\nconst client = new ApolloClient({\n  link: authLink.concat(httpLink),\n  cache: new InMemoryCache(),\n});\n\nReactDOM.render(\n  <React.StrictMode>\n    <ApolloProvider client={ client }>\n      <App />\n    </ApolloProvider>\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n```\n\n## Important Notes\n- You must pass the `apiKey` to your app in order for this package to work.\n- You must configure first on your 8base backend workspace the settings related with the storage provider you want to use (see below).\n    - If you don't have any workspace, create one and then go to the settings page and add a new app service:\n    - [File Storage](https://app.8base.com/workspace/<your-workspace-id>/app-services/storageservice)\n\n\n","readmeFilename":"README.md","gitHead":"98914ad8af1bf77128a8bf7c1ce47b2d55ec57a3","_nodeVersion":"18.18.2","_npmVersion":"9.8.1","dist":{"integrity":"sha512-UuUOeT2xdFzZPAr729RFadanbGcRdnTxdK0kVeT6q+hgrMNlhdlKPPLxyZ/xwTPdQwHvqRLE1s1yHlkUZioIBg==","shasum":"7bb9aef4760fa9f0262b856b8a4ea04592800f22","tarball":"https://registry.npmjs.org/@8base/client-web-file-input/-/client-web-file-input-1.0.7.tgz","fileCount":134,"unpackedSize":145284,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFS0HgovvtvKM37ZnYt8rYPpvL+p6rNXwTBqVcGCAc1iAiBvtKHPkXpT1B441+A+Qr3qw4IKlRR0YfCkxt2u/OagyA=="}]},"_npmUser":{"name":"dav1nx1","email":"oscar.corcho@8base.com"},"directories":{},"maintainers":[{"name":"dav1nx1","email":"oscar.corcho@8base.com"},{"name":"jorge.osorio","email":"jorge.osorio@8base.com"},{"name":"8base-bot","email":"npmpublisher@8base.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/client-web-file-input_1.0.7_1709575045445_0.495826992599371"},"_hasShrinkwrap":false},"1.0.8":{"name":"@8base/client-web-file-input","version":"1.0.8","description":"Component integrated with filestack with the capability to add a custom s3 host outside 8base","main":"dist/index.js","module":"dist/index.js","typings":"dist/index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"yarn tsc -p .","prettier:base":"prettier --parser typescript --single-quote","prettier:check":"npm run prettier:base -- --list-different \"{src}/**/*.{ts,tsx}\"","prettier:write":"npm run prettier:base -- --write \"{src}/**/*.{ts,tsx}\""},"peerDependencies":{"apollo-client":"^2.6.3","graphql":"^14.0.0","react":"^16.8.6","react-apollo":"^3.1.0","react-dom":"^16.8.6"},"dependencies":{"@emotion/css":"^11.11.2","@types/react":"^18.2.61","filestack-js":"3.7.0","graphql-tag":"^2.10.0","react-dropzone":"^11.3.4"},"devDependencies":{"@babel/core":"^7.4.3","@types/graphql":"^14.2.0","@types/jest":"^24.0.13","apollo-client":"^2.6.3","babel-jest":"^24.8.0","graphql":"^14.3.1","jest":"24.7.1","react":"^16.8.6","react-apollo":"^3.1.0","react-dom":"^16.8.6","react-test-renderer":"^16.8.6","ts-jest":"^24.0.2","typescript":"^4.1.3"},"jest":{"globals":{"ts-jest":{"tsConfig":"<rootDir>/tsconfig.json"}},"collectCoverageFrom":["<rootDir>/src/**","!<rootDir>/**/__tests__/**"],"moduleFileExtensions":["ts","tsx","js","jsx"],"transform":{"^.+\\.(ts|tsx)$":"ts-jest"},"testMatch":["**/__tests__/**/*.[jt]s?(x)","**/?(*.)+(spec|test).[jt]s?(x)"]},"license":"MIT","_id":"@8base/client-web-file-input@1.0.8","readme":"# File Manager (PACKAGE ONLY FOR CLIENT WEB!!!)\n\nThis package provides a simple tool for uploading files to a server or a custom s3 AWS service. Related with  [8base](https://8base.com/)\n\n## Installation\n\nYou can install the package via yarn | npm:\n\n```bash\nyarn add @8base/file-manager\nnpm install @8base/file-manager --save\n```\n\n# Usage\n\n1- Import the package using the following snippet when you want to use it in your project.\n\n```js\nimport { FileManager } from '@8base/file-manager';\n```\n2- Create a new instance of the `FileManager` class and pass an object with the required configuration parameters. The available options are:\n\n| Option | Type     | Description                                                |\n| :-------- | :------- | :--------------------------------------------------------- |\n| **apiKey** | `string` | Your 8base API key, can be found in your [profile](https://app.8base.com/#/settings) |\n| **workspace** | `number` | The workspace id of the app you want to upload files to |\n| **environment** | `string` | the environment id, if you don't know it, by default is 'Master' (default: https://api-eu-west-1.graph.8base.com/v0) |\n| **useFilestack** | `boolean` | Set this option to true if you want to use [filestack](https://www.filestack.com/) as a storage provider |\n| **useS3** | `boolean` | Set this option to true if you want to use AWS S3 service as a storage provider (default: false) |\n| **maxFiles** | `string` | Number of  files that can be uploaded at once |\n| **value** | `string` | value for the input field |\n| **onChange** | `function` | callback function when file is selected |\n\n3- You must have a apollo provider  in your app.jsx or index.jsx to use this package:\n\n```js\nconst API_TOKEN = 'xxxxxxx-xxxx-xxxx-xxxx-xxxx'\n\n// Create a middleware that adds the API token to the request headers\nconst authLink = setContext((_, { headers }) => {\n  return {\n    headers: {\n      ...headers,\n      authorization: API_TOKEN ? `Bearer ${API_TOKEN}` : '',\n    },\n  };\n});\n\nconst httpLink = createHttpLink({\n  uri: `https://api.8base.com/<your-workspace-id>`,\n});\n\nconst client = new ApolloClient({\n  link: authLink.concat(httpLink),\n  cache: new InMemoryCache(),\n});\n\nReactDOM.render(\n  <React.StrictMode>\n    <ApolloProvider client={ client }>\n      <App />\n    </ApolloProvider>\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n```\n\n## Important Notes\n- You must pass the `apiKey` to your app in order for this package to work.\n- You must configure first on your 8base backend workspace the settings related with the storage provider you want to use (see below).\n    - If you don't have any workspace, create one and then go to the settings page and add a new app service:\n    - [File Storage](https://app.8base.com/workspace/<your-workspace-id>/app-services/storageservice)\n\n\n","readmeFilename":"README.md","gitHead":"7a45d9e8f08f4a600fbe1e01e2e40b1b6a18fcba","_nodeVersion":"18.18.2","_npmVersion":"9.8.1","dist":{"integrity":"sha512-Up9GqOtQVuWvzferbbEMVtK0QLXz3KsOtBYtrNQKJfo/jsWc2SEOpfeHOnozgxbhBQ5x14ET0VjuJJe95eQ0xQ==","shasum":"88cfffe441560a184b3d21215057a1afc9039d12","tarball":"https://registry.npmjs.org/@8base/client-web-file-input/-/client-web-file-input-1.0.8.tgz","fileCount":134,"unpackedSize":145284,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDl4efweZ9T+rn+79UULBhAllUKKAuYJHYRZbVa6fYhegIgFHZUASLNulOANKl0Kb6cYl8BsXi13A+e3IH+vsiocPA="}]},"_npmUser":{"name":"dav1nx1","email":"oscar.corcho@8base.com"},"directories":{},"maintainers":[{"name":"dav1nx1","email":"oscar.corcho@8base.com"},{"name":"jorge.osorio","email":"jorge.osorio@8base.com"},{"name":"8base-bot","email":"npmpublisher@8base.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/client-web-file-input_1.0.8_1709584259107_0.7907064512640871"},"_hasShrinkwrap":false},"1.0.9":{"name":"@8base/client-web-file-input","version":"1.0.9","description":"Component integrated with filestack with the capability to add a custom s3 host outside 8base","main":"dist/index.js","module":"dist/index.js","typings":"dist/index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"yarn tsc -p .","prettier:base":"prettier --parser typescript --single-quote","prettier:check":"npm run prettier:base -- --list-different \"{src}/**/*.{ts,tsx}\"","prettier:write":"npm run prettier:base -- --write \"{src}/**/*.{ts,tsx}\""},"peerDependencies":{"apollo-client":"^2.6.3","graphql":"^14.0.0","react":"^16.8.6","react-apollo":"^3.1.0","react-dom":"^16.8.6"},"dependencies":{"@emotion/css":"^11.11.2","@types/react":"^18.2.61","filestack-js":"3.7.0","graphql-tag":"^2.10.0","react-dropzone":"^11.3.4"},"devDependencies":{"@babel/core":"^7.4.3","@types/graphql":"^14.2.0","@types/jest":"^24.0.13","apollo-client":"^2.6.3","babel-jest":"^24.8.0","graphql":"^14.3.1","jest":"24.7.1","react":"^16.8.6","react-apollo":"^3.1.0","react-dom":"^16.8.6","react-test-renderer":"^16.8.6","ts-jest":"^24.0.2","typescript":"^4.1.3"},"jest":{"globals":{"ts-jest":{"tsConfig":"<rootDir>/tsconfig.json"}},"collectCoverageFrom":["<rootDir>/src/**","!<rootDir>/**/__tests__/**"],"moduleFileExtensions":["ts","tsx","js","jsx"],"transform":{"^.+\\.(ts|tsx)$":"ts-jest"},"testMatch":["**/__tests__/**/*.[jt]s?(x)","**/?(*.)+(spec|test).[jt]s?(x)"]},"license":"MIT","_id":"@8base/client-web-file-input@1.0.9","readme":"# File Manager (PACKAGE ONLY FOR CLIENT WEB!!!)\n\nThis package provides a simple tool for uploading files to a server or a custom s3 AWS service. Related with  [8base](https://8base.com/)\n\n## Installation\n\nYou can install the package via yarn | npm:\n\n```bash\nyarn add @8base/file-manager\nnpm install @8base/file-manager --save\n```\n\n# Usage\n\n1- Import the package using the following snippet when you want to use it in your project.\n\n```js\nimport { FileManager } from '@8base/file-manager';\n```\n2- Create a new instance of the `FileManager` class and pass an object with the required configuration parameters. The available options are:\n\n| Option | Type     | Description                                                |\n| :-------- | :------- | :--------------------------------------------------------- |\n| **apiKey** | `string` | Your 8base API key, can be found in your [profile](https://app.8base.com/#/settings) |\n| **workspace** | `number` | The workspace id of the app you want to upload files to |\n| **environment** | `string` | the environment id, if you don't know it, by default is 'Master' (default: https://api-eu-west-1.graph.8base.com/v0) |\n| **useFilestack** | `boolean` | Set this option to true if you want to use [filestack](https://www.filestack.com/) as a storage provider |\n| **useS3** | `boolean` | Set this option to true if you want to use AWS S3 service as a storage provider (default: false) |\n| **maxFiles** | `string` | Number of  files that can be uploaded at once |\n| **value** | `string` | value for the input field |\n| **onChange** | `function` | callback function when file is selected |\n\n3- You must have a apollo provider  in your app.jsx or index.jsx to use this package:\n\n```js\nconst API_TOKEN = 'xxxxxxx-xxxx-xxxx-xxxx-xxxx'\n\n// Create a middleware that adds the API token to the request headers\nconst authLink = setContext((_, { headers }) => {\n  return {\n    headers: {\n      ...headers,\n      authorization: API_TOKEN ? `Bearer ${API_TOKEN}` : '',\n    },\n  };\n});\n\nconst httpLink = createHttpLink({\n  uri: `https://api.8base.com/<your-workspace-id>`,\n});\n\nconst client = new ApolloClient({\n  link: authLink.concat(httpLink),\n  cache: new InMemoryCache(),\n});\n\nReactDOM.render(\n  <React.StrictMode>\n    <ApolloProvider client={ client }>\n      <App />\n    </ApolloProvider>\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n```\n\n## Important Notes\n- You must pass the `apiKey` to your app in order for this package to work.\n- You must configure first on your 8base backend workspace the settings related with the storage provider you want to use (see below).\n    - If you don't have any workspace, create one and then go to the settings page and add a new app service:\n    - [File Storage](https://app.8base.com/workspace/<your-workspace-id>/app-services/storageservice)\n\n\n","readmeFilename":"README.md","gitHead":"7a45d9e8f08f4a600fbe1e01e2e40b1b6a18fcba","_nodeVersion":"18.18.2","_npmVersion":"9.8.1","dist":{"integrity":"sha512-scPT/jkJrhN4/gXVmFtrm0j26tu1GXQdTehVgWKTFWxwWQoqwGlWrC1GrOw4RwD1eGiLwXtIqWygCICfJzXnug==","shasum":"c404c9681aba21081303f1d8bfd4275252036dfa","tarball":"https://registry.npmjs.org/@8base/client-web-file-input/-/client-web-file-input-1.0.9.tgz","fileCount":134,"unpackedSize":148065,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC16vDPOGQFxTghQgcp4H+Za5dWujVTVhEBazc3QgNAPAIgcn1LpNEgMQ1pzeDvT7K0lF0BzlTpJsQQfuyfqbhYjkA="}]},"_npmUser":{"name":"dav1nx1","email":"oscar.corcho@8base.com"},"directories":{},"maintainers":[{"name":"dav1nx1","email":"oscar.corcho@8base.com"},{"name":"jorge.osorio","email":"jorge.osorio@8base.com"},{"name":"8base-bot","email":"npmpublisher@8base.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/client-web-file-input_1.0.9_1709591412576_0.13728187790377122"},"_hasShrinkwrap":false},"1.0.10":{"name":"@8base/client-web-file-input","version":"1.0.10","description":"Component integrated with filestack with the capability to add a custom s3 host outside 8base","main":"dist/index.js","module":"dist/index.js","typings":"dist/index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"yarn tsc -p .","prettier:base":"prettier --parser typescript --single-quote","prettier:check":"npm run prettier:base -- --list-different \"{src}/**/*.{ts,tsx}\"","prettier:write":"npm run prettier:base -- --write \"{src}/**/*.{ts,tsx}\""},"peerDependencies":{"apollo-client":"^2.6.3","graphql":"^14.0.0","react":"^16.8.6","react-apollo":"^3.1.0","react-dom":"^16.8.6"},"dependencies":{"@emotion/css":"^11.11.2","@types/react":"^18.2.61","filestack-js":"3.7.0","graphql-tag":"^2.10.0","react-dropzone":"^11.3.4"},"devDependencies":{"@babel/core":"^7.4.3","@types/graphql":"^14.2.0","@types/jest":"^24.0.13","apollo-client":"^2.6.3","babel-jest":"^24.8.0","graphql":"^14.3.1","jest":"24.7.1","react":"^16.8.6","react-apollo":"^3.1.0","react-dom":"^16.8.6","react-test-renderer":"^16.8.6","ts-jest":"^24.0.2","typescript":"^4.1.3"},"jest":{"globals":{"ts-jest":{"tsConfig":"<rootDir>/tsconfig.json"}},"collectCoverageFrom":["<rootDir>/src/**","!<rootDir>/**/__tests__/**"],"moduleFileExtensions":["ts","tsx","js","jsx"],"transform":{"^.+\\.(ts|tsx)$":"ts-jest"},"testMatch":["**/__tests__/**/*.[jt]s?(x)","**/?(*.)+(spec|test).[jt]s?(x)"]},"license":"MIT","readme":"# File Manager (PACKAGE ONLY FOR CLIENT WEB!!!)\n\nThis package provides a simple tool for uploading files to a server or a custom s3 AWS service. Related with  [8base](https://8base.com/)\n\n## Installation\n\nYou can install the package via yarn | npm:\n\n```bash\nyarn add @8base/file-manager\nnpm install @8base/file-manager --save\n```\n\n# Usage\n\n1- Import the package using the following snippet when you want to use it in your project.\n\n```js\nimport { FileManager } from '@8base/file-manager';\n```\n2- Create a new instance of the `FileManager` class and pass an object with the required configuration parameters. The available options are:\n\n| Option | Type     | Description                                                |\n| :-------- | :------- | :--------------------------------------------------------- |\n| **apiKey** | `string` | Your 8base API key, can be found in your [profile](https://app.8base.com/#/settings) |\n| **workspace** | `number` | The workspace id of the app you want to upload files to |\n| **environment** | `string` | the environment id, if you don't know it, by default is 'Master' (default: https://api-eu-west-1.graph.8base.com/v0) |\n| **useFilestack** | `boolean` | Set this option to true if you want to use [filestack](https://www.filestack.com/) as a storage provider |\n| **useS3** | `boolean` | Set this option to true if you want to use AWS S3 service as a storage provider (default: false) |\n| **maxFiles** | `string` | Number of  files that can be uploaded at once |\n| **value** | `string` | value for the input field |\n| **onChange** | `function` | callback function when file is selected |\n\n3- You must have a apollo provider  in your app.jsx or index.jsx to use this package:\n\n```js\nconst API_TOKEN = 'xxxxxxx-xxxx-xxxx-xxxx-xxxx'\n\n// Create a middleware that adds the API token to the request headers\nconst authLink = setContext((_, { headers }) => {\n  return {\n    headers: {\n      ...headers,\n      authorization: API_TOKEN ? `Bearer ${API_TOKEN}` : '',\n    },\n  };\n});\n\nconst httpLink = createHttpLink({\n  uri: `https://api.8base.com/<your-workspace-id>`,\n});\n\nconst client = new ApolloClient({\n  link: authLink.concat(httpLink),\n  cache: new InMemoryCache(),\n});\n\nReactDOM.render(\n  <React.StrictMode>\n    <ApolloProvider client={ client }>\n      <App />\n    </ApolloProvider>\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n```\n\n## Important Notes\n- You must pass the `apiKey` to your app in order for this package to work.\n- You must configure first on your 8base backend workspace the settings related with the storage provider you want to use (see below).\n    - If you don't have any workspace, create one and then go to the settings page and add a new app service:\n    - [File Storage](https://app.8base.com/workspace/<your-workspace-id>/app-services/storageservice)\n\n\n","readmeFilename":"README.md","gitHead":"6b11bb1bf5f1b16f4b0b0531b768748e554203ca","_id":"@8base/client-web-file-input@1.0.10","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-tbr7Y422/rWhBtX2bjvLlt9h24v5luG4Pw+4rvebyqy9sgvtBQDIklTljdeHAGCGK2Iibk9U5nVKFclCY7SL/w==","shasum":"b1bd3e3a4620be6edb217be770a7d7ba963bb8a8","tarball":"https://registry.npmjs.org/@8base/client-web-file-input/-/client-web-file-input-1.0.10.tgz","fileCount":102,"unpackedSize":99750,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDh/HAEfDsKBqJo7JB5RrVzJIZCqDKj8aTf39sE2BMfAQIhANUnOOGNmsUc3LI1RRmrTCEFMDO25bsIHf2s5AOosuC1"}]},"_npmUser":{"name":"dav1nx1","email":"oscar.corcho@8base.com"},"directories":{},"maintainers":[{"name":"dav1nx1","email":"oscar.corcho@8base.com"},{"name":"jorge.osorio","email":"jorge.osorio@8base.com"},{"name":"8base-bot","email":"npmpublisher@8base.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/client-web-file-input_1.0.10_1709732633078_0.4587225668737165"},"_hasShrinkwrap":false},"1.0.11":{"name":"@8base/client-web-file-input","version":"1.0.11","description":"Component integrated with filestack with the capability to add a custom s3 host outside 8base","main":"dist/index.js","module":"dist/index.js","typings":"dist/index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"yarn tsc -p .","prettier:base":"prettier --parser typescript --single-quote","prettier:check":"npm run prettier:base -- --list-different \"{src}/**/*.{ts,tsx}\"","prettier:write":"npm run prettier:base -- --write \"{src}/**/*.{ts,tsx}\""},"peerDependencies":{"apollo-client":"^2.6.3","graphql":"^14.0.0","react":"^16.8.6","react-apollo":"^3.1.0","react-dom":"^16.8.6"},"dependencies":{"@emotion/css":"^11.11.2","@types/react":"^18.2.61","filestack-js":"3.7.0","graphql-tag":"^2.10.0","react-dropzone":"^11.3.4"},"devDependencies":{"@babel/core":"^7.4.3","@types/graphql":"^14.2.0","@types/jest":"^24.0.13","apollo-client":"^2.6.3","babel-jest":"^24.8.0","graphql":"^14.3.1","jest":"24.7.1","react":"^16.8.6","react-apollo":"^3.1.0","react-dom":"^16.8.6","react-test-renderer":"^16.8.6","ts-jest":"^24.0.2","typescript":"^4.1.3"},"jest":{"globals":{"ts-jest":{"tsConfig":"<rootDir>/tsconfig.json"}},"collectCoverageFrom":["<rootDir>/src/**","!<rootDir>/**/__tests__/**"],"moduleFileExtensions":["ts","tsx","js","jsx"],"transform":{"^.+\\.(ts|tsx)$":"ts-jest"},"testMatch":["**/__tests__/**/*.[jt]s?(x)","**/?(*.)+(spec|test).[jt]s?(x)"]},"license":"MIT","readme":"# File Manager (PACKAGE ONLY FOR CLIENT WEB!!!)\n\nThis package provides a simple tool for uploading files to a server or a custom s3 AWS service. Related with  [8base](https://8base.com/)\n\n## Installation\n\nYou can install the package via yarn | npm:\n\n```bash\nyarn add @8base/file-manager\nnpm install @8base/file-manager --save\n```\n\n# Usage\n\n1- Import the package using the following snippet when you want to use it in your project.\n\n```js\nimport { FileManager } from '@8base/file-manager';\n```\n2- Create a new instance of the `FileManager` class and pass an object with the required configuration parameters. The available options are:\n\n| Option | Type     | Description                                                |\n| :-------- | :------- | :--------------------------------------------------------- |\n| **apiKey** | `string` | Your 8base API key, can be found in your [profile](https://app.8base.com/#/settings) |\n| **workspace** | `number` | The workspace id of the app you want to upload files to |\n| **environment** | `string` | the environment id, if you don't know it, by default is 'Master' (default: https://api-eu-west-1.graph.8base.com/v0) |\n| **useFilestack** | `boolean` | Set this option to true if you want to use [filestack](https://www.filestack.com/) as a storage provider |\n| **useS3** | `boolean` | Set this option to true if you want to use AWS S3 service as a storage provider (default: false) |\n| **maxFiles** | `string` | Number of  files that can be uploaded at once |\n| **value** | `string` | value for the input field |\n| **onChange** | `function` | callback function when file is selected |\n\n3- You must have a apollo provider  in your app.jsx or index.jsx to use this package:\n\n```js\nconst API_TOKEN = 'xxxxxxx-xxxx-xxxx-xxxx-xxxx'\n\n// Create a middleware that adds the API token to the request headers\nconst authLink = setContext((_, { headers }) => {\n  return {\n    headers: {\n      ...headers,\n      authorization: API_TOKEN ? `Bearer ${API_TOKEN}` : '',\n    },\n  };\n});\n\nconst httpLink = createHttpLink({\n  uri: `https://api.8base.com/<your-workspace-id>`,\n});\n\nconst client = new ApolloClient({\n  link: authLink.concat(httpLink),\n  cache: new InMemoryCache(),\n});\n\nReactDOM.render(\n  <React.StrictMode>\n    <ApolloProvider client={ client }>\n      <App />\n    </ApolloProvider>\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n```\n\n## Important Notes\n- You must pass the `apiKey` to your app in order for this package to work.\n- You must configure first on your 8base backend workspace the settings related with the storage provider you want to use (see below).\n    - If you don't have any workspace, create one and then go to the settings page and add a new app service:\n    - [File Storage](https://app.8base.com/workspace/<your-workspace-id>/app-services/storageservice)\n\n\n","readmeFilename":"README.md","gitHead":"6f315874da41478d2c4d49a8be84e4d9bd4a65d8","_id":"@8base/client-web-file-input@1.0.11","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-tqcQZbACZAgmC4s4jZfDesfvFtmOmUwgz37m01Cj0y+qSCvAljYB5KF4x6IrTTx3snmLv5gjD5oy3Xtwjisp0A==","shasum":"5c3af8ec7a1d6f75091511b7f5eff1bf37e522a9","tarball":"https://registry.npmjs.org/@8base/client-web-file-input/-/client-web-file-input-1.0.11.tgz","fileCount":102,"unpackedSize":99459,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG833W18AUmMpiAVCUqIfLM9Aq8kL8kRFbU3PKpGecfJAiEAglo1M9W+DPLuNPQxnaLomZrdo9koC8TK+brK1g8NVEA="}]},"_npmUser":{"name":"dav1nx1","email":"oscar.corcho@8base.com"},"directories":{},"maintainers":[{"name":"dav1nx1","email":"oscar.corcho@8base.com"},{"name":"jorge.osorio","email":"jorge.osorio@8base.com"},{"name":"8base-bot","email":"npmpublisher@8base.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/client-web-file-input_1.0.11_1709739246969_0.6902289546769638"},"_hasShrinkwrap":false},"1.0.12":{"name":"@8base/client-web-file-input","version":"1.0.12","description":"Component integrated with filestack with the capability to add a custom s3 host outside 8base","main":"dist/index.js","module":"dist/index.js","typings":"dist/index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"yarn tsc -p .","prettier:base":"prettier --parser typescript --single-quote","prettier:check":"npm run prettier:base -- --list-different \"{src}/**/*.{ts,tsx}\"","prettier:write":"npm run prettier:base -- --write \"{src}/**/*.{ts,tsx}\""},"peerDependencies":{"apollo-client":"^2.6.3","graphql":"^14.0.0","react":"^16.8.6","react-apollo":"^3.1.0","react-dom":"^16.8.6"},"dependencies":{"@emotion/css":"^11.11.2","@types/react":"^18.2.61","filestack-js":"3.7.0","graphql-tag":"^2.10.0","react-dropzone":"^11.3.4"},"devDependencies":{"@babel/core":"^7.4.3","@types/graphql":"^14.2.0","@types/jest":"^24.0.13","apollo-client":"^2.6.3","babel-jest":"^24.8.0","graphql":"^14.3.1","jest":"24.7.1","react":"^16.8.6","react-apollo":"^3.1.0","react-dom":"^16.8.6","react-test-renderer":"^16.8.6","ts-jest":"^24.0.2","typescript":"^4.1.3"},"jest":{"globals":{"ts-jest":{"tsConfig":"<rootDir>/tsconfig.json"}},"collectCoverageFrom":["<rootDir>/src/**","!<rootDir>/**/__tests__/**"],"moduleFileExtensions":["ts","tsx","js","jsx"],"transform":{"^.+\\.(ts|tsx)$":"ts-jest"},"testMatch":["**/__tests__/**/*.[jt]s?(x)","**/?(*.)+(spec|test).[jt]s?(x)"]},"license":"MIT","readme":"# File Manager (PACKAGE ONLY FOR CLIENT WEB!!!)\n\nThis package provides a simple tool for uploading files to a server or a custom s3 AWS service. Related with  [8base](https://8base.com/)\n\n## Installation\n\nYou can install the package via yarn | npm:\n\n```bash\nyarn add @8base/file-manager\nnpm install @8base/file-manager --save\n```\n\n# Usage\n\n1- Import the package using the following snippet when you want to use it in your project.\n\n```js\nimport { FileManager } from '@8base/file-manager';\n```\n2- Create a new instance of the `FileManager` class and pass an object with the required configuration parameters. The available options are:\n\n| Option | Type     | Description                                                |\n| :-------- | :------- | :--------------------------------------------------------- |\n| **apiKey** | `string` | Your 8base API key, can be found in your [profile](https://app.8base.com/#/settings) |\n| **workspace** | `number` | The workspace id of the app you want to upload files to |\n| **environment** | `string` | the environment id, if you don't know it, by default is 'Master' (default: https://api-eu-west-1.graph.8base.com/v0) |\n| **useFilestack** | `boolean` | Set this option to true if you want to use [filestack](https://www.filestack.com/) as a storage provider |\n| **useS3** | `boolean` | Set this option to true if you want to use AWS S3 service as a storage provider (default: false) |\n| **maxFiles** | `string` | Number of  files that can be uploaded at once |\n| **value** | `string` | value for the input field |\n| **onChange** | `function` | callback function when file is selected |\n\n3- You must have a apollo provider  in your app.jsx or index.jsx to use this package:\n\n```js\nconst API_TOKEN = 'xxxxxxx-xxxx-xxxx-xxxx-xxxx'\n\n// Create a middleware that adds the API token to the request headers\nconst authLink = setContext((_, { headers }) => {\n  return {\n    headers: {\n      ...headers,\n      authorization: API_TOKEN ? `Bearer ${API_TOKEN}` : '',\n    },\n  };\n});\n\nconst httpLink = createHttpLink({\n  uri: `https://api.8base.com/<your-workspace-id>`,\n});\n\nconst client = new ApolloClient({\n  link: authLink.concat(httpLink),\n  cache: new InMemoryCache(),\n});\n\nReactDOM.render(\n  <React.StrictMode>\n    <ApolloProvider client={ client }>\n      <App />\n    </ApolloProvider>\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n```\n\n## Important Notes\n- You must pass the `apiKey` to your app in order for this package to work.\n- You must configure first on your 8base backend workspace the settings related with the storage provider you want to use (see below).\n    - If you don't have any workspace, create one and then go to the settings page and add a new app service:\n    - [File Storage](https://app.8base.com/workspace/<your-workspace-id>/app-services/storageservice)\n\n\n","readmeFilename":"README.md","gitHead":"28d7ca0db0908da2af67899bf992d9a576e42ef9","_id":"@8base/client-web-file-input@1.0.12","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-wCAh3TzY1gQ1vkgr0t5Q7KuUfKdpe6bZjKeH60/21SNRa32mhedhRWCCLhllcNeV0gGUv7TZBKBQ4bbqlRvq+Q==","shasum":"56f1c70edbd3ceb20a8da8b87da5dba628f0fbb5","tarball":"https://registry.npmjs.org/@8base/client-web-file-input/-/client-web-file-input-1.0.12.tgz","fileCount":102,"unpackedSize":99444,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBBsS+a2oOrlxwZx44jqq8tF1HLjaqpIswzeVS/mvumAIgZo8eHxKXN9UIP98aUk/Gxslx5AkCU4HpACH49FodpHA="}]},"_npmUser":{"name":"dav1nx1","email":"oscar.corcho@8base.com"},"directories":{},"maintainers":[{"name":"dav1nx1","email":"oscar.corcho@8base.com"},{"name":"jorge.osorio","email":"jorge.osorio@8base.com"},{"name":"8base-bot","email":"npmpublisher@8base.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/client-web-file-input_1.0.12_1710250196183_0.03951738598284571"},"_hasShrinkwrap":false},"1.0.13":{"name":"@8base/client-web-file-input","version":"1.0.13","description":"Component integrated with filestack with the capability to add a custom s3 host outside 8base","main":"dist/index.js","module":"dist/index.js","typings":"dist/index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"yarn tsc -p .","prettier:base":"prettier --parser typescript --single-quote","prettier:check":"npm run prettier:base -- --list-different \"{src}/**/*.{ts,tsx}\"","prettier:write":"npm run prettier:base -- --write \"{src}/**/*.{ts,tsx}\""},"peerDependencies":{"apollo-client":"^2.6.3","graphql":"^14.0.0","react":"^16.8.6","react-apollo":"^3.1.0","react-dom":"^16.8.6"},"dependencies":{"@emotion/css":"^11.11.2","@types/react":"^18.2.61","filestack-js":"3.7.0","graphql-tag":"^2.10.0","react-dropzone":"^11.3.4"},"devDependencies":{"@babel/core":"^7.4.3","@types/graphql":"^14.2.0","@types/jest":"^24.0.13","apollo-client":"^2.6.3","babel-jest":"^24.8.0","graphql":"^14.3.1","jest":"24.7.1","react":"^16.8.6","react-apollo":"^3.1.0","react-dom":"^16.8.6","react-test-renderer":"^16.8.6","ts-jest":"^24.0.2","typescript":"^4.1.3"},"jest":{"globals":{"ts-jest":{"tsConfig":"<rootDir>/tsconfig.json"}},"collectCoverageFrom":["<rootDir>/src/**","!<rootDir>/**/__tests__/**"],"moduleFileExtensions":["ts","tsx","js","jsx"],"transform":{"^.+\\.(ts|tsx)$":"ts-jest"},"testMatch":["**/__tests__/**/*.[jt]s?(x)","**/?(*.)+(spec|test).[jt]s?(x)"]},"license":"MIT","readme":"# File Manager (PACKAGE ONLY FOR CLIENT WEB!!!)\n\nThis package provides a simple tool for uploading files to a server or a custom s3 AWS service. Related with  [8base](https://8base.com/)\n\n## Installation\n\nYou can install the package via yarn | npm:\n\n```bash\nyarn add @8base/file-manager\nnpm install @8base/file-manager --save\n```\n\n# Usage\n\n1- Import the package using the following snippet when you want to use it in your project.\n\n```js\nimport { FileManager } from '@8base/file-manager';\n```\n2- Create a new instance of the `FileManager` class and pass an object with the required configuration parameters. The available options are:\n\n| Option | Type     | Description                                                |\n| :-------- | :------- | :--------------------------------------------------------- |\n| **apiKey** | `string` | Your 8base API key, can be found in your [profile](https://app.8base.com/#/settings) |\n| **workspace** | `number` | The workspace id of the app you want to upload files to |\n| **environment** | `string` | the environment id, if you don't know it, by default is 'Master' (default: https://api-eu-west-1.graph.8base.com/v0) |\n| **useFilestack** | `boolean` | Set this option to true if you want to use [filestack](https://www.filestack.com/) as a storage provider |\n| **useS3** | `boolean` | Set this option to true if you want to use AWS S3 service as a storage provider (default: false) |\n| **maxFiles** | `string` | Number of  files that can be uploaded at once |\n| **value** | `string` | value for the input field |\n| **onChange** | `function` | callback function when file is selected |\n\n3- You must have a apollo provider  in your app.jsx or index.jsx to use this package:\n\n```js\nconst API_TOKEN = 'xxxxxxx-xxxx-xxxx-xxxx-xxxx'\n\n// Create a middleware that adds the API token to the request headers\nconst authLink = setContext((_, { headers }) => {\n  return {\n    headers: {\n      ...headers,\n      authorization: API_TOKEN ? `Bearer ${API_TOKEN}` : '',\n    },\n  };\n});\n\nconst httpLink = createHttpLink({\n  uri: `https://api.8base.com/<your-workspace-id>`,\n});\n\nconst client = new ApolloClient({\n  link: authLink.concat(httpLink),\n  cache: new InMemoryCache(),\n});\n\nReactDOM.render(\n  <React.StrictMode>\n    <ApolloProvider client={ client }>\n      <App />\n    </ApolloProvider>\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n```\n\n## Important Notes\n- You must pass the `apiKey` to your app in order for this package to work.\n- You must configure first on your 8base backend workspace the settings related with the storage provider you want to use (see below).\n    - If you don't have any workspace, create one and then go to the settings page and add a new app service:\n    - [File Storage](https://app.8base.com/workspace/<your-workspace-id>/app-services/storageservice)\n\n\n","readmeFilename":"README.md","gitHead":"c048a3b2bd59d5d3b30792705823138357c79938","_id":"@8base/client-web-file-input@1.0.13","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-cZJZIm9PVd5pW74rw8mapmT3L9aO3txXYdVVNlli5Do2R3M+Po18z80mvj9de/1NRnVjHImJVe+g53YySZ55wA==","shasum":"ffcf1aaf1338ac74272c64268c38307a6bf322d5","tarball":"https://registry.npmjs.org/@8base/client-web-file-input/-/client-web-file-input-1.0.13.tgz","fileCount":102,"unpackedSize":99239,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1jdTVmVo1DcLELaGjTBw5ahF6nhO9WVsJHttHU85D2gIhAPp1O/LkmzAsILrGIYw72/R7dDnKurwjeQf/pjnkyz3u"}]},"_npmUser":{"name":"dav1nx1","email":"oscar.corcho@8base.com"},"directories":{},"maintainers":[{"name":"dav1nx1","email":"oscar.corcho@8base.com"},{"name":"jorge.osorio","email":"jorge.osorio@8base.com"},{"name":"8base-bot","email":"npmpublisher@8base.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/client-web-file-input_1.0.13_1710258980191_0.561640384195099"},"_hasShrinkwrap":false}},"time":{"created":"2024-03-01T23:13:08.321Z","1.0.0":"2024-03-01T23:13:08.636Z","modified":"2024-03-12T15:56:20.820Z","1.0.1":"2024-03-02T00:25:45.989Z","1.0.2":"2024-03-03T19:47:47.640Z","1.0.3":"2024-03-04T00:44:50.600Z","1.0.4":"2024-03-04T01:42:43.817Z","1.0.5":"2024-03-04T04:37:06.823Z","1.0.6":"2024-03-04T16:50:43.535Z","1.0.7":"2024-03-04T17:57:25.636Z","1.0.8":"2024-03-04T20:30:59.244Z","1.0.9":"2024-03-04T22:30:12.836Z","1.0.10":"2024-03-06T13:43:53.239Z","1.0.11":"2024-03-06T15:34:07.163Z","1.0.12":"2024-03-12T13:29:56.406Z","1.0.13":"2024-03-12T15:56:20.346Z"},"maintainers":[{"name":"dav1nx1","email":"oscar.corcho@8base.com"},{"name":"jorge.osorio","email":"jorge.osorio@8base.com"},{"name":"8base-bot","email":"npmpublisher@8base.com"}],"description":"Component integrated with filestack with the capability to add a custom s3 host outside 8base","license":"MIT","readme":"","readmeFilename":""}