Summary

A React component that renders an image input and uploads to an S3 bucket. Optionally can perform resizing and compressing of the image.

• ready to use an input element with preview of a image
• resizing and compressing of an image on frontend to reduce traffic and increase speed of uploading

How does it look like

Installation

npm install react-image-upload-s3

Example 1

autoUpload=True

1import React, { useState, useRef, useEffect } from 'react';
2import { ImageS3Upload } from 'react-image-upload-s3';
3
4function App() {
5  const URL_GENERATE_S3_URLKEY = 'https://yourserver.com/s3/sign/';
6  const SERVER_PHOTO = 'https://example.amazonaws.com/';
7
8  const resizerOptions = {
9    enabled: true,
10    autoResize: true, // otherwise resizing will be preform before uploading, the parametr doesn't make sense if autoUpload = True
11    maxWidth: 1280,
12    maxHeight: 1280,
13    compressFormat: 'JPEG',
14    quality: 70,
15    rotation: 0, // rotation is limited to multiples of 90 degrees
16  };
17
18  const onFinish = (isSuccessful: boolean, urlImage: string) => {
19    if (isSuccessful) {
20      console.log('onFinish', urlImage);
21    } else {
22      console.log('onFinish', 'Unsuccessful');
23    }
24  };
25
26  return (
27    <div
28      style={{
29        maxWidth: '200px',
30        margin: '10px',
31        padding: '10px',
32        border: 'solid 1px black',
33      }}
34    >
35      <ImageS3Upload
36        signingUrl={URL_GENERATE_S3_URLKEY}
37        autoUpload={true}
38        serverPhoto={SERVER_PHOTO}
39        onFinish={onFinish}
40        resizer={resizerOptions}
41      />
42    </div>
43  );
44}
45
46export default App;

Example 2

autoUpload=False

1import React, { useState, useRef, useEffect } from 'react';
2import { ImageS3Upload } from 'react-image-upload-s3';
3
4function App() {
5  const URL_GENERATE_S3_URLKEY = 'https://yourserver.com/s3/sign/';
6  const SERVER_PHOTO = 'https://example.amazonaws.com/';
7
8  const resizerOptions = {
9    enabled: true,
10    autoResize: true, // otherwise resizing will be preform before uploading, the parametr doesn't make sense if autoUpload = True
11    maxWidth: 1280,
12    maxHeight: 1280,
13    compressFormat: 'JPEG',
14    quality: 70,
15    rotation: 0, // rotation is limited to multiples of 90 degrees
16  };
17
18  const refS3Uploader = useRef(); // to be able to call method uploadFile
19
20  const [comment, setComment] = useState('');
21  const [imageS3URL, setImageS3URL] = useState('');
22
23  const [submitButtonDisabled, setSubmitButtonDisabled] = useState(false);
24  const [submitData, setSubmitData] = useState(false);
25
26  useEffect(() => {
27    setSubmitData(false);
28    submitData && submitingData();
29  }, [submitData]);
30
31  const onSubmit = async (e: any) => {
32    e.preventDefault();
33    setSubmitButtonDisabled(true);
34    //@ts-ignore
35    const isSuccess = await refS3Uploader.current.uploadFile();
36    setSubmitButtonDisabled(false);
37    isSuccess && setSubmitData(true);
38  };
39
40  const onResizeStart = () => {
41    setSubmitButtonDisabled(true);
42  };
43
44  const onResizeFinish = () => {
45    setSubmitButtonDisabled(false);
46  };
47
48  const submitingData = () => {
49    const dataToSend = {
50      comment,
51      imageS3URL,
52    };
53    console.log('submitingData', dataToSend);
54  };
55
56  return (
57    <div
58      style={{
59        maxWidth: '200px',
60        margin: '10px',
61        padding: '10px',
62        border: 'solid 1px black',
63      }}
64    >
65      <form onSubmit={onSubmit}>
66        <label htmlFor="id_comment1">Comment</label>
67        <input
68          type="text"
69          id="id_comment1"
70          value={comment}
71          onChange={e => setComment(e.target.value)}
72        />
73
74        <br />
75        <br />
76
77        <ImageS3Upload
78          signingUrl={URL_GENERATE_S3_URLKEY}
79          autoUpload={false}
80          serverPhoto={SERVER_PHOTO}
81          resizer={resizerOptions}
82          onResizeStart={onResizeStart}
83          onResizeFinish={onResizeFinish}
84          ref={refS3Uploader}
85          value={imageS3URL}
86          onChange={(e: any) => setImageS3URL(e.target.value)}
87        />
88
89        <br />
90        <br />
91
92        <input
93          type="submit"
94          value="Submit"
95          style={{ width: '100%' }}
96          className="button"
97          disabled={submitButtonDisabled}
98        ></input>
99      </form>
100    </div>
101  );
102}
103
104export default App;

