Migrated to: @bytescale/upload-widget-vue

Vue File Upload Widget
(With Integrated Cloud Storage)

Get Started — Try on CodePen

100% Serverless File Upload Widget
Powered by Bytescale

---

DMCA Compliant • GDPR Compliant • 99.9% Uptime SLA
Supports: Rate Limiting, Volume Limiting, File Size & Type Limiting, JWT Auth, and more...

---

Installation

Install via NPM:

1npm install @upload-io/vue-uploader

Or via YARN:

1yarn add @upload-io/vue-uploader

Or via a <script> tag:

1<script src="https://js.bytescale.com/vue-uploader/v3"></script>

Usage

Vue Uploader provides two options:

Option 1) File Upload Button — Try on CodePen

Create a file upload button using the openUploadModal helper:

1<template>
2  <button @click="uploadFile">Upload a file...</button>
3</template>
4
5<script lang="ts">
6  import { Uploader } from "uploader";
7  import { openUploadModal } from "@upload-io/vue-uploader";
8  import type { UploadWidgetConfig, UploadWidgetResult } from "uploader";
9  import type { PreventableEvent } from "@upload-io/vue-uploader";
10
11  // Create one instance per app. (Get API keys from Bytescale)
12  const uploader = Uploader({
13    apiKey: "free"
14  });
15
16  // See "customization" below.
17  const options: UploadWidgetConfig = {
18    multi: true
19  };
20
21  export default {
22    name: "App",
23    methods: {
24      uploadFile(event: PreventableEvent) {
25        openUploadModal({
26          event,
27          uploader,
28          options,
29          onComplete: (files: UploadWidgetResult[]) => {
30            if (files.length === 0) {
31              alert("No files selected.");
32            } else {
33              alert(files.map(f => f.fileUrl).join("\n"));
34            }
35          }
36        })
37      }
38    }
39  };
40</script>

Option 2) Dropzone — Try on CodePen

Create a file upload dropzone using the UploadDropzone component:

1<template>
2  <UploadDropzone :uploader="uploader"
3                  :options="options"
4                  :on-update="onFileUploaded"
5                  width="600px"
6                  height="375px" />
7</template>
8
9<script lang="ts">
10import { Uploader } from "uploader";
11import { UploadDropzone } from "@upload-io/vue-uploader";
12import type { UploadWidgetConfig, UploadWidgetResult } from "uploader";
13
14// One instance per app.
15const uploader = Uploader({ apiKey: "free" });
16
17// See "customization" below.
18const options: UploadWidgetConfig = {
19  multi: true
20};
21
22export default {
23  name: "App",
24  components: {
25    UploadDropzone
26  },
27  data() {
28    return {
29      uploader,
30      options
31    };
32  },
33  methods: {
34    onFileUploaded(files: UploadWidgetResult[]) {
35      if (files.length === 0) {
36        alert("No files selected.");
37      } else {
38        alert(files.map(f => f.fileUrl).join("\n"));
39      }
40    }
41  }
42};
43</script>

The Result

The callbacks receive a Array<UploadWidgetResult>:

1{
2  fileUrl: "https://upcdn.io/FW25...",   // URL to use when serving this file.
3  filePath: "/uploads/example.jpg",      // File path (we recommend saving this to your database).
4
5  editedFile: undefined,                 // Edited file (for image crops). Same structure as below.
6
7  originalFile: {
8    fileUrl: "https://upcdn.io/FW25...", // Uploaded file URL.
9    filePath: "/uploads/example.jpg",    // Uploaded file path (relative to your raw file directory).
10    accountId: "FW251aX",                // Bytescale account the file was uploaded to.
11    originalFileName: "example.jpg",     // Original file name from the user's machine.
12    file: { ... },                       // Original DOM file object from the <input> element.
13    size: 12345,                         // File size in bytes.
14    lastModified: 1663410542397,         // Epoch timestamp of when the file was uploaded or updated.
15    mime: "image/jpeg",                  // File MIME type.
16    metadata: {
17      ...                                // User-provided JSON object.
18    },
19    tags: [
20      "tag1",                            // User-provided & auto-generated tags.
21      "tag2",
22      ...
23    ]
24  }
25}

🌐 API Support

🌐 File Management API

Bytescale provides an Upload API, which supports the following:

• File uploading.
• File listing.
• File deleting.
• And more...

Uploading a "Hello World" text file is as simple as:

1curl --data "Hello World" \
2     -u apikey:free \
3     -X POST "https://api.bytescale.com/v1/files/basic"

Note: Remember to set -H "Content-Type: mime/type" when uploading other file types!

Read the Upload API docs »

🌐 Image Processing API (Resize, Crop, etc.)

Bytescale also provides an Image Processing API, which supports the following:

• Image Resizing
• Image Cropping
• Image Compression
• Image Conversion
• Image Manipulation (blur, sharpen, brightness, etc.)
• Layering (e.g for text & image watermarks)
• and more...

Read the Image Processing API docs »

Original Image

Here's an example using a photo of Chicago:

https://upcdn.io/W142hJk/raw/example/city-landscape.jpg

Processed Image

Using the 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

Full Documentation

Uploader Documentation »

Need a Headless (no UI) File Upload Library?

Try Upload.js »

Can I use my own storage?

Yes: Bytescale supports AWS S3, Cloudflare R2, Google Storage, and DigitalOcean Spaces.

To configure a custom storage backend, please see:

https://www.bytescale.com/docs/storage/sources

👋 Create your Bytescale Account

Vue Uploader is the Vue Upload Widget for Bytescale: the best way to serve images, videos, and audio for web apps.

Create a Bytescale account »

Building From Source

BUILD.md

License

MIT