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.