File upload component for Vue. Supports: image cropping, drag-and-drop, and more.
To install via NPM:
npm install @bytescale/upload-widget-vue
To install via a script tag:
<script src="https://js.bytescale.com/upload-widget-vue/v4"></script>
To add file uploads to your web app, use these code snippets:
1<template>2 <button @click="uploadFile">Upload a file...</button>3</template>4
5<script lang="ts">6 import { openUploadModal } from "@bytescale/upload-widget-vue";7 import type { UploadWidgetConfig, UploadWidgetResult } from "@bytescale/upload-widget";8 import type { PreventableEvent } from "@bytescale/upload-widget-vue";9
10 // -----11 // Configuration:12 // https://www.bytescale.com/docs/upload-widget#configuration13 // -----14 const options: UploadWidgetConfig = {15 apiKey: "free", // Get API key: https://www.bytescale.com/get-started16 maxFileCount: 1017 };18
19 export default {20 name: "App",21 methods: {22 uploadFile(event: PreventableEvent) {23 openUploadModal({24 event,25 options,26 onComplete: (files: UploadWidgetResult[]) => {27 if (files.length === 0) {28 alert("No files selected.");29 } else {30 alert(files.map(f => f.fileUrl).join("\n"));31 }32 }33 })34 }35 }36 };37</script>
1<template>2 <UploadDropzone :options="options"3 :on-complete="onFilesUploaded"4 :on-update="onFileListChanged"5 width="600px"6 height="375px" />7</template>8
9<script lang="ts">10 import { UploadDropzone } from "@bytescale/upload-widget-vue";11 import type { UploadWidgetConfig, UploadWidgetResult, UploadWidgetOnUpdateEvent } from "@bytescale/upload-widget";12
13 // -----14 // Configuration:15 // https://www.bytescale.com/docs/upload-widget#configuration16 // -----17 const options: UploadWidgetConfig = {18 apiKey: "free", // Get API key: https://www.bytescale.com/get-started19 maxFileCount: 10,20 showFinishButton: true21 };22
23 export default {24 name: "App",25 components: {26 UploadDropzone27 },28 data() {29 return {30 options31 };32 },33 methods: {34 onFileListChanged({ uploadedFiles, pendingFiles, failedFiles }: UploadWidgetOnUpdateEvent) {35 const uploadedFileUrls = uploadedFiles.map(x => x.fileUrl).join("\n");36 console.log(uploadedFileUrls);37 },38 onFilesUploaded(files: UploadWidgetResult[]) {39 if (files.length === 0) {40 alert("No files selected.");41 } else {42 alert(files.map(f => f.fileUrl).join("\n"));43 }44 }45 }46 };47</script>
Special behaviour for dropzones:
onComplete only fires when showFinishButton = true (i.e. when the user clicks "Finish").
onUpdate must be used when showFinishButton = false.
Default value: showFinishButton = false
The onComplete callback receives the following:
[ { "accountId": "YOUR_ACCOUNT_ID", "filePath": "/uploads/image.jpg", "fileUrl": "https://upcdn.io/A623uY2/raw/uploads/image.jpg", "originalFile": { "accountId": "YOUR_ACCOUNT_ID", "filePath": "/uploads/image.jpg", "fileUrl": "https://upcdn.io/A623uY2/raw/uploads/image.jpg", "lastModified": 1615680311115, "metadata": { "myCustomField1": true, "myCustomField2": { "hello": "world" }, "anotherCustomField": 42 }, "mime": "image/jpeg", "originalFileName": "example.jpg", "size": 43182, "tags": [ "example_tag" ] } }]
See: UploadWidgetResult
The onUpdate callback receives the following:
1{2 "uploadedFiles": [],3 "failedFiles": [],4 "pendingFiles": [5 {6 "file": {7 "name": "my-file.txt",8 "type": "text/plain",9 "size": 4210 }11 }12 ]13}
The uploadedFiles field uses the same structure as the onComplete param above.
The options object requires the following object (all fields optional, except for apiKey, which is required):
{ "apiKey": "public_A623uY2RvnNq1vZ80fYgGyhKN0U7", "editor": { "images": { "crop": true, "cropFilePath": Function, "cropRatio": 1, "cropShape": "circ", "preview": true } }, "layout": "modal", "maxFileCount": 1, "maxFileSizeBytes": 10485760, "metadata": { "myCustomField1": true, "myCustomField2": { "hello": "world" }, "anotherCustomField": 42 }, "mimeTypes": [ "image/jpeg" ], "multi": false, "onInit": Function, "onPreUpload": Function, "onUpdate": Function, "path": { "fileName": "image.jpg", "fileNameFallback": "image.jpg", "fileNameVariablesEnabled": true, "folderPath": "/uploads", "folderPathVariablesEnabled": true }, "showFinishButton": true, "showRemoveButton": true, "styles": { "colors": { "active": "#528fff", "error": "#d23f4d", "primary": "#377dff", "shade100": "#333", "shade200": "#7a7a7a", "shade300": "#999", "shade400": "#a5a6a8", "shade500": "#d3d3d3", "shade600": "#dddddd", "shade700": "#f0f0f0", "shade800": "#f8f8f8", "shade900": "#fff" }, "fontFamilies": { "base": "-apple-system, blinkmacsystemfont, Segoe UI, helvetica, arial, sans-serif" }, "fontSizes": { "base": 16 } }, "tags": [ "example_tag" ]}
See: UploadWidgetConfig
You can disable image, video, and PDF previews by setting preview: false
You can disable the image cropper by setting crop: false
You can transform uploaded files using Bytescale's File Processing APIs:
After uploading a file, you should save its filePath to your DB instead of its fileUrl, and use the UrlBuilder to lazily create URLs:
filePath values are shorter.
filePath values allow you to change the domain in the future (e.g. if you move to a custom CNAME).
filePath values allow you to select different file transformations at runtime (e.g. /raw/, /image/, etc.).
Install the Bytescale JavaScript SDK to use the UrlBuilder:
npm install @bytescale/sdk
Use the UrlBuilder to get raw file URLs (i.e. URLs to original files):
// import * as Bytescale from "@bytescale/sdk";
// Returns: "https://upcdn.io/1234abc/raw/example.jpg"Bytescale.UrlBuilder.url({ accountId: "1234abc", filePath: "/example.jpg"});
You can upload any file type to Bytescale. Use /raw/ when downloading files that don't need to be transformed.
Use the UrlBuilder to transform files using transformation presets:
// import * as Bytescale from "@bytescale/sdk";
// Returns: "https://upcdn.io/1234abc/thumbnail/example.jpg"Bytescale.UrlBuilder.url({ accountId: "1234abc", filePath: "/example.jpg", options: { transformation: "preset", transformationPreset: "thumbnail" }});
Transformation presets are created in the Bytescale Dashboard.
Use the UrlBuilder to transform images using the Image Processing API:
// import * as Bytescale from "@bytescale/sdk";
// Returns: "https://upcdn.io/1234abc/image/example.jpg?w=800&h=600"Bytescale.UrlBuilder.url({ accountId: "1234abc", filePath: "/example.jpg", options: { transformation: "image", transformationParams: { "w": 800, "h": 600 } }});
See the Image Processing API for the full list of transformationParams when transformation: "image".
Use the UrlBuilder to transform videos using the Video Processing API:
// import * as Bytescale from "@bytescale/sdk";
// Returns: "https://upcdn.io/1234abc/video/example.mov?f=mp4-h264&h=1080"Bytescale.UrlBuilder.url({ accountId: "1234abc", filePath: "/example.mov", options: { transformation: "video", transformationParams: { "f": "mp4-h264", "h": 1080 } }});
See the Video Processing API for the full list of transformationParams when transformation: "video".
Use the UrlBuilder to transform audio using the Audio Processing API:
// import * as Bytescale from "@bytescale/sdk";
// Returns: "https://upcdn.io/1234abc/audio/example.wav?f=aac&br=192"Bytescale.UrlBuilder.url({ accountId: "1234abc", filePath: "/example.wav", options: { transformation: "audio", transformationParams: { "f": "aac", "br": 192 } }});
See the Audio Processing API for the full list of transformationParams when transformation: "audio".
Use the UrlBuilder to extract the file document.docx from the uploaded ZIP file example.zip:
// import * as Bytescale from "@bytescale/sdk";
// Returns: "https://upcdn.io/1234abc/archive/example.zip?m=extract&artifact=/document.docx"Bytescale.UrlBuilder.url({ accountId: "1234abc", filePath: "/example.zip", options: { transformation: "archive", transformationParams: { m: "extract" }, artifact: "/document.docx" }});
See the Archive Processing API for the full list of transformationParams when transformation: "archive".
The Bytescale Upload Widget supports two types of authorization:
You must always pass an apiKey to the Upload Widget configuration object.
With API key auth, the requester has access to the resources available to the API key:
Secret API keys: have access to all API endpoints (see the Bytescale JavaScript SDK).
Public API keys: have access to file upload, file download, and file listing API endpoints. File overwrites, file deletes, and all other destructive operations cannot be performed using public API keys. File listing is also disabled by default (but can be changed by editing the API key's settings).
Each API key can have its read/write access limited to a subset of files/folders via the API key's settings.
You must always use public API keys (e.g. public_***) in your client-side code.
You can optionally use JWTs to authorize your file uploads, downloads, and other Bytescale API requests:
To authorize client-side requests using JWTs: use the AuthManager to establish a JWT cookie session.
To authorize server-side requests using JWTs: pass your JWT via the authorization-token HTTP request header in all Bytescale API and Bytescale CDN requests. You can set this header via the headers configuration field, which is a sibling to the apiKey configuration field. You cannot use the AuthManager in your server-side code, as it relies on setting the browser's cookies directly.
Alternatively: use secret API keys (e.g. secret_***) in your server-side code.
You must continue to pass an apiKey to your configuration object when using JWTs.
JWTs are designed for use in client-side code. For server-side code, you should use secret API keys instead.
JWTs work by allowing you to grant permissions on a user-by-user basis that exceed the permissions of a public API key.
For example, your public API key may allow file uploads, whereas your JWT may allow file deletions for a specific set of paths.
JWTs can also be used for cookie-based auth when using the AuthManager, allowing the user to download private files directly via the URL (as auth is performed implicitly via a session cookie). This allows the browser to display private files in <img> and <video> elements.
When using cookie-based auth to download files, the ?auth=true query parameter must be added to the URL.
The Bytescale Upload Widget internally uses the Bytescale JavaScript SDK to perform file uploads, meaning file uploads from the Bytescale Upload Widget will use whichever JWT you configure via the AuthManager.beginAuthSession method from the Bytescale JavaScript SDK.
This website uses cookies. By continuing you are consenting to the use of cookies per our Cookie Policy. Our Terms of Service were updated on October 20 2023.
This website requires a modern web browser -- the latest versions of these browsers are supported: