CODEWITHSUNDEEP
reactjsamazon-web-servicesamazon-s3
notADevYet
notADevYet

Reputation: 327

Upload file to AWS S3/Amazon error: Cannot read properties of undefined (reading 'byteLength')

I am trying to implement a file upload to AWS, as a part of a small project i am doing to learn React.

I followed AWS documentation and created a form to upload a file, but I am getting a Cannot read properties of undefined (reading 'byteLength') error. According to what I've been reading, i can be related to the way i am passing the keys. And I also think there might be the problem , but i dont really know what to do.

Right now, I created a .env file that i .gitIgnore , and include them in the const creds ={}

Is there something wrong with my upload function?

This is my code :

import Album from "./components/album/Album";
import "./App.css";
import Carousel from "./components/carousel/Carousel";

import { Upload } from "@aws-sdk/lib-storage";
import { S3Client, S3 } from "@aws-sdk/client-s3";
import { LinearProgress } from "@material-ui/core";
import { useState } from "react";

function App() {
  const [imgUpload, setImgUpload] = useState(0);

  const fileSizeValidator = (file) => {
    const uploadedFile = file.target.files[0];
    if (uploadedFile.size > 40000000) {
      console.log("File size cannot exceed more than 40MB");
    } else {
      upload(uploadedFile);
    }
  };

  const upload = (file) => {
    console.log("uploaded file", file);
    setImgUpload(0);
    const target = {
      Bucket: "rhmybucket",
      Key: file.name,
      Body: file,
    };
    const creds = {
      AWS_ACCESS_KEY_ID: process.env.REACT_APP_aws_access_key_id, //REVIEW check use of credentials
      AWS_SECRET_ACCESS_KEY: process.env.REACT_APP_aws_secret_access_key,
    };
    try {
      const parallelUploads3 = new Upload({
        client: new S3Client({
          region: "eu-central-1",
          credentials: { creds },
        }),

        leavePartsOnError: false, // optional manually handle dropped parts
        params: target,
      });

      parallelUploads3.on("httpUploadProgress", (progress) => {
        console.log(progress);
      });

      parallelUploads3.done();
      setImgUpload(100);
    } catch (e) {
      console.log("error", e.message);
    }
  };

  return (
    <div className="App">
      <h1 className="App_Header">ALBUM</h1>
      <input
        type="file"
        onChange={fileSizeValidator}
        accept=".mp4,image/*, .mkv"
      />
      <LinearProgress
        variant="buffer"
        value={imgUpload}
        valueBuffer={imgUpload}
        color="secondary"
      />
      {/* <Carousel /> */}
      <Album />
    </div>
  );
}

export default App;

Upvotes: 2

Views: 9559

Answers (1)

notADevYet
notADevYet

Reputation: 327

In the end , the error was more of an authentication error. I realised that the .env file with my keys , wasn't really at the root of the project, but a level up. Rookie mistake...which I am :D

Upvotes: 2

Related Questions