@blaze-react/file-upload NPM | npm.io

0.7.0 • Published 6 months ago

Install

Weekly downloads

446

License

ISC

Repository

Last release

6 months ago

Description

FileUpload component is a great draggable area, move one or multiple images to a desired location and "drop" it there using a mouse or similar device.

Usage

simple FileUpload

<FileUpload handleDrop={({ event, base64, files, canceled }) => {}}>// Preview files or any other logic</FileUpload>

Modal with FileUpload

class ModalWithFileUpload extends Component {
  state = {
    previewImages: [],
    filesToUpload: [],
  };

  handleDrop = ({ base64, canceled, files }) => {
    const { previewImages, filesToUpload } = this.state;

    if (canceled) return this.setState({ previewImages: [] });

    const images = base64.map((src) => <img key={nanoid()} src={src} style={imageStyles} />);

    this.setState({
      previewImages: [...previewImages, ...images],
      filesToUpload: [...filesToUpload, ...files],
    });
  };

  render() {
    const {
      state: { previewImages },
      handleDrop,
    } = this;
    return (
      <Modal
        isActive
        buttonText="Upload Files"
        title="Add media"
        actions={[['submit', () => {}, 'rounded outline']]}
        upload
      >
        <FileUpload handleDrop={handleDrop} actionText="Add file">
          {previewImages}
        </FileUpload>
      </Modal>
    );
  }
}

<ModalWithFileUpload />;

API

FileUpload can receive a number of `props` as follow:

NAME	TYPE	DEFAULT
handleDrop	Function	() => {}
children	Single or array of nodes	No content
actionText	String	Add files

@everything-registry/sub-chunk-130 @blaze-cms/plugin-media-ui @infinitebrahmanuniverse/nolb-_bla

6 months ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago