Merge pull request #146 from rolling-scopes-school/products-file-import

TASK 5: Update logic for uploading products files

Author: SergeyKovalchuk

src/components/pages/admin/PageProductImport/PageProductImport.tsx

@@ -20,7 +20,7 @@ export default function PageProductImport() {
   return (
     <div className={classes.content}>
       <Box display="flex" alignItems="center">
-        <CSVFileImport url={`${API_PATHS.import}/product/import`} title="Import Products CSV"/>
+        <CSVFileImport url={`${API_PATHS.import}/import`} title="Import Products CSV"/>
         <Button size="small" color="primary" variant="contained" component={Link} to={'/admin/product-form/'}>
           create product
         </Button>

src/components/pages/admin/PageProductImport/components/CSVFileImport.tsx

@@ -18,22 +18,12 @@ type CSVFileImportProps = {
 export default function CSVFileImport({url, title}: CSVFileImportProps) {
   const classes = useStyles();
   const [file, setFile] = useState<any>();
-  const [uploadUrl, setUploadUrl] = useState<any>();
-
-  const createFile = (file: any) => {
-    let reader = new FileReader()
-    reader.onload = (e: any) => {
-      console.log(e.target.result);
-      setFile(e.target.result);
-    }
-    reader.readAsDataURL(file)
-  };
 
   const onFileChange = (e: any) => {
     console.log(e);
     let files = e.target.files || e.dataTransfer.files
     if (!files.length) return
-    createFile(files[0])
+    setFile(files.item(0));
   };
 
   const removeFile = () => {
@@ -44,24 +34,18 @@ export default function CSVFileImport({url, title}: CSVFileImportProps) {
       // Get the presigned URL
       const response = await axios({
         method: 'GET',
-        url
+        url,
+        params: {
+          name: encodeURIComponent(file.name)
+        }
       })
-      console.log('Response: ', response.data)
-      console.log('Uploading: ', file)
-      let binary = atob(file.split(',')[1])
-      let array = []
-      for (var i = 0; i < binary.length; i++) {
-        array.push(binary.charCodeAt(i))
-      }
-      let blobData = new Blob([new Uint8Array(array)], {type: 'text/plain'})
-      console.log('Uploading to: ', response.data.uploadURL)
-      const result = await fetch(response.data.uploadURL, {
+      console.log('File to upload: ', file.name)
+      console.log('Uploading to: ', response.data)
+      const result = await fetch(response.data, {
         method: 'PUT',
-        body: blobData
+        body: file
       })
       console.log('Result: ', result)
-      // Final URL for the user doesn't need the query string params
-      setUploadUrl(response.data.uploadURL.split('?')[0]);
       setFile('');
     }
   ;
@@ -75,8 +59,8 @@ export default function CSVFileImport({url, title}: CSVFileImportProps) {
           <input type="file" onChange={onFileChange}/>
       ) : (
         <div>
-          {!uploadUrl && <button onClick={removeFile}>Remove file</button>}
-          {!uploadUrl && <button onClick={uploadFile}>Upload file</button>}
+          <button onClick={removeFile}>Remove file</button>
+          <button onClick={uploadFile}>Upload file</button>
         </div>
       )}
     </div>