contentType of getProperties function return always "application/octet-stream"

[domov44]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

Storage

Amplify Version

v6

Amplify Categories

storage

Backend

Amplify CLI

Environment information

# Put output below this line

Describe the bug

Hi,
I need to get the content-type of s3 file, to know how i can display the file on the frontend (like image balise if jpg, png, or something else if it's a pdf etc..)

So after read documentation i found getContentTypeS3, which seems to be what I'm looking for, I use it I pass my params to the function I call it on several document types returning the .contentType as indicated in the documentation

When I try to process the return of my function, I systematically get “application/octet-stream” whether my document is a PDF, a JPEG, a PNG or a TXT document.

I looked in my header and this is indeed what is returned (see image)

However, in the documentation I see that I can normally retrieve the file type with precision

Expected behavior

I want to retrieve the type of file whose path I pass in parameter

Reproduction steps

1. Install basic configuration of react and amplify
2. setup an upload method to upload file to s3
3. try to use the getProperties from amplify/storage function, and return the contentType
4. Let's see that we always have "application/octet-stream" returned

Code Snippet

My function to getProperties of my file

import { getProperties  } from 'aws-amplify/storage';

const getContentTypeS3 = async (filePath) => {
    try {
        if (filePath) {
            const file = await getProperties({
                path: ({identityId}) => `protected/${identityId}/${filePath}`
            });
            return file.contentType;
        }
    } catch (error) {
        console.error('Error fetching file from S3:', error);
        throw error;
    }
};

export default getContentTypeS3;

How i upload file

// ...
const uploadFileToS3 = async () => {
        if (!selectedFile) {
            throw new Error("Aucun fichier sélectionné");
        }

        const key = `documents/${selectedFile.name}`;
        try {
            await uploadData({
                path: `protected/${user.identityId}/${key}`,
                data: selectedFile,
            });
            return { key, identityId: user.identityId };
        } catch (error) {
            throw new Error("Erreur lors de l'upload du fichier");
        }
    };
// ...

Log output

// Put your logs below this line

aws-exports.js

/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "eu-west-3",
    "aws_appsync_graphqlEndpoint": "https://nd3f4gnskfanldzmzj4m6ta6lq.appsync-api.eu-west-3.amazonaws.com/graphql",
    "aws_appsync_region": "eu-west-3",
    "aws_appsync_authenticationType": "AMAZON_COGNITO_USER_POOLS",
    "aws_appsync_apiKey": "da2-hmvx7wqh7rbo5eaqf2mbr6ljhy",
    "aws_cognito_identity_pool_id": "eu-west-3:90cad829-23fd-4d94-932b-dc39d33f8bed",
    "aws_cognito_region": "eu-west-3",
    "aws_user_pools_id": "eu-west-3_eFrzQZh3l",
    "aws_user_pools_web_client_id": "6q0pv1llgunngd9kk7nktdqqtl",
    "oauth": {},
    "aws_cognito_username_attributes": [
        "EMAIL"
    ],
    "aws_cognito_social_providers": [],
    "aws_cognito_signup_attributes": [
        "EMAIL"
    ],
    "aws_cognito_mfa_configuration": "OFF",
    "aws_cognito_mfa_types": [
        "SMS"
    ],
    "aws_cognito_password_protection_settings": {
        "passwordPolicyMinLength": 8,
        "passwordPolicyCharacters": []
    },
    "aws_cognito_verification_mechanisms": [
        "EMAIL"
    ],
    "aws_user_files_s3_bucket": "appfiles09b13-ronantest",
    "aws_user_files_s3_bucket_region": "eu-west-3"
};


export default awsmobile;

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

[ashika112]

@domov44 your understanding is correct in getting the contentType information through get properties. By default all object uses contentType: 'application/octet/stream' when you upload an object using Amplify. If you provide specific contentType while uploading then that gets used.

So here you would want to upload objects with precision contentType and use getProperties to retrieve it back. Let me know if you have any further questions

[domov44]

@domov44 your understanding is correct in getting the contentType information through get properties. By default all object uses contentType: 'application/octet/stream' when you upload an object using Amplify. If you provide specific contentType while uploading then that gets used.

So here you would want to upload objects with precision contentType and use getProperties to retrieve it back. Let me know if you have any further questions

I missed it in the doc, maybe need to be specify in the download section too,
Anyway that's work, thanks @ashika112 ! 😊