Morioh
Login
Vuejs Components

Vuejs Components

3 years ago

A reactjs and vuejs component of file uploader

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

<link rel="stylesheet" href="./node_modules/file-uploader-component/dist/file-uploader.min.css" />

reactjs component

gzip size

npm i file-uploader-react-component

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

or

<script src="./node_modules/react/umd/react.production.min.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.production.min.js"></script>
<script src="./node_modules/file-uploader-react-component/dist/file-uploader-react-component.min.js"></script>

<FileUploader fileUploaded={this.fileUploaded}
    fileGot={this.fileGot}
    accept="image/*"
    multiple={true}>
</FileUploader>

the online demo: https://plantain-00.github.io/file-uploader-component/packages/react/demo

vuejs component

gzip size

npm i file-uploader-vue-component

import "file-uploader-vue-component";

or

<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/vue-class-component/dist/vue-class-component.min.js"></script>
<script src="./node_modules/file-uploader-vue-component/dist/file-uploader-vue-component.min.js"></script>

<file-uploader @file-uploaded="fileUploaded($event)"
    @file-got="fileGot($event)"
    accept="image/*"
    multiple="true">
</file-uploader>

the online demo: https://plantain-00.github.io/file-uploader-component/packages/vue/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

change logs

# 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

// 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";

// v6
<link rel="stylesheet" href="./node_modules/file-uploader-component/file-uploader.min.css" />

// v7
<link rel="stylesheet" href="./node_modules/file-uploader-component/dist/file-uploader.min.css" />

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

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

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

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

// v4
locale is an object that can be imported dynamicly

// v3
locale is a string

// v3
// link css

// v2
// no css file to link

// 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

Download Details:

Author: plantain-00

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

#vuejs #vue #javascript #reactjs #react

A reactjs and vuejs component of file uploader
2.95 GEEK