Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(upload): Fix total documents size limit calculation #7843

Open
wants to merge 2 commits into
base: release-v1.6.0
Choose a base branch
from
+13 −7
Open

fix(upload): Fix total documents size limit calculation #7843

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5f97e61
fix(upload): Fix total documents size limit calculation
nifaliana Oct 25, 2024
37eaf5a
refactor(core): Get rid of redundant compression and some refac
nifaliana Nov 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 13 additions & 7 deletions packages/client/src/components/form/DocumentUploadField/DocumentUploaderWithOption.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ type DocumentFields = {
documentData: string
}

export const getBase64String = (file: File) => {
export const getBase64String = (file: File | Blob) => {
return new Promise<string | ArrayBuffer>((resolve, reject) => {
const reader = new FileReader()
reader.readAsDataURL(file)
Expand Down Expand Up @@ -137,7 +137,7 @@ export const DocumentUploaderWithOption = (props: IFullProps) => {
return isValid
}

const processImage = async (uploadedImage: File) => {
const processImage = async (uploadedImage: File) => {
const options = { ...defaultOptions }
if (!ALLOWED_IMAGE_TYPE.includes(uploadedImage.type)) {
setErrorMessage(intl.formatMessage(messages.uploadError, { maxSize }))
Expand All @@ -153,14 +153,17 @@ export const DocumentUploaderWithOption = (props: IFullProps) => {
options.maxSizeMB = props.compressImagesToSizeMB
}
// disable compression with a falsy value
const resized =
const resized: Blob =
Boolean(options.maxSizeMB) &&
bytesToMB(uploadedImage.size) > options.maxSizeMB &&
(await imageCompression(uploadedImage, options))

const fileAsBase64 = await getBase64String(resized || uploadedImage)

return fileAsBase64.toString()
return {
fileAsBase64: fileAsBase64.toString(),
resized
}
Comment on lines +163 to +166
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's keep this so it either returns the blob or the base64'd file. Blob is better if it works as there's not as much overhead.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rikukissa ,
Since the function is only used in one place for now and both formats are needed here:

 const newDocument: IFileValue = {
      optionValues,
      type: resizedImage.type || uploadedImage.type,
      data: fileAsBase64.toString(),
      fileSize: resizedImage.size || uploadedImage.size
    }

I think we can keep both OR I suggest adding an optional withCompressed parameter to the processImage function.
This way, we can return:
return withCompressed ? { fileAsBase64: fileAsBase64.toString(), resized } : fileAsBase64.toString();
What do you think?

}

const handleFileChange = async (uploadedImage: File) => {
Expand All @@ -172,6 +175,7 @@ export const DocumentUploaderWithOption = (props: IFullProps) => {
const documentType = fields.documentType || dropdownOptions[0].value

let fileAsBase64: string
let resizedImage: Blob
const optionValues: [IFormFieldValue, string] = [
props.extraValue,
documentType
Expand All @@ -194,10 +198,12 @@ export const DocumentUploaderWithOption = (props: IFullProps) => {

try {
// Start processing
;[fileAsBase64] = await Promise.all([
const [{fileAsBase64: base64, resized}] = await Promise.all([
processImage(uploadedImage),
minimumProcessingTime
])
fileAsBase64 = base64
resizedImage = resized
} catch (error) {
if (props.onUploadingStateChanged) {
props.onUploadingStateChanged(false)
Expand All @@ -223,9 +229,9 @@ export const DocumentUploaderWithOption = (props: IFullProps) => {

const newDocument: IFileValue = {
optionValues,
type: uploadedImage.type,
type: resizedImage.type || uploadedImage.type,
data: fileAsBase64.toString(),
fileSize: uploadedImage.size
fileSize: resizedImage.size || uploadedImage.size
}

props.onComplete([...props.files, newDocument])
Expand Down