'How to upload any type of file to aws s3 bucket?

I am trying to upload files like docs ppts etc. I have a front end in react and my upload function looks like this:

const reader = new FileReader()
const toBase64 = (file) =>
    new Promise((resolve, reject) => {
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = (error) => reject(error);
    });

` const UploadMinues = async (event: any) => { console.log(event, 'envent from forntend');

if (event.target && event?.target?.files[0]) {
  try {
    await toBase64(event.target.files[0]);
    console.log(reader.result, 'reader.result');
    const res = (await API.graphql({
      query: `mutation MyMutation {
                    updateMinutes(input: { projectId:"${event.target.id}", adviserId: "${user.username}", file: "${reader.result}", fileName: "${event.target.files[0].name}", fileType: "${event.target.files[0].type}"}) {
                    minutesKey
                }
                }`,
      authMode: GRAPHQL_AUTH_MODE.AMAZON_COGNITO_USER_POOLS
    })) as any;

  } catch (e) {
    console.log('UpdateImage_Error==>', e);
    setMinutesErr(e.message);
    setOpenAlert(true);
  }
} else {
  console.log('errorrrrrrrrrrr');
  return;
}

};`

And on the back end which is in I have a lambda function like this:

const AWS = require('aws-sdk');

const docClient = new AWS.DynamoDB.DocumentClient();

export async function updateMinutes(data: any) {

  let { adviserId, projectId, file, fileName, fileType } = data;
    console.log(data, "received from front end")
    let s3bucket = new AWS.S3({ params: { Bucket: `${process.env.S3_BUCKET_NAME}` } });



    try {
      // const buf = Buffer.from(file.replace(/^data:application\/\w+;base64,/, ""), 'base64')
      let params_upload = {
        Key: `minutes/${adviserId}/${projectId}/${fileName}`,
        Body: Buffer.from(file, "base64"),
        ContentType: fileType,
        CacheControl: 'max-age=86400'
    };

    const minutes_save = await s3bucket.upload(params_upload).promise()
              
    const minutesKey = minutes_save.Key
              let params = {
                TableName: process.env.CONSULTATION_TABLE,
                Key: {
                    adviserId: adviserId,
                    projectId: projectId,
                },
                UpdateExpression: `set minutes = :edu`,
              ExpressionAttributeValues: {':edu' : [minutesKey]}
                
            }
    
     
            const data = await docClient.update(params).promise()

            return {
                minutesKey: minutesKey
            }
        } catch (err) {
            console.log(err, "IMAGE_UPLOAD_ERROR")
        }
    }

The file get uploaded to s3 bucket but when I open it it is in some symbols format. Could someone please explain what i am doing wrong here. because same approach is working fine when I try to upload pdf or image but not with docs or excels files.

My input look like this:

<Input
                                          id={data.projectId}
                                          name={data.projectId}
                                          onChange={UploadMinues}
                                          accept="application/*"
                                          multiple
                                          type="file"
                                        />


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source