Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/plantain-00/file-uploader-component

A reactjs and vuejs component of file uploader.
https://github.com/plantain-00/file-uploader-component

Last synced: 4 days ago
JSON representation

A reactjs and vuejs component of file uploader.

Host: GitHub
URL: https://github.com/plantain-00/file-uploader-component
Owner: plantain-00
License: mit
Created: 2016-11-18T23:51:12.000Z (almost 8 years ago)
Default Branch: master
Last Pushed: 2021-09-11T02:08:48.000Z (about 3 years ago)
Last Synced: 2024-10-25T13:44:22.232Z (12 days ago)
Language: TypeScript
Homepage:
Size: 14.6 MB
Stars: 12
Watchers: 4
Forks: 2
Open Issues: 2
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        # file-uploader-component

[![Dependency Status](https://david-dm.org/plantain-00/file-uploader-component.svg)](https://david-dm.org/plantain-00/file-uploader-component)

[![devDependency Status](https://david-dm.org/plantain-00/file-uploader-component/dev-status.svg)](https://david-dm.org/plantain-00/file-uploader-component#info=devDependencies)

[![Build Status: Windows](https://ci.appveyor.com/api/projects/status/github/plantain-00/file-uploader-component?branch=master&svg=true)](https://ci.appveyor.com/project/plantain-00/file-uploader-component/branch/master)

![Github CI](https://github.com/plantain-00/file-uploader-component/workflows/Github%20CI/badge.svg)

[![npm version](https://badge.fury.io/js/file-uploader-component.svg)](https://badge.fury.io/js/file-uploader-component)

[![Downloads](https://img.shields.io/npm/dm/file-uploader-component.svg)](https://www.npmjs.com/package/file-uploader-component)

[![type-coverage](https://img.shields.io/badge/dynamic/json.svg?label=type-coverage&prefix=%E2%89%A5&suffix=%&query=$.typeCoverage.atLeast&uri=https%3A%2F%2Fraw.githubusercontent.com%2Fplantain-00%2Ffile-uploader-component%2Fmaster%2Fpackage.json)](https://github.com/plantain-00/file-uploader-component)

## features

+ reactjs component

+ vuejs component

+ drag file(s) and drop to the component

+ click to choose file(s)

+ paste file from clipboard

+ just get the file object, or uploaded to server by `XMLHttpRequest`

+ progress bar

+ multiple-language

## link css

```html

```

## reactjs component

[![gzip size](https://img.badgesize.io/https://unpkg.com/file-uploader-react-component?compression=gzip)](https://unpkg.com/file-uploader-react-component)

`npm i file-uploader-react-component`

```js

import { FileUploader } from "file-uploader-react-component";

```

or

```html

```

```jsx

```

the online demo: 

## vuejs component

[![gzip size](https://img.badgesize.io/https://unpkg.com/file-uploader-vue-component?compression=gzip)](https://unpkg.com/file-uploader-vue-component)

`npm i file-uploader-vue-component`

```js

import { FileUploader } from "file-uploader-vue-component";

app.component('file-uploader', FileUploader)

```

or

```html

```

```jsx

```

the online demo: 

## properties and events of the component

name | type | description

--- | --- | ---

accept | string? | the extension names in the file chosen dialog

multiple | boolean? | whether multiple file can be selected

locale | Locale? | the locale object

name | string? | will be the key of the file in `FormData`

url | string? | the upload API url

method | string? | the upload API method

fileUploaded | (response: any) => void | the event that is triggered when a file is uploaded

fileGot | (file: File or Blob) => void | the event that is triggered when got the file object

beforeRequest | (request: XMLHttpRequest, formData: FormData) => void | the event that is triggered before sending request

## change logs

```ts

// v7 vue2

import "file-uploader-vue-component";

// v8 vue3

import { FileUploader } from "file-uploader-vue-component";

app.component('file-uploader', FileUploader)

```

```bash

# v6

npm i file-uploader-component

# v7

npm i file-uploader-vue-component

npm i file-uploader-react-component

npm i file-uploader-angular-component

```

```ts

// v6

import "file-uploader-component/vue";

import { FileUploader } from "file-uploader-component/react";

import { FileUploaderModule } from "file-uploader-component/angular";

// v7

import "file-uploader-vue-component";

import { FileUploader } from "file-uploader-react-component";

import { FileUploaderModule } from "file-uploader-angular-component";

```

```html

// v6

// v7

```

```ts

// v5 angular AOT:

import { FileUploaderModule } from "file-uploader-component/angular";

// v6 angular AOT:

import { FileUploaderModule } from "file-uploader-component/aot/angular";

```

```bash

// v5

import "file-uploader-component/vue";

// v4

import "file-uploader-component/dist/vue";

```

```bash

// v4

locale is an object that can be imported dynamicly

// v3

locale is a string

```

```bash

// v3

// link css

// v2

// no css file to link

```

```bash

// v2

fileUploaded:

// the event that is triggered when a file is uploaded to server

// v1

fileUploaded: (file: File or Blob) => void

// the event that is triggered when got the file object

```