7.6.0 • Published 6 years ago

file-uploader-angular-component v7.6.0

Weekly downloads
2
License
MIT
Repository
github
Last release
6 years ago

file-uploader-component

Dependency Status devDependency Status Build Status: Linux Build Status: Windows npm version Downloads type-coverage

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

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

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

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

nametypedescription
acceptstring?the extension names in the file chosen dialog
multipleboolean?whether multiple file can be selected
localeLocale?the locale object
namestring?will be the key of the file in FormData
urlstring?the upload API url
methodstring?the upload API method
fileUploaded(response: any) => voidthe event that is triggered when a file is uploaded
fileGot(file: File or Blob) => voidthe 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
7.6.0

6 years ago

7.5.0

6 years ago

7.4.1

6 years ago

7.4.0

6 years ago

7.3.0

6 years ago

7.2.2

7 years ago

7.2.1

7 years ago

7.2.0

7 years ago

7.1.4

7 years ago

7.1.3

7 years ago

7.1.2

7 years ago

7.1.1

7 years ago

7.1.0

7 years ago

7.0.2

7 years ago

7.0.1

7 years ago

7.0.0

7 years ago