Skip to content

Commit

Permalink
Use image size after processing as the resulting file size for image (#…
Browse files Browse the repository at this point in the history 
…7961)
  • Loading branch information
@rikukissa
rikukissa authored Nov 14, 2024
1 parent e3ea912 commit 0a479af
Show file tree
Hide file tree
Showing 5 changed files with 35 additions and 56 deletions.
1 change: 1 addition & 0 deletions packages/client/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,7 @@
"@graphql-codegen/introspection": "^3.0.0",
"@graphql-codegen/typescript": "^3.0.0",
"@graphql-codegen/typescript-operations": "^3.0.0",
"@types/browser-image-compression": "^1.0.13",
"@types/csv2json": "^1.4.5",
"@types/enzyme": "^3.1.13",
"@types/fetch-mock": "^7.3.0",
Expand Down
32 changes: 16 additions & 16 deletions packages/client/src/components/form/DocumentUploadField/DocumentUploaderWithOption.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,13 +73,13 @@ type DocumentFields = {
documentData: string
}

export const getBase64String = (file: File) => {
return new Promise<string | ArrayBuffer>((resolve, reject) => {
const getBase64String = (file: File) => {
return new Promise<string>((resolve, reject) => {
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => {
if (reader.result) {
return resolve(reader.result)
return resolve(reader.result.toString())
}
}
reader.onerror = (error) => reject(error)
Expand Down Expand Up @@ -152,26 +152,26 @@ export const DocumentUploaderWithOption = (props: IFullProps) => {
if (props.compressImagesToSizeMB !== undefined) {
options.maxSizeMB = props.compressImagesToSizeMB
}
// disable compression with a falsy value
const resized =
Boolean(options.maxSizeMB) &&
bytesToMB(uploadedImage.size) > options.maxSizeMB &&
(await imageCompression(uploadedImage, options))
if (
!Boolean(options.maxSizeMB) ||
bytesToMB(uploadedImage.size) <= options.maxSizeMB
) {
return uploadedImage
}

const fileAsBase64 = await getBase64String(resized || uploadedImage)
const resized = await imageCompression(uploadedImage, options)

return fileAsBase64.toString()
return resized
}

const handleFileChange = async (uploadedImage: File) => {
if (!uploadedImage) {
return
}

// If there is only one option available then it would stay selected
const documentType = fields.documentType || dropdownOptions[0].value

let fileAsBase64: string
let processedFile: File
const optionValues: [IFormFieldValue, string] = [
props.extraValue,
documentType
Expand All @@ -194,7 +194,7 @@ export const DocumentUploaderWithOption = (props: IFullProps) => {

try {
// Start processing
;[fileAsBase64] = await Promise.all([
;[processedFile] = await Promise.all([
processImage(uploadedImage),
minimumProcessingTime
])
Expand Down Expand Up @@ -223,9 +223,9 @@ export const DocumentUploaderWithOption = (props: IFullProps) => {

const newDocument: IFileValue = {
optionValues,
type: uploadedImage.type,
data: fileAsBase64.toString(),
fileSize: uploadedImage.size
type: processedFile.type,
data: await getBase64String(processedFile),
fileSize: processedFile.size
}

props.onComplete([...props.files, newDocument])
Expand Down
2 changes: 1 addition & 1 deletion packages/client/src/components/form/DocumentUploadField/SimpleDocumentUploader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import {
import styled from 'styled-components'
import { DocumentListPreview } from './DocumentListPreview'
import { buttonMessages, formMessages as messages } from '@client/i18n/messages'
import { getBase64String } from './DocumentUploaderWithOption'
import { getBase64String } from '@client/utils/imageUtils'

const DocumentUploader = styled(ImageUploader)`
color: ${({ theme }) => theme.colors.primary};
Expand Down
11 changes: 0 additions & 11 deletions packages/client/typings/browser-image-compression.d.ts
View file

This file was deleted.

45 changes: 17 additions & 28 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8063,6 +8063,13 @@
resolved "https://registry.npmjs.org/@types/boom/-/boom-7.3.5.tgz"
integrity sha512-jBS0kU2s9W2sx+ILEyO4kxqIYLllqcUXTaVrBctvGptZ+4X3TWkkgY9+AmxdMPKrgiDDdLcfsaQCTu7bniLvgw==

"@types/browser-image-compression@^1.0.13":
version "1.0.13"
resolved "https://registry.yarnpkg.com/@types/browser-image-compression/-/browser-image-compression-1.0.13.tgz#184c293a0d88f29b1d23ecd5af54670d9242f7bc"
integrity sha512-S97bT2hBW/RPwFrB/tg62alucHzMJKgVCDFCHpTQkK4hS7OW9k5vOG1mvGBkc36OZVh9nHEATtysmw9MSRH1vQ==
dependencies:
browser-image-compression "*"

"@types/bunyan@^1.8.4":
version "1.8.11"
resolved "https://registry.npmjs.org/@types/bunyan/-/bunyan-1.8.11.tgz"
Expand Down Expand Up @@ -10687,6 +10694,13 @@ browser-assert@^1.2.1:
resolved "https://registry.npmjs.org/browser-assert/-/browser-assert-1.2.1.tgz"
integrity sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ==

browser-image-compression@*:
version "2.0.2"
resolved "https://registry.yarnpkg.com/browser-image-compression/-/browser-image-compression-2.0.2.tgz#4d5ef8882e9e471d6d923715ceb9034499d14eaa"
integrity sha512-pBLlQyUf6yB8SmmngrcOw3EoS4RpQ1BcylI3T9Yqn7+4nrQTXJD4sJDe5ODnJdrvNMaio5OicFo75rDyJD2Ucw==
dependencies:
uzip "0.20201231.0"

browser-image-compression@^1.0.6:
version "1.0.17"
resolved "https://registry.npmjs.org/browser-image-compression/-/browser-image-compression-1.0.17.tgz"
Expand Down Expand Up @@ -22790,16 +22804,7 @@ string-similarity@^4.0.1:
resolved "https://registry.npmjs.org/string-similarity/-/string-similarity-4.0.4.tgz"
integrity sha512-/q/8Q4Bl4ZKAPjj8WerIBJWALKkaPRfrvhfF8k/B23i4nzrlRj2/go1m90In7nG/3XDSbOo0+pu6RvCTM9RGMQ==

"string-width-cjs@npm:string-width@^4.2.0":
version "4.2.3"
resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
dependencies:
emoji-regex "^8.0.0"
is-fullwidth-code-point "^3.0.0"
strip-ansi "^6.0.1"

"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
version "4.2.3"
resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
Expand Down Expand Up @@ -22959,7 +22964,7 @@ stringify-object@^3.3.0:
is-obj "^1.0.1"
is-regexp "^1.0.0"

"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
version "6.0.1"
resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
Expand All @@ -22980,13 +22985,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
dependencies:
ansi-regex "^4.1.0"

strip-ansi@^6.0.0, strip-ansi@^6.0.1:
version "6.0.1"
resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
dependencies:
ansi-regex "^5.0.1"

strip-ansi@^7.0.1, strip-ansi@^7.1.0:
version "7.1.0"
resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz"
Expand Down Expand Up @@ -25132,7 +25130,7 @@ workbox-window@7.1.0, workbox-window@^7.1.0:
"@types/trusted-types" "^2.0.2"
workbox-core "7.1.0"

"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
version "7.0.0"
resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
Expand All @@ -25159,15 +25157,6 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
string-width "^4.1.0"
strip-ansi "^6.0.0"

wrap-ansi@^7.0.0:
version "7.0.0"
resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
dependencies:
ansi-styles "^4.0.0"
string-width "^4.1.0"
strip-ansi "^6.0.0"

wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
version "8.1.0"
resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz"
Expand Down

0 comments on commit 0a479af

Please sign in to comment.