Skip to content

Commit 0506011

Browse files
author
Ian Seabock (Centific Technologies Inc)
committed
Fix: History save and resize image before submission
1 parent a5ff94d commit 0506011

File tree

5 files changed

+54
-46
lines changed

5 files changed

+54
-46
lines changed

‎frontend/src/components/QuestionInput/QuestionInput.tsx

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Send from '../../assets/Send.svg'
77
import styles from './QuestionInput.module.css'
88
import { ChatMessage } from '../../api'
99
import { AppStateContext } from '../../state/AppProvider'
10+
import { resizeImage } from '../../utils/resizeImage'
1011

1112
interface Props {
1213
onSend: (question: ChatMessage['content'], id?: string) => void
@@ -32,17 +33,12 @@ export const QuestionInput = ({ onSend, disabled, placeholder, clearOnSend, conv
3233
};
3334

3435
const convertToBase64 = async (file: Blob) => {
35-
const reader = new FileReader();
36-
37-
reader.readAsDataURL(file);
38-
39-
reader.onloadend = () => {
40-
setBase64Image(reader.result as string);
41-
};
42-
43-
reader.onerror = (error) => {
44-
console.error('Error: ', error);
45-
};
36+
try {
37+
const resizedBase64 = await resizeImage(file, 800, 800);
38+
setBase64Image(resizedBase64);
39+
} catch (error) {
40+
console.error('Error:', error);
41+
}
4642
};
4743

4844
const sendQuestion = () => {

‎frontend/src/utils/resizeImage.ts

Lines changed: 42 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,49 @@
1-
export const resizeImage = (file: Blob, maxWidth: number, maxHeight: number) => {
2-
const img = new Image()
3-
const reader = new FileReader()
4-
5-
reader.readAsDataURL(file)
6-
reader.onloadend = () => {
7-
img.src = reader.result as string
8-
img.onload = () => {
9-
const canvas = document.createElement('canvas')
10-
const ctx = canvas.getContext('2d')
11-
12-
let { width, height } = img
13-
14-
if (width > maxWidth || height > maxHeight) {
15-
if (width > height) {
16-
height *= maxWidth / width
17-
width = maxWidth
18-
} else {
19-
width *= maxHeight / height
20-
height = maxHeight
1+
//
2+
3+
export const resizeImage = (file: Blob, maxWidth: number, maxHeight: number): Promise<string> => {
4+
return new Promise((resolve, reject) => {
5+
const img = new Image()
6+
const reader = new FileReader()
7+
8+
reader.readAsDataURL(file)
9+
reader.onloadend = () => {
10+
img.src = reader.result as string
11+
img.onload = () => {
12+
const canvas = document.createElement('canvas')
13+
const ctx = canvas.getContext('2d')
14+
15+
let { width, height } = img
16+
17+
// Calculate the new dimensions
18+
if (width > maxWidth || height > maxHeight) {
19+
if (width > height) {
20+
height = (maxWidth / width) * height
21+
width = maxWidth
22+
} else {
23+
width = (maxHeight / height) * width
24+
height = maxHeight
25+
}
2126
}
27+
28+
canvas.width = width
29+
canvas.height = height
30+
31+
if (ctx) {
32+
ctx.drawImage(img, 0, 0, width, height)
33+
}
34+
35+
// Convert the canvas to a base64 string
36+
const resizedBase64 = canvas.toDataURL('image/jpeg', 0.8)
37+
resolve(resizedBase64)
2238
}
2339

24-
canvas.width = width
25-
canvas.height = height
26-
if (ctx) {
27-
ctx.drawImage(img, 0, 0, width, height)
40+
img.onerror = error => {
41+
reject('Error loading image: ' + error)
2842
}
43+
}
2944

30-
const resizedBase64 = canvas.toDataURL('image/jpeg', 0.8)
31-
return resizedBase64
45+
reader.onerror = error => {
46+
reject('Error reading file: ' + error)
3247
}
33-
}
34-
reader.onerror = error => {
35-
console.error('Error: ', error)
36-
}
48+
})
3749
}

‎static/assets/index-133ad4a5.js renamed to ‎static/assets/index-c5246876.js

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎static/assets/index-133ad4a5.js.map renamed to ‎static/assets/index-c5246876.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎static/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<link rel="icon" type="image/x-icon" href="{{ favicon }}" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>{{ title }}</title>
8-
<script type="module" crossorigin src="/assets/index-133ad4a5.js"></script>
8+
<script type="module" crossorigin src="/assets/index-c5246876.js"></script>
99
<link rel="stylesheet" href="/assets/index-65ec62ea.css">
1010
</head>
1111
<body>

0 commit comments

Comments
 (0)