Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vue-fineuploader with all npm packages installed. Try it out:

var vueFineuploader = require("vue-fineuploader")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-fineuploader v1.1.1

A VueJS 2 component for Fine Uploader

vue-fineuploader

Build Status Dependency Status devDependency Status

A VueJS 2 Component for Fine Uploader's core.

New Version In Progress

I'm refactoring the vue-fineuploader component to be more customisable and to use all the options that fineuploader offer. You can see the WIP here vue-fineuploader/feature/refactor. This new version is based on the react components (https://github.com/FineUploader/react-fine-uploader).

It'll offer a wrapper for each endpoints of fineuploader, and a component for all the UI options (dropzone, fileinput, cancel-button, ...).

Be sure to check it out, and help in anyway you can, porting a component or the documenation, everyone can help !

ETA: end of January.


For the drag'n'drop supported version see: https://github.com/Elhebert/vue-fineuploader-dropzone

Usage

Installation

Get the FineUploader component:

  • with npm:
npm install --save vue-fineuploader
  • clone this repository and copy the FineUploader.vue into your project:
git clone https://github.com/Elhebert/vue-fineuploader.git

Properties

  • button: Specify an element to use as the 'select files' button. Cannot be a <button>.
  • options: Object containing the different configuration options.

For information on the possible options take a look at the official documentation

Events

From the official documentation :

Fine Uploader's event system enables integrators to execute any operations at almost any point in the upload process. Knowing how these callbacks work, and when they are called, is crucial to unlocking the full potential of Fine Uploader.

vue-fineuploader simply emit the different callbacks. Use the v-on:<event> or @<event> to listen to them.

In the FineUploader documentation the callbacks are functions with parameters, the events that are emitted for vue-fineuplaoder are returning a payload objects using those paramaters has key.

For example, the onSubmit callback has an id and a name as parameters. The submit event from vue-fineuploader will return the following object : { id: <id>, name: <name> }.

For information on the different events take a look at the official documentation

Event naming

In the official documentation, the events are called onEvent, using a camelCase notation. vue-fineuploader events are using camelcase notation and don't use the prefix on.

For example, to listen to the onAllComplete callback, you need to listen to the allcomplete event.

Example

<template>
    <div>
        <FineUplaoder :button="button"
                      :options="options"
                      @submit="addFileToQueue">
            <div class="browse">browse</div>
        </FineUplaoder>
    </div>
</template>

<style></style>

<script language="text/babel">
import FineUplaoder from './path/to/FineUploader.vue'; // If you copied the component into your project
import FineUploader from 'vue-fineuploader'; // If you used npm to install the component

export default {
    data() {
        return {
            button: '.browse',
            options: {
                request: {
                    endpoint: '/path/to/your/endpoint'
                },
                ...
            },
        };
    },

    components: { FineUploader },

    methods: {
        addFileToQueue(payload) {
            ...
        },
    },
};
</script>

This script is published under the MIT license

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free