A reactjs and vuejs component of file uploader

A reactjs and vuejs component of file uploader

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

A Reactjs and Vuejs Tree Component

tree-component .A reactjs and vuejs tree component.

A vuejs and reactjs select component

select2-component A vuejs and reactjs select component

A Vuejs and Reactjs Tour Component

tour-component .A vuejs and reactjs tour component.

A auto-updated vuejs and reactjs relative time component

relative-time-component A auto-updated vuejs, reactjs and react-native relative time component.