Skip to content

This repository contains a SSR compatible Vue component to upload and delete files from AWS S3

Notifications You must be signed in to change notification settings

joblocal/vue-bucket-loader

Repository files navigation

Vue Bucket Loader

Downloads Size Zipped Size

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

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.

About

This repository contains a SSR compatible Vue component to upload and delete files from AWS S3

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published