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

filestack-vue-fork

v2.0.0

Published

[Quick Independent Fork] Vue component for Filestack - API and content management system that makes it easy to add powerful file uploading and transformation capabilities to any web or mobile application. via @TipeIO

Downloads

4

Readme


NPM Version

Filestack Vue

This is a Vue component for Filestack API and content management system that makes it easy to add powerful file uploading and transformation capabilities to any web or mobile application.

Resources

Installing

Install filestack-vue and filestack-js through npm

npm install filestack-vue filestack-js

or

yarn add filestack-vue filestack-js

Import

var Filestack = require('filestack-vue');

In ES2015

import Filestack from 'filestack-vue';

Import with filestack-js client

import Filestack, { client } from 'filestack-vue';

client is available from version 1.3.4

Usage

You should register Filestack website and get an API key first!

1. Custom Designed button

<filestack
  :apikey="YOUR_API_KEY"
  :options="options"
  @success="yourCallbackFunction"
>
  <div>
    Click here to upload
  </div>
</filestack>

2. Custom render

<filestack
  :apikey="apikey"
  :options="options"
  @success="onSuccess"
  @error="onError"
>
  <div>
    <strong>Find an avatar</strong>
    <button>Pick</button>
  </div>
</filestack>

3. Other modes

<filestack
  mode="upload"
  :apikey="YOUR_API_KEY"
  :options="options"
  @success="onSuccess"
>
  <div>
    Click here to upload
  </div>
</filestack>

Available modes:

Define your own options object and callback function, connect them to the component and get the result from Filestack:

const options = {
  accept: 'image/*',
  maxFiles: 5,
  storeTo: {
    location: 's3',
  },
};

onSuccess(result) {
  // handle result here
}

Do you prefer a link instead of a button?

You can pass a custom prop link.

<filestack
  :apikey="YOUR_API_KEY"
  :options="options"
  @success="yourSuccessCallbackFunction"
>
  <div>
    Click here to upload
  </div>
<filestack>

Filestack-js client

You can also import the official client and decouple its Vue component Filestack. However, you will need to initialize it with the API key and optional security options.

import { client } from 'filestack-vue';
const filestack = client.init('YOUR_API_KEY', security);

Examples

You can find the examples of using Pick in /examples/demo.

Run

yarn start

and connect to localhost:8080.

To try different functions go to /examples/demo2 and follow the same steps to run it.

filestack

Available Props

Official Filestack Documentation

apikey

required, string. An API key for Filestack.

mode

optional, string. default 'pick'. Can be one of pick, upload, transform, retrieve, metadata, remove.

file

optional object. use it to insert a file object in upload mode.

onSuccess

optional function. Handle the results after a successful response.

onError

optional function. Handle errors.

options

optional object. Detailed options to customize the mode behavior.

See Javascript API from theofficial documentation.

security

optional object. If you have security enabled, you will need to initialize the client with a valid Filestack policy and signature in order to perform the requested call.

buttonText

optional string. When using a custom button, you can set the text.

buttonClass

optional string. When using custom button, you can set className to style it.

cname

optional Custom domain to use for all URLs. This requires the custom CNAME feature on your Filestack app.

Versioning

Filestack Vue follows the Semantic Versioning.

Issues

If you have problems, please create a Github Issue.

Contributors