npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-fineuploader-dropzone

v1.1.3

Published

A VueJS 2 component for Fine Uploader

Downloads

1,478

Readme

vue-fineuploader-dropzone

Build Status Dependency Status devDependency Status

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, ...).

This component won't be updated or supported after it's released.

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.

The release candidate of vue-fineuploader v2.0.0 has been released

Release notes

This repository is now outdated, and the package won't be supported anymore.


A VueJS 2 Component for Fine Uploader with a drag'n'drop area.

For the core version (without the drag'n'drop support) see: https://github.com/Elhebert/vue-fineuploader

Demo: https://elhebert.github.io/vue-fineuploader-dropzone/

Usage

Installation

Get the FineUploader component:

  • with npm:
npm install --save vue-fineuploader-dropzone
  • clone this repository and copy the FineUploader.vue into your project:
git clone https://github.com/Elhebert/vue-fineuploader-dropzone.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

  • dropzone: Object container the different dropzone options
    • element: id or class of the container element that should be treated as drop zone.
    • dropActive: Specify a CSS class to apply to drop zone(s) when a file has entered it.

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-dropzone 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" 
                      :dropZone="dropZone"
                      @submit="addFileToQueue">
            <div class="drop-area">
                Drop your files here
                <br>or<br>
                <div class="browse"></div>
            </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-dropzone'; // If you used npm to install the component

export default {
    data() {
        return {
            button: '.browse',
            options: {
                request: {
                    endpoint: '/path/to/your/endpoint'
                },
                ...
            },
            dropZone: {
                element: '.drop-area',
                dropActive: 'active'
            },
        };
    },

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

This script is published under the MIT license