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

Development

Installing dependencies

Run this command.

$ yarn install

Test

To make sure that the installation went fine. Run this command.

$ yarn test

Dev Server

To start the development server use

$ yarn start

Built with

• Vue js - Javascript Framework
• Yarn - Dependency Management
• Webpack - Application Bundler
• Jest - Test Runner

Also see

• Vue-Test-Utils Api
• Jest Api

Contributing

Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and feature requests.

Authors

• Joblocal GmbH - Initial work - Joblocal

See also the list of contributors who participated in this project.