Skip to content

Latest commit

 

History

History

vue-uploader

README.md

Uploadcare logo

Website • Quick Start • Docs • Blog • Discord • Twitter

Vue file uploading examples

Edit vue-uploader

This is an example project of implementing a file uploader in a Vue application with Uploadcare File Uploader.

Run this demo locally

# clone this repo and go to the cloned folder

$ cd examples/vue-uploader

$ npm install
# or `yarn install`, if you wish

$ npm run start
# or `yarn start`

Installation

All you need to do is to install @uploadcare/file-uploader from npm via your favorite Node package manager.

The package provides TypeScript types, so you do not need to install @types/anything if you need a proper typing.

Read more about installation in the Uploadcare documentation.

Configuration

Please, read the File Uploader documentation.

Integration notes

Vue + Web Components

File Uploader is native to the Web but not to Vue. However, Vue does everything to make solutions based on Web Components to work properly with it.

To help Vue to figure out where you're using Web Components, you have to specify compilerOptions.isCustomElement option. In this example we have done it inside the Vite config file.

You may like to read Vue and Web Components doc, if you want to know more about using custom elements in Vue.

Options API vs. Composition API

One of the examples, “Real-life form”, contains a FileUploader component which provides Vue-friendly API for the rest of the example. There is a File Uploader inside this component and nowhere else.

However, Vue 3 supports two different API styles: Options API and Composition API. We do not know which one you prefer, so we have implemented the example twice.

By default we use Options API because the whole app is built with it. But you're free to switch the import path in FormView.vue from FileUploader.options.vue to FileUploader.composition.vue to ensure that it works too.

Styling

If your styling solution may provide class string or style object, feel free to use them on components like uc-file-uploader-regular and override default class using CSS variables.

Otherwise you may go “full override” way and pass a string with styles to a File Uploader type of your choice.

Read more about styling in the File Uploader docs.

Contribution

You’re always welcome to contribute:

  • Create issues every time you feel something is missing or goes wrong.
  • Provide your feedback or drop us a support request at hello@uploadcare.com.
  • Ask questions on Stack Overflow with "uploadcare" tag if others can have these questions as well.
  • Star this repo if you like it ⭐️