Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Eclipse Foundation
IT
Websites
membership.eclipse.org
Commits
776552be
Commit
776552be
authored
Jan 13, 2022
by
Zhou Fang
Committed by
Martin Lowe
Jan 13, 2022
Browse files
#347
#454
Centralized logo limitation values and fixed upload print logo issues
parent
e4a0db3f
Changes
3
Hide whitespace changes
Inline
Side-by-side
src/main/www/src/Constants/Constants.js
View file @
776552be
...
...
@@ -292,6 +292,10 @@ export const CONFIG_FOR_BAR_LINE_CHART = {
aspectRatio
:
1.8
,
};
export
const
LOGO_DIMENSIONS_LIMITATION
=
2000
;
// pixels
export
const
LOGO_SIZE_LIMITATION_WEB
=
1048576
;
// bytes = 1MB
export
const
LOGO_SIZE_LIMITATION_PRINT
=
10485760
;
// bytes = 10MB
// Constants for styles
export
const
drawerWidth
=
280
;
export
const
themeBlack
=
'
#0B0B0B
'
;
...
...
src/main/www/src/Utils/formFunctionHelpers.js
View file @
776552be
...
...
@@ -760,7 +760,7 @@ export const fetchWrapper = (url, method, callbackFunc, dataBody, errCallbackFun
.
catch
((
err
)
=>
{
console
.
log
(
err
);
if
(
errCallbackFunc
)
{
errCallbackFunc
();
errCallbackFunc
(
err
);
return
;
}
});
...
...
src/main/www/src/components/Portal/OrgProfile/OrgProfilesBasicInfo.tsx
View file @
776552be
...
...
@@ -12,6 +12,9 @@ import {
FETCH_METHOD
,
getCurrentMode
,
lightGray
,
LOGO_DIMENSIONS_LIMITATION
,
LOGO_SIZE_LIMITATION_PRINT
,
LOGO_SIZE_LIMITATION_WEB
,
MODE_REACT_ONLY
,
}
from
'
../../../Constants/Constants
'
;
import
{
fetchWrapper
,
isProd
}
from
'
../../../Utils/formFunctionHelpers
'
;
...
...
@@ -94,6 +97,8 @@ export default function OrgProfilesBasicInfo() {
const
[
uploadTarget
,
setUploadTarget
]
=
useState
<
'
Web
'
|
'
Print
'
>
(
'
Web
'
);
const
[
isFetchingOrg
,
setIsFetchingOrg
]
=
useState
(
true
);
const
[
dateForUpdatingPrintLogo
,
setDateForUpdatingPrintLogo
]
=
useState
(
''
);
const
[
isUploadingWeb
,
setIsUploadingWeb
]
=
useState
(
false
);
const
[
isUploadingPrint
,
setIsUploadingPrint
]
=
useState
(
false
);
const
openUploadDialog
=
(
target
:
'
Web
'
|
'
Print
'
)
=>
{
setUploadTarget
(
target
);
...
...
@@ -104,12 +109,16 @@ export default function OrgProfilesBasicInfo() {
!
isProd
&&
console
.
log
(
'
Logo Saved!
'
,
files
[
0
]);
let
fileContent
:
any
;
const
isForPrint
=
uploadTarget
===
'
Print
'
;
isForPrint
?
setIsUploadingPrint
(
true
)
:
setIsUploadingWeb
(
true
);
const
successCallback
=
()
=>
{
if
(
isForPrint
)
{
const
today
=
new
Date
().
toString
();
const
currentTime
=
`
${
today
.
slice
(
16
,
24
)}
,
${
today
.
slice
(
4
,
10
)}
`
;
setDateForUpdatingPrintLogo
(
currentTime
);
setIsUploadingPrint
(
false
);
}
else
{
setIsUploadingWeb
(
false
);
}
formikOrg
.
setFieldValue
(
`logos.logoFor
${
uploadTarget
}
`
,
fileContent
);
// Update Portal Context - orgInfo to make sure everything is synced among sections
...
...
@@ -117,41 +126,66 @@ export default function OrgProfilesBasicInfo() {
succeededToExecute
(
''
);
};
const
logoFile
=
new
FileReader
();
logoFile
.
addEventListener
(
'
load
'
,
(
data
)
=>
{
fileContent
=
data
.
target
?.
result
;
const
getLogoFileData
=
()
=>
{
const
data
=
new
FormData
();
const
logoFile
=
files
[
0
];
data
.
append
(
'
image
'
,
logoFile
);
data
.
append
(
'
image_mime
'
,
logoFile
.
type
);
data
.
append
(
'
image_format
'
,
isForPrint
?
'
PRINT
'
:
'
WEB
'
);
return
data
;
};
const
logoFileInstance
=
new
FileReader
();
logoFileInstance
.
addEventListener
(
'
load
'
,
(
fileData
)
=>
{
fileContent
=
fileData
.
target
?.
result
;
const
logoImg
=
new
Image
();
logoImg
.
src
=
fileContent
;
const
failedToUploadLogo
=
(
errCode
:
number
)
=>
{
let
errMsg
=
`The image need to be less than
${
LOGO_SIZE_LIMITATION_WEB
/
1024
/
1024
}
MB`
;
if
(
isForPrint
)
{
errMsg
=
`The image need to be less than
${
LOGO_SIZE_LIMITATION_PRINT
/
1024
/
1024
}
MB`
;
}
failedToExecute
(
errCode
===
413
?
errMsg
:
''
);
setIsFetchingOrg
(
false
);
setIsUploadingWeb
(
false
);
setIsUploadingPrint
(
false
);
};
if
(
isForPrint
)
{
setOpen
(
false
);
orgId
!==
0
&&
fetchWrapper
(
api_prefix
()
+
`/organizations/
${
orgId
}
/logos`
,
FETCH_METHOD
.
POST
,
successCallback
,
getLogoFileData
(),
failedToUploadLogo
);
return
;
}
logoImg
.
onload
=
()
=>
{
if
(
logoImg
.
height
>
200
)
{
failedToExecute
(
'
Image height must be
200
px or smaller
'
);
if
(
logoImg
.
height
>
LOGO_DIMENSIONS_LIMITATION
)
{
failedToExecute
(
`
Image height must be
${
LOGO_DIMENSIONS_LIMITATION
}
px or smaller
`
);
return
;
}
if
(
logoImg
.
width
>
200
)
{
failedToExecute
(
'
Image width must be
200
px or smaller
'
);
if
(
logoImg
.
width
>
LOGO_DIMENSIONS_LIMITATION
)
{
failedToExecute
(
`
Image width must be
${
LOGO_DIMENSIONS_LIMITATION
}
px or smaller
`
);
return
;
}
setOpen
(
false
);
if
(
!
isReactOnlyMode
)
{
const
failedToUploadLogo
=
()
=>
{
failedToExecute
(
''
);
setIsFetchingOrg
(
false
);
};
const
data
=
new
FormData
();
const
logoFile
=
files
[
0
];
data
.
append
(
'
image
'
,
logoFile
);
data
.
append
(
'
image_mime
'
,
logoFile
.
type
);
data
.
append
(
'
image_format
'
,
isForPrint
?
'
PRINT
'
:
'
WEB
'
);
orgId
!==
0
&&
fetchWrapper
(
api_prefix
()
+
`/organizations/
${
orgId
}
/logos`
,
FETCH_METHOD
.
POST
,
successCallback
,
d
ata
,
getLogoFileD
ata
()
,
failedToUploadLogo
);
}
else
{
...
...
@@ -159,7 +193,7 @@ export default function OrgProfilesBasicInfo() {
}
};
});
logoFile
.
readAsDataURL
(
files
[
0
]);
logoFile
Instance
.
readAsDataURL
(
files
[
0
]);
};
const
handleSaveOrgProfile
=
()
=>
{
...
...
@@ -330,15 +364,17 @@ export default function OrgProfilesBasicInfo() {
</
div
>
)
}
<
Button
className
=
{
classes
.
uploadBtn
}
onClick
=
{
()
=>
openUploadDialog
(
'
Web
'
)
}
>
Upload New
<
Button
className
=
{
classes
.
uploadBtn
}
onClick
=
{
()
=>
openUploadDialog
(
'
Web
'
)
}
disabled
=
{
isUploadingWeb
}
>
{
isUploadingWeb
?
<
CircularProgress
size
=
{
20
}
/>
:
'
Upload New
'
}
</
Button
>
<
Typography
className
=
{
classes
.
helperText
}
variant
=
"body2"
>
The supported formats for uploading your logo include: PNG, or JPG file under 1 MB in size.
The supported formats for uploading your logo include: PNG, or JPG file under
{
'
'
}
{
LOGO_SIZE_LIMITATION_WEB
/
1024
/
1024
}
MB in size.
{
/* The calculation is to convert bytes into megabytes */
}
</
Typography
>
<
Typography
className
=
{
classes
.
helperText
}
variant
=
"body2"
>
The logo dimension cannot exceed
200 by 200
pixels.
The logo dimension cannot exceed
{
LOGO_DIMENSIONS_LIMITATION
}
by
{
LOGO_DIMENSIONS_LIMITATION
}
pixels.
</
Typography
>
</
Grid
>
...
...
@@ -359,12 +395,14 @@ export default function OrgProfilesBasicInfo() {
)
}
</
div
>
<
Button
className
=
{
classes
.
uploadBtn
}
onClick
=
{
()
=>
openUploadDialog
(
'
Print
'
)
}
>
Upload New
<
Button
className
=
{
classes
.
uploadBtn
}
onClick
=
{
()
=>
openUploadDialog
(
'
Print
'
)
}
disabled
=
{
isUploadingPrint
}
>
{
isUploadingPrint
?
<
CircularProgress
size
=
{
20
}
/>
:
'
Upload New
'
}
</
Button
>
<
Typography
className
=
{
classes
.
helperText
}
variant
=
"body2"
>
If available please include the .eps file of your company logo.
If available please include the .eps file of your company logo and it should be under
{
'
'
}
{
LOGO_SIZE_LIMITATION_PRINT
/
1024
/
1024
}
MB in size.
{
/* The calculation is to convert bytes into megabytes */
}
</
Typography
>
</
Grid
>
</
Grid
>
...
...
@@ -373,7 +411,7 @@ export default function OrgProfilesBasicInfo() {
open
=
{
open
}
onSave
=
{
(
file
)
=>
postLogo
(
file
)
}
acceptedFiles
=
{
uploadTarget
===
'
Web
'
?
[
'
image/jpeg
'
,
'
image/png
'
]
:
[
'
.eps
'
]
}
maxFileSize
=
{
1048576
}
maxFileSize
=
{
uploadTarget
===
'
Web
'
?
LOGO_SIZE_LIMITATION_WEB
:
LOGO_SIZE_LIMITATION_PRINT
}
filesLimit
=
{
1
}
onClose
=
{
()
=>
setOpen
(
false
)
}
/>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment