Reactstrap Core Upload

-
Pro Component

This is a nice custom upload for images with a preview.


Description

We’ve made the following upload component using various reactstrap components, and Bootstrap classes and also some custom scss/css classes.

Examples

...
Select image Change Remove
...
Add Photo Change
Remove
import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import Upload from "components/upload/Upload.js";

function Example() {
  return (
    <>
      <Upload />
      <Upload avatar />
    </>
  );
}

export default Example;

Props

Upload.defaultProps = {
  avatar: false,
  removeBtnClasses: "btn-round",
  removeBtnColor: "danger",
  addBtnClasses: "btn-round",
  addBtnColor: "file",
  changeBtnClasses: "btn-round",
  changeBtnColor: "file",
};

Upload.propTypes = {
  avatar: PropTypes.bool,
  removeBtnClasses: PropTypes.string,
  removeBtnColor: PropTypes.oneOf([
    "default",
    "primary",
    "secondary",
    "success",
    "info",
    "warning",
    "danger",
    "link",
    "file",
  ]),
  addBtnClasses: PropTypes.string,
  addBtnColor: PropTypes.oneOf([
    "default",
    "primary",
    "secondary",
    "success",
    "info",
    "warning",
    "danger",
    "link",
    "file",
  ]),
  changeBtnClasses: PropTypes.string,
  changeBtnColor: PropTypes.oneOf([
    "default",
    "primary",
    "secondary",
    "success",
    "info",
    "warning",
    "danger",
    "link",
    "file",
  ]),
};

Note

You should note, that none of the bellow components are dynamic, as we do not know what your end use case will be. Feel free to change it, add your own props and dynamic code.