file-uploader-react-component v8.2.0

file-uploader-component

features

• reactjs component
• angular 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

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

angular component

npm i file-uploader-angular-component

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

@NgModule({
    imports: [BrowserModule, FormsModule, FileUploaderModule],
    declarations: [MainComponent],
    bootstrap: [MainComponent],
})
class MainModule { }

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

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

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

vuejs component

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

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