react-easy-uploader

Introduction

A React component by which you can upload images into server with compressing.
Demo: https://swnumaster.github.io/react-easy-uploader/
Author: Nathan Jiang ([e-mail])

Installation

npm install react-easy-uploader

Usage

    import React from 'react';
    import { render } from 'react-dom';
    import ReactEasyUploader from 'react-easy-uploader';

    let fileList = [
        {url: "https://blog.chueasy.com/wp-content/themes/easyportalpro/images/default/slide1.jpg", filename: "slide1.jpg"},
        {url: "https://blog.chueasy.com/wp-content/themes/easyportalpro/images/default/slide2.jpg", filename: "slide2.jpg"},
        {url: "https://blog.chueasy.com/wp-content/themes/easyportalpro/images/default/slide3.jpg", filename: "slide3.jpg"},
    ];

    let headers = {token: "NDQ4MDI4MzI4NTkzODc2OTkyMXwxNjIyNzA5MTg2LjcxNzUzMjk6YWRmNTRjNmUwOTU4YmM5MzQ1YTQyYjBkNDczMjBjNGNmNjVhMzkyZg=="};

    let uploadApi = "/api/image/upload";

    function parseResponse(respData) {
        console.log(respData);
        if (respData.code === 0) {
            return respData.content.filename;
        }
        return false;
    }

    function onFileListChange(fileList) {
        console.log(fileList);
    }

    function onException(e) {
        console.log(e);
    }

    const MyComponent = () => (
        <ReactEasyUploader
            fileList={fileList}
            uploadApi={uploadApi}
            inputName="uploadfile"
            parseResponse={parseResponse} 
            onFileListChange={onFileListChange}
            onException={onException}
            headers={headers}
            quality={0.8}
            maxSize={1024}
            maxCount={4}
        />
    );

    render(<MyComponent />, document.getElementById(node));

Change log

v1.0.2

    change webpack4 to webpack5 and remove url-loader, file-loader, svg-url-loader
    upgrade other packages for development

v1.0.1

    ignore unecessary files