Example 3

autoUpload=True

1import React, { useState, useRef, useEffect } from 'react';
2import { ImageS3Upload } from 'react-image-upload-s3';
3
4function App() {
5  const URL_GENERATE_S3_URLKEY = 'https://yourserver.com/s3/sign/';
6  const SERVER_PHOTO = 'https://example.amazonaws.com/';
7
8  const resizerOptions = {
9    enabled: true,
10    autoResize: true, // otherwise resizing will be preform before uploading
11    maxWidth: 1280,
12    maxHeight: 1280,
13    compressFormat: 'JPEG',
14    quality: 70,
15    rotation: 0, // rotation is limited to multiples of 90 degrees
16  };
17
18  const [comment, setComment] = useState('');
19  const [imageS3URL, setImageS3URL] = useState('');
20
21  const [submitButtonDisabled, setSubmitButtonDisabled] = useState(false);
22
23  const onSubmit = async (e: any) => {
24    e.preventDefault();
25    const dataToSend = {
26      comment,
27      imageS3URL,
28    };
29    console.log('onSubmit', dataToSend);
30  };
31
32  const onStart = () => {
33    setSubmitButtonDisabled(true);
34  };
35
36  const onFinish = (isSuccessful: boolean) => {
37    setSubmitButtonDisabled(false);
38    console.log('isSuccessful', isSuccessful);
39  };
40
41  return (
42    <div
43      style={{
44        maxWidth: '200px',
45        margin: '10px',
46        padding: '10px',
47        border: 'solid 1px black',
48      }}
49    >
50      <form onSubmit={onSubmit}>
51        <label htmlFor="id_comment2">Comment</label>
52        <input
53          type="text"
54          id="id_comment2"
55          value={comment}
56          onChange={e => setComment(e.target.value)}
57        />
58
59        <br />
60        <br />
61
62        <ImageS3Upload
63          signingUrl={URL_GENERATE_S3_URLKEY}
64          autoUpload={true}
65          serverPhoto={SERVER_PHOTO}
66          onStart={onStart}
67          onFinish={onFinish}
68          resizer={resizerOptions}
69          value={imageS3URL}
70          onChange={e => setImageS3URL(e.target.value)}
71        />
72
73        <br />
74        <br />
75
76        <input
77          type="submit"
78          value="Submit"
79          style={{ width: '100%' }}
80          className="button"
81          disabled={submitButtonDisabled}
82        ></input>
83      </form>
84    </div>
85  );
86}
87
88export default App;

Example 4

Multiple components in one form autoUpload=False

