@dsalvagni/react-profile-picture v1.0.1

Profile Picture (React Component)

Demo | jQuery Version

Setup

The better option would be to add this component into your project by cloning this repository and building it yourself with the design changes that you might want to make.

:warning: Breaking changes

Starting from version 1.0.0, use this package installing from NPM or Yarn.

yarn add @dsalvagni/react-profile-picture

Example

import React, { Component } from 'react';

import ProfilePicture from "@dsalvagni/react-profile-picture"
import "@dsalvagni/react-profile-picture/dist/ProfilePicture.css"

class App extends Component {
  constructor(props) {
    super(props)

    this.profilePictureRef = React.createRef();
  }

  handleUpload() {
    const PP = this.profilePicture.current;
    const imageData = PP.getData();
    const file = imageData.file;
    const imageAsDataURL = PP.getImageAsDataUrl();

    ...
    //add here the upload logic...
  }

  render() {
    return <ProfilePicture
      ref={this.profilePictureRef}
      useHelper={true}
      debug={true}
    />

    <button onClick={this.handleUpload.bind(this)}>Upload</button>
  }
}

Options

Status Messages

Status Message Object Example

messages: {
  DEFAULT: "Drop your photo here or tap to select.",
  DRAGOVER: "Drop your photo",
  INVALID_FILE_TYPE: "Only images allowed.",
  INVALID_IMAGE_SIZE: "Your photo must be larger than 350px."
}

Callbacks

Methods

Contributing

Contributions, issues and feature requests are very welcome. Please make sure to read the Contributing Guide before making a pull request.

Code of conduct

Find here our code of conduct.