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