@joblocal/vue-bucket-loader NPM

Vue Bucket Loader

This Project provides a SSR compatible vue component which can handle file upload / deleting directly to / from a AWS S3 Bucket.

Requirements

Yarn or npm
Vue 2.X.X

Installation

Using yarn:

$ yarn add @joblocal/vue-bucket-loader

Using npm:

$ npm install @joblocal/vue-bucket-loader

Usage

After installing the package you can use it as follows.

<template>
  <VueBucketLoader
    :signingUrl="http://localhost/your/endpoint/goes/here"
  />
</template>

<script>
  import VueBucketLoader from '@joblocal/vue-bucket-loader';

  export default {
    components: {
      VueBucketLoader,
    },
  };
</script>

Properties

Property	Required	Type	Description
signingUrl	true	String / Function	Provide an endpoint to a backend service which can generate a presignedUrl.
beforeUpload	false	Function	Provide a function to add additional checks before your files get uploaded, e.g. MIME-Type checking. Returned File objects are used for upload.
allowedFileExtensions	false	Array	Provides possibility to pass specific file extensions.
allowedMimeTypes	false	Array	Provides possibility to pass specific MIME type.

Events

This component provides event-handling for the following cases. To subscribe:

this.$on('Event', function( payload ));

Event	Description	Payload
"add-files-before"	This event will be emitted after a file was added to the input field.	Array
"add-file-success"	This event will be emitted after a file was successfully uploaded.	Object
"add-file-error"	This event will be emitted after a file was not uploaded.	Object
"delete-file-before"	This event will be emitted before a file will be removed.	Object
"delete-file-success"	This event will be emitted after a file was successfully deleted.	Object
"delete-file-error"	This event will be emitted after a file was not deleted.	Object

File loading state

State	Description
"loading"	This file being uploaded.
"success"	The file has been successfully added to the bucketloader.
"error"	The file was not added due to a server error