getting "params.Body is required" error when trying to upload to s3

Question

I'm trying to upload a file to aws. But when I try I get the error "params.Body is required". I hae never had this error before and I dont know how to go about handling it. You can find the relevant code below.

state:

const initialState = {
   arzt:"",
   patient: "",
   record: "",
   image: "",
   audio: "",
 };


class EintraegePatient extends Component {
 state = {
   ...initialState
 };

handleAddrecord:

handleAddRecord = async () => {
   try{
    const visibility = "public";
    const {identityId} = await Auth.currentCredentials()
    const filename = `/${visibility}/${identityId}/${Date.now()}-${this.state.image.name}`

    const uploadedFile = await Storage.put(filename, this.state.image.file, {
      contentType: this.state.image.type
    })
    const file = {
      key: uploadedFile.key,
      bucket: aws_exports.aws_user_files_s3_bucket,
      region: aws_exports.aws_project_region
    }
    const input = {

     record: this.state.record,
      file
    }
    const result = await API.graphql(graphqlOperation(createRecords, {input}))
    console.log( "success", result )
    Notification({
      title: "Success",
      message: "Record successfully created!",
      type: "success"
    })
    this.setState({ ...initialState })
  } catch(err) {
    console.error('Error adding Record', err)
  }
  }

then the part of the render that matters

<TextField
         id="outlined-eintreag-input"
         label="eintrag"
         placeholder="Neuer Eintrag"
         margin="normal"
         variant="outlined"
         onChange={record => this.setState({ record })}
       />
       <Button
       variant="contained"
       color="primary"
       className={classes.button}
       onClick={this.handleAddRecord}
       >
       Senden <SendIcon color="secondary" style={{ margin: 8 }}/>
      </Button>


     <PhotoPicker
       title="Product Image"
       id="contained-button-file"
       preview="hidden"
       onPick={file => this.setState({ image : file })}
       onLoad={url => this.setState({ imagePreview: url })}

Any help is much appreciated. Thanks!

Answer 1

Thought I'd drop my $0.50 on this since I ended up Googling this issue when working on my Node project last night. Turns out that S3's structure is a bit different between methods.

When using the s3.upload() function, it looks like this:

async upload (key, file) {

  const storage = new AWS.S3()

  try {
    const params = {
      Body: file.data,
      Key: key,
      ACL: 'public-read',
      Bucket: process.env.AWS_S3_BUCKET
    }

    return await storage.upload(params).promise()

  } catch (err) {
    throw new Error(`S3 upload error: ${err.message}`)
  }
}

When using the browser-side ManagedUpload function, the params are passed in double nested like this:

  ...

    return await storage.ManagedUpload({ params }).promise()

  ...

My brain fart was trying ManagedUpload first then not adjusting my params and being confused. Hopefully this helps someone else's brain fade.

Answer 2

Turnsout I didn't pass in the image state. so corrected version looks something like this although they aer better ways of doing this

addImageAndRecord = async (e) => {

    const kk = e.target.files[0];
    this.state.image=kk;
    console.log( "imago", this.state.image )

     console.log( "value", kk )
    const visibility = "public";
    const {identityId} = await Auth.currentCredentials()
    const filed = kk;
    console.log( "value", filed )
    const filename = `/${visibility}/${identityId}/${Date.now()}-${this.state.image.name}`

    const uploadedFile = await Storage.put(filename, filed, {
       contentType: this.state.image.type
    })
    ....

Answer 3

Your Project should be in Separate folder and clear your browser history,cache