1import React, { useState, useRef, useEffect } from 'react';
2import { ImageS3Upload } from 'react-image-upload-s3';
3
4function App() {
5  const URL_GENERATE_S3_URLKEY = 'https://yourserver.com/s3/sign/';
6  const SERVER_PHOTO = 'https://example.amazonaws.com/';
7
8  const resizerOptions = {
9    enabled: true,
10    autoResize: true, // otherwise resizing will be preform before uploading
11    maxWidth: 1280,
12    maxHeight: 1280,
13    compressFormat: 'JPEG',
14    quality: 70,
15    rotation: 0, // rotation is limited to multiples of 90 degrees
16  };
17
18  const refS3Uploader1 = useRef(); // to be able to call method uploadFile
19  const refS3Uploader2 = useRef(); // to be able to call method uploadFile
20  const refS3Uploader3 = useRef(); // to be able to call method uploadFile
21
22  const [comment1, setComment1] = useState('');
23  const [comment2, setComment2] = useState('');
24  const [comment3, setComment3] = useState('');
25  const [imageS3URL1, setImageS3URL1] = useState('');
26  const [imageS3URL2, setImageS3URL2] = useState('');
27  const [imageS3URL3, setImageS3URL3] = useState('');
28
29  const [submitButtonDisabled, setSubmitButtonDisabled] = useState(false);
30  const [submitData, setSubmitData] = useState(false);
31
32  useEffect(() => {
33    setSubmitData(false);
34    submitData && dataToSubmit();
35  }, [submitData]);
36
37  const onSubmit = async (e: any) => {
38    e.preventDefault();
39    setSubmitButtonDisabled(true);
40    Promise.all([
41      //@ts-ignore
42      refS3Uploader1.current.uploadFile(),
43      //@ts-ignore
44      refS3Uploader2.current.uploadFile(),
45      //@ts-ignore
46      refS3Uploader3.current.uploadFile(),
47    ]).then(values => {
48      setSubmitButtonDisabled(false);
49      let result = true;
50      values.forEach(value => {
51        if (!value) result = false;
52      });
53      result && setSubmitData(true);
54    });
55  };
56
57  const dataToSubmit = () => {
58    const data = {
59      comment1: comment1,
60      image1: imageS3URL1,
61      comment2: comment2,
62      image2: imageS3URL2,
63      comment3: comment3,
64      image3: imageS3URL3,
65    };
66    console.log('submitData', data);
67  };
68
69  const onResizeStart1 = () => {
70    setSubmitButtonDisabled(true);
71  };
72  const onResizeStart2 = () => {
73    setSubmitButtonDisabled(true);
74  };
75  const onResizeStart3 = () => {
76    setSubmitButtonDisabled(true);
77  };
78
79  const onResizeFinish1 = () => {
80    setSubmitButtonDisabled(false);
81  };
82  const onResizeFinish2 = () => {
83    setSubmitButtonDisabled(false);
84  };
85  const onResizeFinish3 = () => {
86    setSubmitButtonDisabled(false);
87  };
88
89  return (
90    <>
91      <form
92        onSubmit={onSubmit}
93        style={{ margin: '10px', padding: '10px', border: 'solid 1px black' }}
94      >
95        <div style={{ display: 'flex' }}>
96          <div style={{ maxWidth: '200px', margin: '10px' }}>
97            <label htmlFor="id_comment1">Comment</label>
98            <input
99              type="text"
100              id="id_comment1"
101              value={comment1}
102              onChange={e => setComment1(e.target.value)}
103            />
104            <br />
105            <br />
106            <ImageS3Upload
107              signingUrl={URL_GENERATE_S3_URLKEY}
108              autoUpload={false}
109              serverPhoto={SERVER_PHOTO}
110              resizer={resizerOptions}
111              onResizeStart={onResizeStart1}
112              onResizeFinish={onResizeFinish1}
113              ref={refS3Uploader1}
114              value={imageS3URL1}
115              onChange={(e: any) => setImageS3URL1(e.target.value)}
116            />
117          </div>
118
119          <div style={{ maxWidth: '200px', margin: '10px' }}>
120            <label htmlFor="id_comment4">Comment</label>
121            <input
122              type="text"
123              id="id_comment4"
124              value={comment2}
125              onChange={e => setComment2(e.target.value)}
126            />
127            <br />
128            <br />
129            <ImageS3Upload
130              signingUrl={URL_GENERATE_S3_URLKEY}
131              autoUpload={false}
132              serverPhoto={SERVER_PHOTO}
133              resizer={resizerOptions}
134              onResizeStart={onResizeStart2}
135              onResizeFinish={onResizeFinish2}
136              ref={refS3Uploader2}
137              value={imageS3URL2}
138              onChange={(e: any) => setImageS3URL2(e.target.value)}
139            />
140          </div>
141
142          <div style={{ maxWidth: '200px', margin: '10px' }}>
143            <label htmlFor="id_comment5">Comment</label>
144            <input
145              type="text"
146              id="id_comment5"
147              value={comment3}
148              onChange={e => setComment3(e.target.value)}
149            />
150            <br />
151            <br />
152            <ImageS3Upload
153              signingUrl={URL_GENERATE_S3_URLKEY}
154              autoUpload={false}
155              serverPhoto={SERVER_PHOTO}
156              resizer={resizerOptions}
157              onResizeStart={onResizeStart3}
158              onResizeFinish={onResizeFinish3}
159              ref={refS3Uploader3}
160              value={imageS3URL3}
161              onChange={(e: any) => setImageS3URL3(e.target.value)}
162            />
163          </div>
164        </div>
165        <input
166          type="submit"
167          value="Submit"
168          style={{ width: '100%' }}
169          className="button"
170          disabled={submitButtonDisabled}
171        ></input>
172      </form>
173    </>
174  );
175}
176
177export default App;

