Skip to content

[WEB-2393] chore-Uploading svg's are no more supported in the platform #5646

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

Closed
Jimmycutie wants to merge 5 commits into from
Closed

[WEB-2393] chore-Uploading svg's are no more supported in the platform #5646

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cc2640a
Updated supported image formats
Jimmycutie Sep 11, 2024
a52c0a3
Updated image accepting functions
Jimmycutie Sep 11, 2024
a496947
Removed webp format support
Jimmycutie Sep 18, 2024
244fb8a
Updated allowed image formats
Jimmycutie Sep 18, 2024
8ae1063
Merge branch 'preview' into chore-removal_of_svg_from_supported_formats
Jimmycutie Sep 18, 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
6 changes: 4 additions & 2 deletions web/core/components/core/image-picker-popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,8 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
onDrop,
accept: {
"image/*": [".png", ".jpg", ".jpeg", ".webp"],
"image/jpeg": [],
"image/png": [],
},
maxSize: config?.file_size_limit ?? MAX_FILE_SIZE,
});
Expand Down Expand Up @@ -356,7 +357,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
</p>
)}

<p className="text-sm text-custom-text-200">File formats supported- .jpeg, .jpg, .png, .webp</p>
<p className="text-sm text-custom-text-200">File formats supported- .jpeg, .jpg, .png</p>

<div className="flex h-12 items-start justify-end gap-2">
<Button
Expand Down Expand Up @@ -388,3 +389,4 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
</Popover>
);
});

6 changes: 3 additions & 3 deletions web/core/components/core/modals/user-image-upload-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,8 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
onDrop,
accept: {
"image/*": [".png", ".jpg", ".jpeg", ".webp"],
"image/jpeg": [],
"image/png": [],
},
maxSize: config?.file_size_limit ?? MAX_FILE_SIZE,
multiple: false,
Expand Down Expand Up @@ -143,7 +144,6 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
</span>
</div>
)}

<input {...getInputProps()} />
</div>
</div>
Expand All @@ -156,7 +156,7 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
)}
</div>
</div>
<p className="my-4 text-sm text-custom-text-200">File formats supported- .jpeg, .jpg, .png, .webp</p>
<p className="my-4 text-sm text-custom-text-200">File formats supported- .jpeg, .jpg, .png</p>
<div className="flex items-center justify-between">
{handleDelete && (
<Button variant="danger" size="sm" onClick={handleDelete} disabled={!value}>
Expand Down
5 changes: 3 additions & 2 deletions web/core/components/core/modals/workspace-image-upload-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,8 @@ export const WorkspaceImageUploadModal: React.FC<Props> = observer((props) => {
const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
onDrop,
accept: {
"image/*": [".png", ".jpg", ".jpeg", ".webp"],
"image/jpeg": [],
"image/png": [],
Comment on lines +46 to +47
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 18, 2024

Choose a reason for hiding this comment

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

Tip

Codebase Verification

Inconsistency found in WEBP support across components

The change to restrict image uploads to JPEG and PNG formats in workspace-image-upload-modal.tsx is inconsistent with the file validation logic in other parts of the codebase. Specifically:

  • In packages/editor/src/core/plugins/image/utils/validate-file.ts, WEBP is still listed as an allowed file type.

To ensure consistency and prevent potential bugs:

  • Update validate-file.ts to remove WEBP from the list of allowed types.
  • Review other components that handle image uploads or processing to ensure they align with the new JPEG and PNG only restriction.
  • Consider updating user-facing documentation to reflect the change in supported image formats.
Analysis chain

Verify the impact of restricting image upload formats.

The change to limit the accept property to only "image/jpeg" and "image/png" aligns with the PR objective. However, please consider the following:

  • Ensure that removing support for other image formats like SVG and WEBP does not break any existing functionality in the codebase.
  • Consider updating the user-facing documentation or in-app messaging to clearly communicate the new file format restrictions to users.

Run the following script to verify references to other image formats in the codebase:

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify references to image formats other than JPEG and PNG.

# Test: Search for references to SVG. Expect: No results.
rg --type typescript $'image/svg'

# Test: Search for references to WEBP. Expect: No results.
rg --type typescript $'image/webp'

Length of output: 136

Script:

#!/bin/bash
# Description: Verify references to image formats other than JPEG and PNG in TypeScript files.

# Search for references to SVG and WEBP in .ts and .tsx files
rg -i -C 2 -g '*.{ts,tsx}' 'image/(svg|webp)'

Length of output: 1334

},
maxSize: config?.file_size_limit ?? MAX_FILE_SIZE,
multiple: false,
Expand Down Expand Up @@ -162,7 +163,7 @@ export const WorkspaceImageUploadModal: React.FC<Props> = observer((props) => {
)}
</div>
</div>
<p className="my-4 text-sm text-custom-text-200">File formats supported- .jpeg, .jpg, .png, .webp</p>
<p className="my-4 text-sm text-custom-text-200">File formats supported- .jpeg, .jpg, .png</p>
<div className="flex items-center justify-between">
{handleRemove && (
<Button variant="danger" size="sm" onClick={handleRemove} disabled={!value}>
Expand Down