https://github.com/joblocal/vue-bucket-loader
This repository contains a SSR compatible Vue component to upload and delete files from AWS S3
https://github.com/joblocal/vue-bucket-loader
aws css html javascript s3 ssr vue webpack
Last synced: 5 months ago
JSON representation
This repository contains a SSR compatible Vue component to upload and delete files from AWS S3
- Host: GitHub
- URL: https://github.com/joblocal/vue-bucket-loader
- Owner: joblocal
- Created: 2018-03-08T13:27:00.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T16:58:54.000Z (over 2 years ago)
- Last Synced: 2024-12-08T20:15:29.565Z (5 months ago)
- Topics: aws, css, html, javascript, s3, ssr, vue, webpack
- Language: JavaScript
- Homepage:
- Size: 1.53 MB
- Stars: 9
- Watchers: 9
- Forks: 1
- Open Issues: 23
-
Metadata Files:
- Readme: readme.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# 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:
```sh
$ yarn add @joblocal/vue-bucket-loader
```
Using npm:
```sh
$ npm install @joblocal/vue-bucket-loader
```
### Usage
After installing the package you can use it as follows.
```javascript
import VueBucketLoader from '@joblocal/vue-bucket-loader';
export default {
components: {
VueBucketLoader,
},
};
```
### Properties
| Property | Required | Type | Description |
| ------------- | ------------- | ------------- | ------------- |
| signingUrl | true | String / Function | Provide an endpoint to a backend service which can generate a [presignedUrl](https://docs.aws.amazon.com/AmazonS3/latest/dev/PresignedUrlUploadObject.html). |
| 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:
```javascript
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.
```sh
$ yarn install
```
#### Test
To make sure that the installation went fine. Run this command.
```sh
$ yarn test
```
#### Dev Server
To start the development server use
```sh
$ yarn start
```
## Built with
* [Vue js](http://www.vuejs.org) - Javascript Framework
* [Yarn](https://yarnpkg.com/lang/en/) - Dependency Management
* [Webpack](https://webpack.js.org/) - Application Bundler
* [Jest](https://facebook.github.io/jest/) - Test Runner
### Also see
* [Vue-Test-Utils Api](https://vue-test-utils.vuejs.org/en/api/)
* [Jest Api](https://facebook.github.io/jest/docs/en/api.html)
## Contributing
Please read through our [contributing guidelines](https://github.com/joblocal/vue-bucket-loader/blob/master/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and feature requests.
## Authors
* **Joblocal GmbH** - *Initial work* - [Joblocal](https://github.com/joblocal)
See also the list of [contributors](https://github.com/joblocal/vue-bucket-loader/contributors) who participated in this project.