fix(storage): add correct contentType (#14536)

Author: soberm

packages/aws-amplify/package.json

@@ -529,7 +529,7 @@
 			"name": "[Storage] uploadData (S3)",
 			"path": "./dist/esm/storage/index.mjs",
 			"import": "{ uploadData }",
-			"limit": "24 kB"
+			"limit": "24.4 kB"
 		}
 	]
 }

packages/storage/__tests__/providers/s3/apis/internal/uploadData/putObjectJob.test.ts

@@ -453,5 +453,71 @@ describe('putObjectJob with path', () => {
 				},
 			);
 		});
+
+		it('should detect content type from file extension', async () => {
+			const abortController = new AbortController();
+			const testData = 'data';
+			const job = putObjectJob(
+				{
+					key: 'image.jpg',
+					data: testData,
+				},
+				abortController.signal,
+				testData.length,
+			);
+			await job();
+
+			expect(mockPutObject).toHaveBeenCalledWith(
+				expect.any(Object),
+				expect.objectContaining({
+					ContentType: 'image/jpeg',
+				}),
+			);
+		});
+
+		it('should detect content type from File object', async () => {
+			const abortController = new AbortController();
+			const file = new File(['content'], 'test.png', { type: 'image/png' });
+			const job = putObjectJob(
+				{
+					key: 'test.jpg', // Different extension to test File.type takes precedence
+					data: file,
+				},
+				abortController.signal,
+				file.size,
+			);
+			await job();
+
+			expect(mockPutObject).toHaveBeenCalledWith(
+				expect.any(Object),
+				expect.objectContaining({
+					ContentType: 'image/png',
+				}),
+			);
+		});
+
+		it('should use explicit contentType when provided', async () => {
+			const abortController = new AbortController();
+			const testData = 'data';
+			const job = putObjectJob(
+				{
+					key: 'image.jpg',
+					data: testData,
+					options: {
+						contentType: 'custom/type',
+					},
+				},
+				abortController.signal,
+				testData.length,
+			);
+			await job();
+
+			expect(mockPutObject).toHaveBeenCalledWith(
+				expect.any(Object),
+				expect.objectContaining({
+					ContentType: 'custom/type',
+				}),
+			);
+		});
 	});
 });

packages/storage/__tests__/utils/contentType.test.ts

@@ -0,0 +1,43 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { getContentType } from '../../src/utils/contentType';
+
+describe('getContentType', () => {
+	it('should return File.type when data is a File with type', () => {
+		const file = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
+		expect(getContentType(file, 'test.jpg')).toBe('image/jpeg');
+	});
+
+	it('should return MIME type based on file extension', () => {
+		expect(getContentType('data', 'image.png')).toBe('image/png');
+		expect(getContentType('data', 'video.mp4')).toBe('video/mp4');
+		expect(getContentType('data', 'document.pdf')).toBe('application/pdf');
+	});
+
+	it('should handle files with multiple dots by using last extension', () => {
+		expect(getContentType('data', 'myfile.tar.gz')).toBe('application/gzip');
+		expect(getContentType('data', 'archive.tar.bz')).toBe('application/x-bzip');
+		expect(getContentType('data', 'data.json.zip')).toBe('application/zip');
+	});
+
+	it('should handle case insensitive extensions', () => {
+		expect(getContentType('data', 'IMAGE.PNG')).toBe('image/png');
+		expect(getContentType('data', 'Video.MP4')).toBe('video/mp4');
+	});
+
+	it('should return undefined for unknown extensions', () => {
+		expect(getContentType('data', 'file.unknown')).toBeUndefined();
+		expect(getContentType('data', 'noextension')).toBeUndefined();
+	});
+
+	it('should prefer File.type over extension detection', () => {
+		const file = new File(['content'], 'test.png', { type: 'image/jpeg' });
+		expect(getContentType(file, 'test.png')).toBe('image/jpeg');
+	});
+
+	it('should fallback to extension when File has no type', () => {
+		const file = new File(['content'], 'test.png', { type: '' });
+		expect(getContentType(file, 'test.png')).toBe('image/png');
+	});
+});

packages/storage/src/providers/s3/apis/internal/uploadData/multipart/uploadCache.ts

@@ -12,6 +12,7 @@ import { Part, listParts } from '../../../../utils/client/s3data';
 import { logger } from '../../../../../../utils';
 // TODO: Remove this interface when we move to public advanced APIs.
 import { UploadDataInput as UploadDataWithPathInputWithAdvancedOptions } from '../../../../../../internals/types/inputs';
+import { getContentType } from '../../../../../../utils/contentType';
 
 const ONE_HOUR = 1000 * 60 * 60;
 
