finished s3 upload

src/components/Dropzone.tsx

@@ -1,11 +1,12 @@
-import React, { useEffect, useMemo, useState } from 'react';
-
+import axios from 'axios';
+import React, { useMemo } from 'react';
+import Backend from '../utils/utils';
 import { useDropzone } from 'react-dropzone';
 
 const Dropzone = () => {
   const { getRootProps, getInputProps, isDragAccept, isDragReject, acceptedFiles } = useDropzone({
     noKeyboard: true,
-    accept: { 'image/jpeg': ['jpeg', 'jpg'], 'image/png': ['.png']},
+    accept: { 'image/jpeg': ['.jpeg', '.jpg'], 'image/png': ['.png'] },
     maxFiles: 1,
   });
 
@@ -17,6 +18,23 @@ const Dropzone = () => {
   //   }
   // }, [acceptedFiles]);
 
+  const uploadImage = async (file: File) => {
+    // get S3 upload url from server
+    const { data: uploadUrl } = await Backend.get('/s3Upload');
+
+    // upload image directly to S3 bucket
+    await axios.put(uploadUrl, file, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    });
+
+    const imageUrl = uploadUrl.split('?')[0];
+    console.log(imageUrl);
+
+    return imageUrl;
+  };
+
   const dropzoneBox = useMemo(() => {
     let base = 'dropzone-zone';
     base += isDragAccept ? ' dropzone-accept' : '';
@@ -40,6 +58,22 @@ const Dropzone = () => {
             {file.name} - {file.size} bytes
           </li>
         ))}
+
+        <button
+          onClick={() => {
+            uploadImage(acceptedFiles[0]);
+          }}
+          disabled={!acceptedFiles}
+          style={{
+            background: 'blue',
+            color: 'white',
+            padding: '4px',
+            borderRadius: '5px',
+            margin: '4px',
+          }}
+        >
+          UPLOAD BUTTON
+        </button>
       </aside>
     </section>
   );