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

Copy

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

Copy

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.