Example 5

Multiple components in one form autoUpload=True

1import React, { useState, useRef, useEffect } from 'react';
2import { ImageS3Upload } from 'react-image-upload-s3';
3
4function App() {
5  const URL_GENERATE_S3_URLKEY = 'https://yourserver.com/s3/sign/';
6  const SERVER_PHOTO = 'https://example.amazonaws.com/';
7
8  const resizerOptions = {
9    enabled: true,
10    autoResize: true, // otherwise resizing will be preform before uploading
11    maxWidth: 1280,
12    maxHeight: 1280,
13    compressFormat: 'JPEG',
14    quality: 70,
15    rotation: 0,
16  };
17
18  const [uploadStatus, setUploadStatus] = useState({
19    image1: true,
20    image2: true,
21    image3: true,
22  });
23
24  const [comment1, setComment1] = useState('');
25  const [comment2, setComment2] = useState('');
26  const [comment3, setComment3] = useState('');
27  const [imageS3URL1, setImageS3URL1] = useState('');
28  const [imageS3URL2, setImageS3URL2] = useState('');
29  const [imageS3URL3, setImageS3URL3] = useState('');
30
31  const [submitButtonDisabled, setSubmitButtonDisabled] = useState(false);
32
33  useEffect(() => {
34    if (uploadStatus.image1 && uploadStatus.image2 && uploadStatus.image3) {
35      setSubmitButtonDisabled(false);
36    } else {
37      setSubmitButtonDisabled(true);
38    }
39  }, [uploadStatus]);
40
41  const onSubmit = async (e: any) => {
42    e.preventDefault();
43    const data = {
44      comment1: comment1,
45      image1: imageS3URL1,
46      comment2: comment2,
47      image2: imageS3URL2,
48      comment3: comment3,
49      image3: imageS3URL3,
50    };
51    console.log('submitedData', data);
52  };
53
54  const onStart1 = () => {
55    setUploadStatus((prev: any) => ({ ...prev, image1: false }));
56  };
57
58  const onStart2 = () => {
59    setUploadStatus((prev: any) => ({ ...prev, image2: false }));
60  };
61
62  const onStart3 = () => {
63    setUploadStatus((prev: any) => ({ ...prev, image3: false }));
64  };
65
66  const onFinish1 = (isSuccessful: boolean) => {
67    setUploadStatus((prev: any) => ({ ...prev, image1: true }));
68  };
69
70  const onFinish2 = (isSuccessful: boolean) => {
71    setUploadStatus((prev: any) => ({ ...prev, image2: true }));
72  };
73
74  const onFinish3 = (isSuccessful: boolean) => {
75    setUploadStatus((prev: any) => ({ ...prev, image3: true }));
76  };
77
78  return (
79    <>
80      <form
81        onSubmit={onSubmit}
82        style={{ margin: '10px', padding: '10px', border: 'solid 1px black' }}
83      >
84        <div style={{ display: 'flex' }}>
85          <div style={{ maxWidth: '200px', margin: '10px' }}>
86            <label htmlFor="id_comment1">Comment</label>
87            <input
88              type="text"
89              id="id_comment1"
90              value={comment1}
91              onChange={e => setComment1(e.target.value)}
92            />
93            <br />
94            <br />
95            <ImageS3Upload
96              signingUrl={URL_GENERATE_S3_URLKEY}
97              autoUpload={true}
98              serverPhoto={SERVER_PHOTO}
99              onStart={onStart1}
100              onFinish={onFinish1}
101              resizer={resizerOptions}
102              value={imageS3URL1}
103              onChange={e => setImageS3URL1(e.target.value)}
104            />
105          </div>
106
107          <div style={{ maxWidth: '200px', margin: '10px' }}>
108            <label htmlFor="id_comment2">Comment</label>
109            <input
110              type="text"
111              id="id_comment2"
112              value={comment2}
113              onChange={e => setComment2(e.target.value)}
114            />
115            <br />
116            <br />
117            <ImageS3Upload
118              signingUrl={URL_GENERATE_S3_URLKEY}
119              autoUpload={true}
120              serverPhoto={SERVER_PHOTO}
121              onStart={onStart2}
122              onFinish={onFinish2}
123              resizer={resizerOptions}
124              value={imageS3URL2}
125              onChange={e => setImageS3URL2(e.target.value)}
126            />
127          </div>
128
129          <div style={{ maxWidth: '200px', margin: '10px' }}>
130            <label htmlFor="id_comment3">Comment</label>
131            <input
132              type="text"
133              id="id_comment3"
134              value={comment3}
135              onChange={e => setComment3(e.target.value)}
136            />
137            <br />
138            <br />
139            <ImageS3Upload
140              signingUrl={URL_GENERATE_S3_URLKEY}
141              autoUpload={true}
142              serverPhoto={SERVER_PHOTO}
143              onStart={onStart3}
144              onFinish={onFinish3}
145              resizer={resizerOptions}
146              value={imageS3URL3}
147              onChange={e => setImageS3URL3(e.target.value)}
148            />
149          </div>
150        </div>
151        <input
152          type="submit"
153          value="Submit"
154          style={{ width: '100%' }}
155          className="button"
156          disabled={submitButtonDisabled}
157        ></input>
158      </form>
159    </>
160  );
161}
162
163export default App;

