{"_id":"@drtyhu8npm/odio-quam-aliquid","name":"@drtyhu8npm/odio-quam-aliquid","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@drtyhu8npm/odio-quam-aliquid","version":"1.0.0","description":"

\"Bytescale \"Bytescale\n \n \"Bytescale\n \n

\n

Beautiful File Upload Widget for React
(With Built-in Cloud Storage)

\n
\n

\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n
\n\n \n \n \n\n \n \n \n\n \n \"Twitter\n \n\n

\n

\n Get Started —\n \n Try on CodePen\n \n

\n\n

\"Upload

\n\n

100% Serverless File Upload Widget
Powered by Bytescale

\n\n\n
\n\n

\n Supports: Image Cropping, Video Previews, Document Previews, Drag & Drop, and more...\n
\n
\n Full Documentation • Headless SDK • Media Processing APIs • Storage • CDN\n

\n\n
\n\n
\n\n## Installation\n\nInstall via NPM:\n\n```shell\nnpm install @bytescale/upload-widget-react\n```\n\nOr via YARN:\n\n```shell\nyarn add @bytescale/upload-widget-react\n```\n\nOr via a `\n```\n\n## Usage\n\n### UploadButton — [Try on CodePen](https://codepen.io/bytescale/pen/popWJpX?editors=0010)\n\nThe `UploadButton` component uses a [render prop](https://reactjs.org/docs/render-props.html) to provide an `onClick` callback to your button element.\n\nWhen clicked, a file upload modal will appear:\n\n```javascript\nimport { UploadButton } from \"@bytescale/upload-widget-react\";\n\n// Full Configuration:\n// https://www.bytescale.com/docs/upload-widget#configuration\nconst options = {\n apiKey: \"free\", // Get API keys from: www.bytescale.com\n maxFileCount: 10\n};\n\nconst MyApp = () => (\n alert(files.map(x => x.fileUrl).join(\"\\n\"))}>\n {({onClick}) =>\n \n }\n \n);\n```\n\nRequired props:\n- `options`\n- `children`\n\nOptional props:\n- `onComplete`\n- `onUpdate`\n\n### UploadDropzone — [Try on CodePen](https://codepen.io/bytescale/pen/LYrMzaB?editors=0010)\n\nThe `UploadDropzone` component renders an inline drag-and-drop file upload dropzone:\n\n```javascript\nimport { UploadDropzone } from \"@bytescale/upload-widget-react\";\n\n// Full Configuration:\n// https://www.bytescale.com/docs/upload-widget#configuration\nconst options = {\n apiKey: \"free\", // Get API keys from: www.bytescale.com\n maxFileCount: 10\n};\n\nconst MyApp = () => (\n {\n console.log(uploadedFiles.map(x => x.fileUrl).join(\"\\n\"))\n }}\n width=\"600px\"\n height=\"375px\" />\n);\n```\n\n> **Special behaviour for dropzones:**\n>\n> `onComplete` only fires if `showFinishButton = true` (when the user clicks \"Finish\").\n>\n> `onUpdate` must be used when `showFinishButton = false`.\n>\n> Default value: `showFinishButton = false`\n\nRequired props:\n- `options`\n\nOptional props:\n- `onComplete`\n- `onUpdate`\n- `width`\n- `height`\n\n## Result\n\nThe callbacks receive a `Array`:\n\n```javascript\n{\n fileUrl: \"https://upcdn.io/FW25...\", // URL to use when serving this file.\n filePath: \"/uploads/example.jpg\", // File path (we recommend saving this to your database).\n\n accountId: \"FW251aX\", // Bytescale account the file was uploaded to.\n\n editedFile: undefined, // Edited file (for image crops). Same structure as below.\n\n originalFile: {\n fileUrl: \"https://upcdn.io/FW25...\", // Uploaded file URL.\n filePath: \"/uploads/example.jpg\", // Uploaded file path (relative to your raw file directory).\n accountId: \"FW251aX\", // Bytescale account the file was uploaded to.\n originalFileName: \"example.jpg\", // Original file name from the user's machine.\n file: { ... }, // Original DOM file object from the element.\n size: 12345, // File size in bytes.\n lastModified: 1663410542397, // Epoch timestamp of when the file was uploaded or updated.\n mime: \"image/jpeg\", // File MIME type.\n metadata: {\n ... // User-provided JSON object.\n },\n tags: [\n \"tag1\", // User-provided & auto-generated tags.\n \"tag2\",\n ...\n ]\n }\n}\n```\n\n## ⚙️ Configuration\n\nAll configuration is optional (except for the `apiKey` field, which is required).\n\n```javascript\nconst options = {\n apiKey: \"free\", // Get API keys from: www.bytescale.com\n locale: myCustomLocale, // EN_US by default. (See \"Localization\" section below.)\n maxFileCount: 5, // Unlimited by default (or 1 if multi: false).\n maxFileSizeBytes: 1024 ** 2, // Unlimited by default.\n mimeTypes: [\"image/*\"], // Unrestricted by default. Supports * wildcard suffix.\n multi: false, // False by default.\n onInit: ({ // Exposes lifecycle methods for the component.\n close, // Closes the widget when called.\n reset, // Resets the widget when called.\n updateConfig // Updates the widget's config by passing a new config\n }) => {}, // object to the method's first parameter.\n onUpdate: (event) => { // Called each time the Upload Widget's list of files change.\n // event.pendingFiles // Array of files that are either uploading or queued.\n // event.failedFiles // Array of files that failed to upload (due to network or validation reasons).\n // event.uploadedFiles // Array of files that have been uploaded and not removed.\n },\n onPreUpload: async file => ({\n errorMessage: \"Uh oh!\", // Displays this validation error to the user (if set).\n transformedFile: file // Uploads 'transformedFile' instead of 'file' (if set).\n }),\n showFinishButton: true, // Show/hide the \"finish\" button in the widget.\n showRemoveButton: true, // Show/hide the \"remove\" button next to each file.\n styles: {\n breakpoints: {\n fullScreenWidth: 750, // Full-screen mode activates when the screen is at or below this width.\n fullScreenHeight: 420 // Full-screen mode activates when the screen is at or below this height.\n },\n colors: {\n primary: \"#377dff\", // Primary buttons & links\n active: \"#528fff\", // Primary buttons & links (hover). Inferred if undefined.\n error: \"#d23f4d\", // Error messages\n shade100: \"#333\", // Standard text\n shade200: \"#7a7a7a\", // Secondary button text\n shade300: \"#999\", // Secondary button text (hover)\n shade400: \"#a5a6a8\", // Welcome text\n shade500: \"#d3d3d3\", // Modal close button\n shade600: \"#dddddd\", // Border\n shade700: \"#f0f0f0\", // Progress indicator background\n shade800: \"#f8f8f8\", // File item background\n shade900: \"#fff\" // Various (draggable crop buttons, etc.)\n },\n fontFamilies: {\n base: \"arial, sans-serif\" // Base font family (comma-delimited).\n },\n fontSizes: {\n base: 16 // Base font size (px).\n }\n },\n path: { // Optional: a string (full file path) or object like so:\n fileName: \"Example.jpg\", // Supports path variables (e.g. {ORIGINAL_FILE_EXT}).\n folderPath: \"/uploads\" // Please refer to docs for all path variables.\n },\n metadata: {\n hello: \"world\" // Arbitrary JSON metadata (saved against the file).\n },\n tags: [\"profile_picture\"], // Requires a Bytescale account.\n editor: {\n images: {\n allowResizeOnMove: true, // True by default. If false, prevents cropper from resizing when moved.\n preview: true, // True by default if cropping is enabled. Previews PDFs and videos too.\n crop: true, // True by default.\n cropFilePath: image => { // Choose the file path used for JSON image crop files.\n const {filePath} = image // In: https://www.bytescale.com/docs/types/UploadedFile\n return `${filePath}.crop` // Out: https://www.bytescale.com/docs/types/FilePathDefinition\n },\n cropRatio: 4 / 3, // Width / Height. Undefined enables freeform (default).\n cropShape: \"rect\" // \"rect\" (default) or \"circ\".\n }\n },\n}\n```\n\n### 🏳️ Localization\n\nDefault is [EN_US](https://github.com/bytescale/bytescale-upload-widget/blob/main/lib/src/modules/locales/EN_US.ts):\n\n```javascript\nconst myCustomLocale = {\n addAnotherFileBtn: \"Add another file...\",\n addAnotherImageBtn: \"Add another image...\",\n cancelBtn: \"cancel\",\n cancelBtnClicked: \"cancelled\",\n cancelPreviewBtn: \"Cancel\",\n continueBtn: \"Continue\",\n cropBtn: \"Crop\",\n customValidationFailed: \"Failed to validate file.\",\n doneBtn: \"Done\",\n fileSizeLimitPrefix: \"File size limit:\",\n finishBtn: \"Finished\",\n finishBtnIcon: true,\n imageCropNumberPrefix: \"Image\",\n maxFilesReachedPrefix: \"Maximum number of files:\",\n maxImagesReachedPrefix: \"Maximum number of images:\",\n orDragDropFile: \"...or drag and drop a file.\",\n orDragDropFileMulti: \"...or drag and drop files.\",\n orDragDropImage: \"...or drag and drop an image.\",\n orDragDropImageMulti: \"...or drag and drop images.\",\n processingFile: \"Processing file...\",\n removeBtn: \"remove\",\n removeBtnClicked: \"removed\",\n submitBtnError: \"Error!\",\n submitBtnLoading: \"Please wait...\",\n unsupportedFileType: \"File type not supported.\",\n uploadFileBtn: \"Upload a File\",\n uploadFileMultiBtn: \"Upload Files\",\n uploadImageBtn: \"Upload an Image\",\n uploadImageMultiBtn: \"Upload Images\",\n xOfY: \"of\"\n}\n```\n\n# 🌐 API Support\n\n## 🌐 File Management APIs\n\nBytescale provides a wide range of [File Management APIs](https://www.bytescale.com/docs/apis):\n\n- **[File Listing](https://www.bytescale.com/docs/folder-api/ListFolder)**\n- **[File Deleting](https://www.bytescale.com/docs/file-api/DeleteFile)**\n- **[File Copying](https://www.bytescale.com/docs/file-api/CopyFile)**\n- [And more...](https://www.bytescale.com/docs/apis)\n\n## 🌐 Media Processing APIs (Image/Video/Audio)\n\nBytescale also provides real-time [Media Processing APIs](https://www.bytescale.com/docs/media-processing-apis):\n\n- **[Image Processing APIs](https://www.bytescale.com/docs/image-processing-api)** ([resize](https://www.bytescale.com/docs/image-processing-api#image-resizing-api), [crop](https://www.bytescale.com/docs/image-processing-api#image-cropping-api), [convert](https://www.bytescale.com/docs/image-processing-api#f), [compress](https://www.bytescale.com/docs/image-processing-api#image-compression-api) & [watermark](https://www.bytescale.com/docs/image-processing-api#Text-layering-api))\n- **[Video Processing APIs](https://www.bytescale.com/docs/video-processing-api)** ([transcode](https://www.bytescale.com/docs/video-processing-api#video-transcoding-api), [optimize](https://www.bytescale.com/docs/video-processing-api#video-compression-api), [resize](https://www.bytescale.com/docs/video-processing-api#video-resizing-api) & [extract metadata](https://www.bytescale.com/docs/video-processing-api#video-metadata-api))\n- **[Audio Processing APIs](https://www.bytescale.com/docs/audio-processing-api)** ([transcode](https://www.bytescale.com/docs/audio-processing-api#audio-transcoding-api), [optimize](https://www.bytescale.com/docs/audio-processing-api#audio-compression-api), [trim](https://www.bytescale.com/docs/audio-processing-api#audio-trimming-api) & [extract metadata](https://www.bytescale.com/docs/audio-processing-api#audio-metadata-api))\n\n### Image Processing API (Original Image)\n\nHere's an example using [a photo of Chicago](https://upcdn.io/W142hJk/raw/example/city-landscape.jpg):\n\n\n\n```\nhttps://upcdn.io/W142hJk/raw/example/city-landscape.jpg\n```\n\n### Image Processing API (Transformed Image)\n\nUsing the [Image Processing API](https://www.bytescale.com/docs/image-processing-api), you can produce [this image](https://upcdn.io/W142hJk/image/example/city-landscape.jpg?w=900&h=600&fit=crop&f=webp&q=80&blur=4&text=WATERMARK&layer-opacity=80&blend=overlay&layer-rotate=315&font-size=100&padding=10&font-weight=900&color=ffffff&repeat=true&text=Chicago&gravity=bottom&padding-x=50&padding-bottom=20&font=/example/fonts/Lobster.ttf&color=ffe400):\n\n\n\n```\nhttps://upcdn.io/W142hJk/image/example/city-landscape.jpg\n ?w=900\n &h=600\n &fit=crop\n &f=webp\n &q=80\n &blur=4\n &text=WATERMARK\n &layer-opacity=80\n &blend=overlay\n &layer-rotate=315\n &font-size=100\n &padding=10\n &font-weight=900\n &color=ffffff\n &repeat=true\n &text=Chicago\n &gravity=bottom\n &padding-x=50\n &padding-bottom=20\n &font=/example/fonts/Lobster.ttf\n &color=ffe400\n```\n\n## Authentication\n\nBytescale supports two types of authentication:\n\n### API Keys\n\nThe Bytescale Upload Widget uses the `apiKey` parameter to authenticate with [Bytescale](https://www.bytescale.com/).\n\nWith API key auth, the requester has access to the resources available to the API key:\n\n- Secret API keys (`secret_***`) can perform all API operations (see: [Bytescale JavaScript SDK](https://www.bytescale.com/docs/sdks/javascript)).\n\n- Public API keys (`public_***`) can perform file uploads and file downloads only. File overwrites, file deletes, and all other destructive operations cannot be performed using public API keys.\n\nYou must always use **public API keys** (e.g. `public_***`) in your client-side code.\n\nEach API key can have its read/write access limited to a subset of files/folders.\n\n### JWTs\n\nJWTs are optional.\n\nWith JWTs, users can download private files directly via the URL, as authentication is performed implicitly via a session cookie _or_ via an `authorization` header if service workers are enabled (see the `serviceWorkerScript` param on the `AuthManager.beginAuthSession` method). This allows the browser to display private files in ``, `