amplify-js
amplify-js copied to clipboard
Published
20 hours ago •
aws-amplify
aws-amplify
storage download issues with return blob V6
Before opening, please confirm:
- [X] I have searched for duplicate or closed issues and discussions.
- [X] I have read the guide for submitting bug reports.
- [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
JavaScript Framework
Next.js
Amplify APIs
Storage
Amplify Version
v6
Amplify Categories
storage
Backend
None
Environment information
System:
OS: Windows 10 10.0.22621
CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
Memory: 12.97 GB / 31.67 GB
Binaries:
Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Chromium (120.0.2210.144)
Internet Explorer: 11.0.22621.1
npmPackages:
@ampproject/toolbox-optimizer: undefined ()
@aws-amplify/adapter-nextjs: ^1.0.10 => 1.0.10
@aws-amplify/adapter-nextjs/api: undefined ()
@aws-amplify/adapter-nextjs/data: undefined ()
@aws-amplify/cli: ^12.10.1 => 12.10.1
@babel/core: undefined ()
@babel/runtime: 7.22.5
@cypress/angular: 0.0.0-development
@cypress/mount-utils: 0.0.0-development
@cypress/react: 0.0.0-development
@cypress/react18: 0.0.0-development
@cypress/svelte: 0.0.0-development
@cypress/vue: 0.0.0-development
@cypress/vue2: 0.0.0-development
@edge-runtime/cookies: 4.0.2
@edge-runtime/ponyfill: 2.4.1
@edge-runtime/primitives: 4.0.2
@emotion/react: ^11.11.1 => 11.11.1
@emotion/styled: ^11.11.0 => 11.11.0
@hapi/accept: undefined ()
@matterport/sdk: ^1.4.23 => 1.4.23
@matterport/webcomponent: ^0.1.37 => 0.1.37
@mswjs/interceptors: undefined ()
@mui/icons-material: ^5.8.3 => 5.14.9
@mui/lab: ^5.0.0-alpha.144 => 5.0.0-alpha.144
@mui/material: ^5.14.9 => 5.14.9
@mui/styled-engine-sc: ^5.8.0 => 5.14.9
@mui/x-charts: ^6.18.3 => 6.18.3
@mui/x-date-pickers: ^6.0.3 => 6.14.0
@napi-rs/triples: undefined ()
@next/font: undefined ()
@next/react-dev-overlay: undefined ()
@opentelemetry/api: undefined ()
@react-pdf-viewer/core: ^3.12.0 => 3.12.0
@react-pdf-viewer/default-layout: ^3.12.0 => 3.12.0
@tweenjs/tween.js: ^23.1.1 => 23.1.1
@types/fslightbox-react: ^1.4.2 => 1.7.4
@types/node: 17.0.41 => 17.0.41 (18.17.15)
@types/papaparse: ^5.3.3 => 5.3.14
@types/react: 18.0.12 => 18.0.12
@types/react-dom: 18.0.5 => 18.0.5
@types/react-html5-camera-photo: ^1.5.1 => 1.5.1
@types/react-window: ^1.8.8 => 1.8.8
@types/three: ^0.129.1 => 0.129.2
@types/webpack-env: ^1.18.4 => 1.18.4
@vercel/nft: undefined ()
@vercel/og: 0.6.2
acorn: undefined ()
amphtml-validator: undefined ()
anser: undefined ()
arg: undefined ()
assert: undefined ()
async-retry: undefined ()
async-sema: undefined ()
aws-amplify: ^6.0.11 => 6.0.11
aws-amplify/adapter-core: undefined ()
aws-amplify/analytics: undefined ()
aws-amplify/analytics/kinesis: undefined ()
aws-amplify/analytics/kinesis-firehose: undefined ()
aws-amplify/analytics/personalize: undefined ()
aws-amplify/analytics/pinpoint: undefined ()
aws-amplify/api: undefined ()
aws-amplify/api/server: undefined ()
aws-amplify/auth: undefined ()
aws-amplify/auth/cognito: undefined ()
aws-amplify/auth/cognito/server: undefined ()
aws-amplify/auth/enable-oauth-listener: undefined ()
aws-amplify/auth/server: undefined ()
aws-amplify/datastore: undefined ()
aws-amplify/in-app-messaging: undefined ()
aws-amplify/in-app-messaging/pinpoint: undefined ()
aws-amplify/push-notifications: undefined ()
aws-amplify/push-notifications/pinpoint: undefined ()
aws-amplify/storage: undefined ()
aws-amplify/storage/s3: undefined ()
aws-amplify/storage/s3/server: undefined ()
aws-amplify/storage/server: undefined ()
aws-amplify/utils: undefined ()
aws-sdk: ^2.1441.0 => 2.1458.0
axios: ^1.6.5 => 1.6.5
babel-packages: undefined ()
browserify-zlib: undefined ()
browserslist: undefined ()
buffer: undefined ()
bytes: undefined ()
canvas: ^2.11.2 => 2.11.2
ci-info: undefined ()
cli-select: undefined ()
client-only: 0.0.1
comment-json: undefined ()
compression: undefined ()
conf: undefined ()
constants-browserify: undefined ()
content-disposition: undefined ()
content-type: undefined ()
cookie: undefined ()
cross-spawn: undefined ()
crypto-browserify: undefined ()
css-loader: ^6.9.0 => 6.9.0
css.escape: undefined ()
csv-parse: ^5.2.2 => 5.5.0
cypress: ^13.2.0 => 13.2.0
data-uri-to-buffer: undefined ()
dayjs: ^1.11.5 => 1.11.9
debug: undefined ()
devalue: undefined ()
domain-browser: undefined ()
edge-runtime: undefined ()
eslint: 8.17.0 => 8.17.0
eslint-config-next: ^14.0.4 => 14.0.4
events: undefined ()
file-loader: ^6.2.0 => 6.2.0
find-cache-dir: undefined ()
find-up: undefined ()
fresh: undefined ()
fslightbox-react: file:src/lib/fslightbox.tgz => 1.5.1
get-orientation: undefined ()
glob: undefined ()
graphql-tag: ^2.12.6 => 2.12.6
gray-matter: ^4.0.3 => 4.0.3
gzip-size: undefined ()
http-proxy: undefined ()
http-proxy-agent: undefined ()
https-browserify: undefined ()
https-proxy-agent: undefined ()
icss-utils: undefined ()
ignore-loader: undefined ()
image-size: undefined ()
is-animated: undefined ()
is-docker: undefined ()
is-wsl: undefined ()
jest-worker: undefined ()
json5: undefined ()
jsonwebtoken: undefined ()
jspdf: ^2.5.1 => 2.5.1
loader-runner: undefined ()
loader-utils: undefined ()
lodash.curry: undefined ()
lru-cache: undefined ()
micromatch: undefined ()
mini-css-extract-plugin: undefined ()
nanoid: undefined ()
native-url: undefined ()
neo-async: undefined ()
next: ^14.0.5 => 14.1.0
next-pwa: ^5.6.0 => 5.6.0
next-transpile-modules: ^10.0.1 => 10.0.1
node-fetch: undefined ()
node-html-parser: undefined ()
openbim-components: 1.1.5 => 1.1.5
ora: undefined ()
os-browserify: undefined ()
p-limit: undefined ()
pako: ^2.1.0 => 2.1.0
papaparse: ^5.3.2 => 5.4.1
path-browserify: undefined ()
pdfjs-dist: ^3.11.174 => 3.11.174 (2.4.456)
platform: undefined ()
postcss-flexbugs-fixes: undefined ()
postcss-modules-extract-imports: undefined ()
postcss-modules-local-by-default: undefined ()
postcss-modules-scope: undefined ()
postcss-modules-values: undefined ()
postcss-preset-env: undefined ()
postcss-safe-parser: undefined ()
postcss-scss: undefined ()
postcss-value-parser: undefined ()
prettier: 2.8.4 => 2.8.4
process: undefined ()
prop-types: ^15.8.1 => 15.8.1
punycode: undefined ()
querystring-es3: undefined ()
raw-body: undefined ()
react: ^18 => 18.2.0 (16.14.0)
react-builtin: undefined ()
react-doc-viewer: ^0.1.5 => 0.1.5
react-dom: ^18 => 18.2.0 (16.14.0)
react-dom-builtin: undefined ()
react-dom-experimental-builtin: undefined ()
react-dropzone: ^14.2.1 => 14.2.3
react-experimental-builtin: undefined ()
react-hook-form: ^7.44.3 => 7.46.1
react-html5-camera-photo: ^1.5.11 => 1.5.11
react-image-file-resizer: ^0.4.8 => 0.4.8
react-intl: ^6.0.4 => 6.4.6
react-is: 18.2.0
react-markdown: ^9.0.1 => 9.0.1
react-refresh: 0.12.0
react-server-dom-turbopack-builtin: undefined ()
react-server-dom-turbopack-experimental-builtin: undefined ()
react-server-dom-webpack-builtin: undefined ()
react-server-dom-webpack-experimental-builtin: undefined ()
react-window: ^1.8.10 => 1.8.10
regenerator-runtime: 0.13.4
remark: ^14.0.3 => 14.0.3
remark-html: ^15.0.2 => 15.0.2
sass-loader: undefined ()
scheduler-builtin: undefined ()
scheduler-experimental-builtin: undefined ()
schema-utils: undefined ()
semver: undefined ()
send: undefined ()
server-only: 0.0.1
setimmediate: undefined ()
shell-quote: undefined ()
source-map: undefined ()
stacktrace-parser: undefined ()
stream-browserify: undefined ()
stream-http: undefined ()
string-hash: undefined ()
string_decoder: undefined ()
strip-ansi: undefined ()
style-loader: ^3.3.4 => 3.3.4
styled-components: ^5.3.5 => 5.3.11
styled-components/macro: undefined ()
styled-components/native: undefined ()
styled-components/primitives: undefined ()
superstruct: undefined ()
swiper: ^9.1.0 => 9.4.1
swr: ^1.3.0 => 1.3.0
swr-immutable: 0.0.1
swr-infinite: 0.0.1
tar: undefined ()
terser: undefined ()
text-table: undefined ()
three: ^0.151.3 => 0.151.3 (0.152.2)
timers-browserify: undefined ()
tty-browserify: undefined ()
typedoc: ^0.25.4 => 0.25.4
typescript: 5.2.2 => 5.2.2
ua-parser-js: undefined ()
unistore: undefined ()
util: undefined ()
uuidv4: ^6.2.13 => 6.2.13
vm-browserify: undefined ()
watchpack: undefined ()
web-ifc: 0.0.50 => 0.0.50 (0.0.43, 0.0.44)
web-vitals: undefined ()
webpack: ^5.89.0 => 5.89.0 ()
webpack-sources: undefined ()
ws: undefined ()
yup: ^0.32.11 => 0.32.11
zod: undefined ()
npmGlobalPackages:
@angular/cli: 13.3.7
@aws-amplify/cli: 10.4.0
json-server: 0.17.0
nodemon: 2.0.19
yarn: 1.22.19
Describe the bug
so i don't know if this bug is actually something on aws side of another package that i am using ( react-doc-viewer) but i will do my best to explain this and you can decide what and if the aws dev team should react. I am trying to show a downloaded file from my s3 in react doc viewer. what i do is:
1 retrieve the file as a blob object: 2 convert it to a base64 string with readAsDataUrl() 3 then set it in the component
const downloadResult = await downloadData({ key: `${file.s3Directory}${file.name}` }).result;
const getBlob = await downloadResult.body.blob();
const reader = new FileReader();
reader.onload = () => {
setImageURI(reader.result as string);
};
this issue for me is when the blob object is converted even though the file is a pdf the type is coming back as an application/octet-stream. This later breaks at the DocView because it is looking for a mime type of pdf. according to the DocViewer package it accepts local paths and URL. a blob object not coming from aws has WORKED! I have also tried to use getURL() where i pass the url object or the url.href... both do not work. any help would be appreciated.
Thank you AWS Dev Team
Expected behavior
file should be viewed in DocView
Reproduction steps
see Description
Code Snippet
// Put your code below this line.
Log output
// Put your logs below this line
aws-exports.js
No response
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
No response
How have you uploaded the pdfs to S3 that you are downloading? And is it possible to re-upload? If you upload your files with the contentType of 'application/pdf', you will be able to download the file as a pdf as well.
uploadData({
key: file.name,
data: file,
options: {
contentType: file.type
}
});
Hi @dhallX following up here - have you had a chance to review the comment from @erinleigh90 above?
@dhallX glad to hear that you were able to get this resolved with @erinleigh90 comment! To confirm, were you uploading the files to S3 separately, or did you need to re-upload with the content type?
@dhallX going to go ahead and close out this issue. If you have any additional comments or question, please let me know. Thanks!