0.7.0 • Published 17 days ago

@blaze-react/file-upload v0.7.0

Weekly downloads
446
License
ISC
Repository
-
Last release
17 days 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:
NAMETYPEDEFAULT
handleDropFunction() => {}
childrenSingle or array of nodesNo content
actionTextStringAdd files
0.8.0-alpha.33

17 days ago

0.8.0-alpha.35

17 days ago

0.8.0-alpha.31

17 days ago

0.8.0-alpha.26

2 months ago

0.8.0-alpha.24

2 months ago

0.8.0-alpha.23

2 months ago

0.8.0-alpha.21

2 months ago

0.8.0-alpha.14

2 months ago

0.8.0-alpha.16

2 months ago

0.8.0-alpha.11

2 months ago

0.8.0-alpha.10

2 months ago

0.8.0-alpha.13

2 months ago

0.8.0-alpha.19

2 months ago

0.8.0-alpha.18

2 months ago

0.8.0-alpha.20

2 months ago

0.8.0-alpha.9

2 months ago

0.8.0-alpha.7

2 months ago

0.8.0-alpha.6

3 months ago

0.8.0-alpha.4

3 months ago

0.7.0

6 months ago

0.6.4

9 months ago

0.6.2

9 months ago

0.6.0

10 months ago

0.5.30

10 months ago

0.5.31

10 months ago

0.5.28

10 months ago

0.5.26

1 year ago

0.5.23

1 year ago

0.5.19

1 year ago

0.5.18

1 year ago

0.5.17

1 year ago

0.5.15

1 year ago

0.5.13

1 year ago

0.5.12

1 year ago

0.5.9

1 year ago

0.5.8

1 year ago

0.5.0

1 year ago

0.4.57

1 year ago

0.4.55

1 year ago

0.4.54

1 year ago

0.4.52

1 year ago

0.4.51

1 year ago

0.4.48

1 year ago

0.4.47

2 years ago

0.4.46

2 years ago

0.4.42

2 years ago

0.4.37

2 years ago

0.4.38

2 years ago

0.4.37-alpha.0

2 years ago

0.4.36

2 years ago

0.4.32

2 years ago

0.4.33

2 years ago

0.4.34

2 years ago

0.4.29

2 years ago

0.4.27

2 years ago

0.4.22

2 years ago

0.4.21

2 years ago

0.4.19

2 years ago

0.4.16

2 years ago

0.4.15

2 years ago

0.4.14

2 years ago

0.4.10

2 years ago

0.4.8

2 years ago

0.4.7

2 years ago

0.4.3

2 years ago

0.4.0

2 years ago

0.3.67

2 years ago

0.3.66

2 years ago

0.3.59

2 years ago

0.3.58

2 years ago

0.3.53

2 years ago

0.3.52

2 years ago

0.3.51

2 years ago

0.3.50

2 years ago

0.3.49

2 years ago

0.3.48

2 years ago

0.3.47

2 years ago

0.3.46

2 years ago

0.3.45

2 years ago

0.3.44

2 years ago

0.3.43

2 years ago

0.3.42

2 years ago

0.3.41

2 years ago

0.3.40

2 years ago

0.3.39

2 years ago

0.3.38

2 years ago

0.3.35

2 years ago

0.3.34

2 years ago

0.3.33

2 years ago

0.3.32

2 years ago

0.3.31

2 years ago

0.3.30

2 years ago

0.3.29

2 years ago

0.3.28

2 years ago

0.3.9

2 years ago

0.3.5

2 years ago

0.3.4

2 years ago

0.3.0

2 years ago

0.2.9

2 years ago

0.2.8

2 years ago

0.2.5

2 years ago

0.2.3

2 years ago

0.2.1

2 years ago

0.2.0

2 years ago

0.1.3

2 years ago

0.1.2

2 years ago

0.1.1

2 years ago