@@ -166,7 +167,7 @@ export const getUploadsCacheKey = ({
 }: UploadsCacheKeyOptions) => {
 	let levelStr;
 	const resolvedContentType =
-		contentType ?? file?.type ?? 'application/octet-stream';
+		contentType ?? getContentType(file, key) ?? 'application/octet-stream';
 
 	// If no access level is defined, we're using custom gen2 access rules
 	if (accessLevel === undefined) {

packages/storage/src/providers/s3/apis/internal/uploadData/multipart/uploadHandlers.ts

@@ -38,6 +38,7 @@ import { logger } from '../../../../../../utils';
 import { calculateContentCRC32 } from '../../../../utils/crc32';
 import { StorageOperationOptionsInput } from '../../../../../../types/inputs';
 import { IntegrityError } from '../../../../../../errors/IntegrityError';
+import { getContentType } from '../../../../../../utils/contentType';
 
 import { uploadPartExecutor } from './uploadPartExecutor';
 import {
@@ -137,7 +138,9 @@ export const getMultipartUploadHandlers = (
 		const {
 			contentDisposition,
 			contentEncoding,
-			contentType = 'application/octet-stream',
+			contentType = uploadDataOptions?.contentType ??
+				getContentType(data, objectKey) ??
+				'application/octet-stream',
 			metadata,
 			preventOverwrite,
 			onProgress,

packages/storage/src/providers/s3/apis/internal/uploadData/putObjectJob.ts

@@ -22,6 +22,7 @@ import {
 } from '../../../utils/constants';
 import { calculateContentCRC32 } from '../../../utils/crc32';
 import { constructContentDisposition } from '../../../utils/constructContentDisposition';
+import { getContentType } from '../../../../../utils/contentType';
 
 /**
  * The input interface for UploadData API with only the options needed for single part upload.
@@ -60,7 +61,9 @@ export const putObjectJob =
 		const {
 			contentDisposition,
 			contentEncoding,
-			contentType = 'application/octet-stream',
+			contentType = uploadDataOptions?.contentType ??
+				getContentType(data, objectKey) ??
+				'application/octet-stream',
 			preventOverwrite,
 			metadata,
 			checksumAlgorithm,

packages/storage/src/utils/contentType.ts

@@ -0,0 +1,99 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+const MIME_TYPES: Record<string, string> = {
+	// Audio
+	aac: 'audio/aac',
+	mid: 'audio/midi',
+	midi: 'audio/x-midi',
+	mp3: 'audio/mpeg',
+	oga: 'audio/ogg',
+	opus: 'audio/ogg',
+	wav: 'audio/wav',
+	weba: 'audio/webm',
+	// Video
+	avi: 'video/x-msvideo',
+	mp4: 'video/mp4',
+	mpeg: 'video/mpeg',
+	ogv: 'video/ogg',
+	ts: 'video/mp2t',
+	webm: 'video/webm',
+	// Images
+	apng: 'image/apng',
+	avif: 'image/avif',
+	bmp: 'image/bmp',
+	gif: 'image/gif',
+	ico: 'image/vnd.microsoft.icon',
+	jpeg: 'image/jpeg',
+	jpg: 'image/jpeg',
+	png: 'image/png',
+	svg: 'image/svg+xml',
+	tif: 'image/tiff',
+	tiff: 'image/tiff',
+	webp: 'image/webp',
+	// Text
+	css: 'text/css',
+	csv: 'text/csv',
+	htm: 'text/html',
+	html: 'text/html',
+	ics: 'text/calendar',
+	js: 'text/javascript',
+	md: 'text/markdown',
+	mjs: 'text/javascript',
+	txt: 'text/plain',
+	// Application
+	abw: 'application/x-abiword',
+	arc: 'application/x-freearc',
+	azw: 'application/vnd.amazon.ebook',
+	bin: 'application/octet-stream',
+	bz: 'application/x-bzip',
+	bz2: 'application/x-bzip2',
+	cda: 'application/x-cdf',
+	csh: 'application/x-csh',
+	doc: 'application/msword',
+	docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+	eot: 'application/vnd.ms-fontobject',
+	epub: 'application/epub+zip',
+	gz: 'application/gzip',
+	jar: 'application/java-archive',
+	json: 'application/json',
+	jsonld: 'application/ld+json',
+	mpkg: 'application/vnd.apple.installer+xml',
+	odp: 'application/vnd.oasis.opendocument.presentation',
+	ods: 'application/vnd.oasis.opendocument.spreadsheet',
+	odt: 'application/vnd.oasis.opendocument.text',
+	ogx: 'application/ogg',
+	pdf: 'application/pdf',
+	php: 'application/x-httpd-php',
+	ppt: 'application/vnd.ms-powerpoint',
+	pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+	rar: 'application/vnd.rar',
+	rtf: 'application/rtf',
+	sh: 'application/x-sh',
+	tar: 'application/x-tar',
+	vsd: 'application/vnd.visio',
+	webmanifest: 'application/manifest+json',
+	xhtml: 'application/xhtml+xml',
+	xls: 'application/vnd.ms-excel',
+	xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+	xml: 'application/xml',
+	zip: 'application/zip',
+	// Fonts
+	otf: 'font/otf',
+	ttf: 'font/ttf',
+	woff: 'font/woff',
+	woff2: 'font/woff2',
+};
+
+/**
+ * Detect content type from file data or filename extension
+ */
+export const getContentType = (data: any, key: string): string | undefined => {
+	if (data instanceof File && data.type) {
+		return data.type;
+	}
+
+	const ext = key.split('.').pop()?.toLowerCase();
+
+	return ext ? MIME_TYPES[ext] : undefined;
+};