Options

Option	Description	Type	Required
signingUrl	To receive a presigned URL.	string	Yes
autoUpload	Whether an image will be upload immediately, otherwise you should call a method refImageS3Upload.current.uploadFile() to start uploading.	boolean	Yes
serverPhoto	S3 storage Service endpoints. For example: https://bucket_name.s3.us-east-2.amazonaws.com/	string	No
emptyPhoto	You can change a default empty background.	string	No
buttonCaption	You can change caption on the button. The default value is 'Browse...'	string	No
showSize	Wether to show file size after resizing on the button. The default value is True	boolean	No
value	Value of component (file name)	string	No
resizer	See Resizer options section.	object	No
uploadFile	Method to start uploading: () => Promise	method
onStart	() => void	function	No
onFinish	(isSuccessful: boolean, urlImage: string) => void	function	No
onUploaded	() => void	function	No
onProgress	(percent: number) => void	function	No
onResizeStart	() => void	function	No
onResizeFinish	() => void	function	No
onSignedUrl	(data: any) => void	function	No
onError	(msg: string) => void	function	No

Resizer options

Option	Description	Type	Required
enabled	Whether the resizer is enabled or disabled.	boolean	Yes
autoResize	Start the process of resizing immediately after selecting the file, otherwise resizing will be preform before uploading, the parametr doesn't make sense if autoUpload = True	boolean	Yes
maxWidth	New image max width (ratio is preserved)	number	Yes
maxHeight	New image max height (ratio is preserved)	number	Yes
compressFormat	Can be either JPEG, PNG or WEBP.	string	Yes
quality	A number between 0 and 100. Used for the JPEG compression.(if no compress is needed, just set it to 100)	number	Yes
rotation	Degree of clockwise rotation to apply to the image. Rotation is limited to multiples of 90 degrees.(if no rotation is needed, just set it to 0) (0, 90, 180, 270, 360)	number	Yes

License

MIT