Image compression (#689)

* added image compression

* removed TODO
This commit is contained in:
TrueMilli 2022-07-25 21:51:51 +02:00 committed by GitHub
parent d8f96876a0
commit e4f8c14fab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 1 deletions

View File

@ -1,8 +1,8 @@
import { ref, uploadBytesResumable, getDownloadURL } from 'firebase/storage' import { ref, uploadBytesResumable, getDownloadURL } from 'firebase/storage'
import imageCompression from 'browser-image-compression'
import { nanoid } from 'nanoid' import { nanoid } from 'nanoid'
import { storage } from './init' import { storage } from './init'
// TODO: compress large images
export const uploadImage = async ( export const uploadImage = async (
username: string, username: string,
file: File, file: File,
@ -12,6 +12,18 @@ export const uploadImage = async (
const [, ext] = file.name.split('.') const [, ext] = file.name.split('.')
const filename = `${nanoid(10)}.${ext}` const filename = `${nanoid(10)}.${ext}`
const storageRef = ref(storage, `user-images/${username}/${filename}`) const storageRef = ref(storage, `user-images/${username}/${filename}`)
if (file.size > 20 * 1024 ** 2) {
return Promise.reject('File is over 20 MB.')
}
if (file.size > 1024 ** 2) {
file = await imageCompression(file, {
maxSizeMB: 1,
maxWidthOrHeight: 1920,
})
}
const uploadTask = uploadBytesResumable(storageRef, file) const uploadTask = uploadBytesResumable(storageRef, file)
let resolvePromise: (url: string) => void let resolvePromise: (url: string) => void

View File

@ -34,6 +34,7 @@
"@tiptap/react": "2.0.0-beta.114", "@tiptap/react": "2.0.0-beta.114",
"@tiptap/starter-kit": "2.0.0-beta.190", "@tiptap/starter-kit": "2.0.0-beta.190",
"algoliasearch": "4.13.0", "algoliasearch": "4.13.0",
"browser-image-compression": "2.0.0",
"clsx": "1.1.1", "clsx": "1.1.1",
"cors": "2.8.5", "cors": "2.8.5",
"daisyui": "1.16.4", "daisyui": "1.16.4",

View File

@ -4270,6 +4270,13 @@ broadcast-channel@^3.4.1:
rimraf "3.0.2" rimraf "3.0.2"
unload "2.2.0" unload "2.2.0"
browser-image-compression@2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/browser-image-compression/-/browser-image-compression-2.0.0.tgz#f421381a76d474d4da7dcd82810daf595b09bef6"
integrity sha512-kBlkZo13yOOfcmrPW0M0K/UdZPogIQj2gRvXIM3FktAnfW6VRq9aY2RI+F6O0x6DMj1Xm+WLGgWcFK8Fu/ddnw==
dependencies:
uzip "0.20201231.0"
browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.16.6, browserslist@^4.18.1, browserslist@^4.20.2, browserslist@^4.20.3: browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.16.6, browserslist@^4.18.1, browserslist@^4.20.2, browserslist@^4.20.3:
version "4.20.3" version "4.20.3"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.3.tgz#eb7572f49ec430e054f56d52ff0ebe9be915f8bf" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.3.tgz#eb7572f49ec430e054f56d52ff0ebe9be915f8bf"
@ -11630,6 +11637,11 @@ uuid@^8.0.0, uuid@^8.3.2:
resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2" resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg== integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
uzip@0.20201231.0:
version "0.20201231.0"
resolved "https://registry.yarnpkg.com/uzip/-/uzip-0.20201231.0.tgz#9e64b065b9a8ebf26eb7583fe8e77e1d9a15ed14"
integrity sha512-OZeJfZP+R0z9D6TmBgLq2LHzSSptGMGDGigGiEe0pr8UBe/7fdflgHlHBNDASTXB5jnFuxHpNaJywSg8YFeGng==
v8-compile-cache-lib@^3.0.1: v8-compile-cache-lib@^3.0.1:
version "3.0.1" version "3.0.1"
resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf" resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"