Skip to content

fix(media): wire cloudflareUploadComplete across all upload surfaces [NES-1689] #9239

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

Draft
edmonday wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

fix(media): wire cloudflareUploadComplete across all upload surfaces [NES-1689] #9239

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c70d959
fix(media): filter getMyCloudflareImages to uploaded:true and mark up…
edmonday May 21, 2026
fa5ef40
fix(media): extract cloudflareUploadComplete hook and wire all upload…
edmonday May 21, 2026
c3403bb
fix: lint issues
autofix-ci[bot] May 21, 2026
993fac2
revert: pull getMyCloudflareImages filter out of this PR [NES-1689]
edmonday May 21, 2026
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
16 changes: 16 additions & 0 deletions apps/journeys-admin/__generated__/CloudflareUploadComplete.ts
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

15 changes: 15 additions & 0 deletions apps/journeys-admin/__generated__/NewCloudflareImage.ts
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

276 changes: 270 additions & 6 deletions ...itor/Slider/Settings/Drawer/ImageBlockEditor/CustomImage/ImageUpload/ImageUpload.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,30 @@ import fetch, { Response } from 'node-fetch'

import { BlockFields_ImageBlock as ImageBlock } from '../../../../../../../../../__generated__/BlockFields'
import { CREATE_CLOUDFLARE_UPLOAD_BY_FILE } from '../../../../../../../../libs/useCloudflareUploadByFileMutation/useCloudflareUploadByFileMutation'
import { CLOUDFLARE_UPLOAD_COMPLETE } from '../../../../../../../../libs/useCloudflareUploadCompleteMutation/useCloudflareUploadCompleteMutation'

import { ImageUpload } from './ImageUpload'

const cloudflareUploadCompleteMockResult = jest.fn(() => ({
data: { cloudflareUploadComplete: true }
}))

const cloudflareUploadCompleteMock = {
request: {
query: CLOUDFLARE_UPLOAD_COMPLETE,
variables: { id: 'uploadId' }
},
result: cloudflareUploadCompleteMockResult
}

const cloudflareUploadCompleteErrorMock = {
request: {
query: CLOUDFLARE_UPLOAD_COMPLETE,
variables: { id: 'uploadId' }
},
error: new Error('cloudflareUploadComplete failed')
}

jest.mock('node-fetch', () => {
const originalModule = jest.requireActual('node-fetch')
return {
Expand Down Expand Up @@ -40,6 +61,7 @@ describe('ImageUpload', () => {
afterEach(() => {
process.env = originalEnv
mockSendGTMEvent.mockClear()
cloudflareUploadCompleteMockResult.mockClear()
})

const imageBlock: ImageBlock = {
Expand Down Expand Up @@ -139,7 +161,8 @@ describe('ImageUpload', () => {
}
}
}
}
},
cloudflareUploadCompleteMock
]}
>
<ImageUpload
Expand All @@ -166,9 +189,190 @@ describe('ImageUpload', () => {
focalTop: 50
})
)
expect(cloudflareUploadCompleteMockResult).toHaveBeenCalled()
expect(screen.getByText('Upload Successful!')).toBeInTheDocument()
})

it('should not call cloudflareUploadComplete on rejected file', async () => {
render(
<MockedProvider mocks={[cloudflareUploadCompleteMock]}>
<ImageUpload
onChange={jest.fn()}
loading={false}
selectedBlock={imageBlock}
/>
</MockedProvider>
)
const inputEl = screen.getByTestId('drop zone')
const largeFile = new File([new ArrayBuffer(11000000)], 'large.png', {
type: 'image/png'
})
Object.defineProperty(inputEl, 'files', { value: [largeFile] })
fireEvent.drop(inputEl)

await waitFor(() =>
expect(screen.getByText('Upload Failed!')).toBeInTheDocument()
)
expect(cloudflareUploadCompleteMockResult).not.toHaveBeenCalled()
})

it('should not call cloudflareUploadComplete on Cloudflare error response', async () => {
const cfErrorResponse = {
result: { id: 'uploadId' },
errors: [{ code: 5000, message: 'Upload failed' }],
messages: [],
success: false
}
mockFetch.mockResolvedValueOnce({
ok: true,
json: async () => await Promise.resolve(cfErrorResponse)
} as unknown as Response)

render(
<MockedProvider
mocks={[
{
request: { query: CREATE_CLOUDFLARE_UPLOAD_BY_FILE },
result: {
data: {
createCloudflareUploadByFile: {
id: 'uploadId',
uploadUrl: 'https://upload.imagedelivery.net/uploadId',
userId: 'userId',
__typename: 'CloudflareImage'
}
}
}
},
cloudflareUploadCompleteMock
]}
>
<ImageUpload
onChange={jest.fn()}
loading={false}
selectedBlock={imageBlock}
/>
</MockedProvider>
)
const inputEl = screen.getByTestId('drop zone')
Object.defineProperty(inputEl, 'files', {
value: [
new File([new Blob(['file'])], 'testFile.png', { type: 'image/png' })
]
})
fireEvent.drop(inputEl)

await waitFor(() =>
expect(screen.getByText('Upload Failed!')).toBeInTheDocument()
)
expect(cloudflareUploadCompleteMockResult).not.toHaveBeenCalled()
})

it('should not call cloudflareUploadComplete on fetch exception', async () => {
mockFetch.mockRejectedValueOnce(new Error('network'))

render(
<MockedProvider
mocks={[
{
request: { query: CREATE_CLOUDFLARE_UPLOAD_BY_FILE },
result: {
data: {
createCloudflareUploadByFile: {
id: 'uploadId',
uploadUrl: 'https://upload.imagedelivery.net/uploadId',
userId: 'userId',
__typename: 'CloudflareImage'
}
}
}
},
cloudflareUploadCompleteMock
]}
>
<ImageUpload
onChange={jest.fn()}
loading={false}
selectedBlock={imageBlock}
/>
</MockedProvider>
)
const inputEl = screen.getByTestId('drop zone')
Object.defineProperty(inputEl, 'files', {
value: [
new File([new Blob(['file'])], 'testFile.png', { type: 'image/png' })
]
})
fireEvent.drop(inputEl)

await waitFor(() =>
expect(mockSendGTMEvent).toHaveBeenCalledWith({
event: 'image_upload_failure',
fileSize: expect.any(Number),
fileType: 'image/png',
errorCode: 'upload-exception'
})
)
expect(cloudflareUploadCompleteMockResult).not.toHaveBeenCalled()
})

it('should not call cloudflareUploadComplete on invalid response (missing cloudflareId)', async () => {
mockFetch.mockResolvedValueOnce({
ok: true,
json: async () =>
await Promise.resolve({
result: null,
errors: [],
messages: [],
success: true
})
} as unknown as Response)

render(
<MockedProvider
mocks={[
{
request: { query: CREATE_CLOUDFLARE_UPLOAD_BY_FILE },
result: {
data: {
createCloudflareUploadByFile: {
id: 'uploadId',
uploadUrl: 'https://upload.imagedelivery.net/uploadId',
userId: 'userId',
__typename: 'CloudflareImage'
}
}
}
},
cloudflareUploadCompleteMock
]}
>
<ImageUpload
onChange={jest.fn()}
loading={false}
selectedBlock={imageBlock}
/>
</MockedProvider>
)
const inputEl = screen.getByTestId('drop zone')
Object.defineProperty(inputEl, 'files', {
value: [
new File([new Blob(['file'])], 'testFile.png', { type: 'image/png' })
]
})
fireEvent.drop(inputEl)

await waitFor(() =>
expect(mockSendGTMEvent).toHaveBeenCalledWith({
event: 'image_upload_failure',
fileSize: expect.any(Number),
fileType: 'image/png',
errorCode: 'upload-invalid-response'
})
)
expect(cloudflareUploadCompleteMockResult).not.toHaveBeenCalled()
})

it('should render drop zone text in default state', () => {
render(
<MockedProvider>
Expand Down Expand Up @@ -226,7 +430,8 @@ describe('ImageUpload', () => {
}
}
}
}
},
cloudflareUploadCompleteMock
]}
>
<ImageUpload
Expand Down Expand Up @@ -368,7 +573,8 @@ describe('ImageUpload', () => {
}
}
}
}
},
cloudflareUploadCompleteMock
]}
>
<ImageUpload
Expand Down Expand Up @@ -477,7 +683,8 @@ describe('ImageUpload', () => {
}
}
}
}
},
cloudflareUploadCompleteMock
]}
>
<ImageUpload
Expand Down Expand Up @@ -539,7 +746,8 @@ describe('ImageUpload', () => {
}
}
}
}
},
cloudflareUploadCompleteMock
]}
>
<ImageUpload
Expand Down Expand Up @@ -623,7 +831,8 @@ describe('ImageUpload', () => {
}
}
}
}
},
cloudflareUploadCompleteMock
]}
>
<ImageUpload
Expand Down Expand Up @@ -777,4 +986,59 @@ describe('ImageUpload', () => {
})
)
})

it('should report upload-mark-complete-failed and skip onChange when cloudflareUploadComplete throws', async () => {
mockFetch.mockResolvedValueOnce({
ok: true,
json: async () => await Promise.resolve(cfResponse)
} as unknown as Response)

const onChange = jest.fn()
const setUploading = jest.fn()
render(
<MockedProvider
mocks={[
{
request: { query: CREATE_CLOUDFLARE_UPLOAD_BY_FILE },
result: {
data: {
createCloudflareUploadByFile: {
id: 'uploadId',
uploadUrl: 'https://upload.imagedelivery.net/uploadId',
userId: 'userId',
__typename: 'CloudflareImage'
}
}
}
},
cloudflareUploadCompleteErrorMock
]}
>
<ImageUpload
onChange={onChange}
setUploading={setUploading}
loading={false}
selectedBlock={imageBlock}
/>
</MockedProvider>
)
const inputEl = screen.getByTestId('drop zone')
Object.defineProperty(inputEl, 'files', {
value: [
new File([new Blob(['file'])], 'testFile.png', { type: 'image/png' })
]
})
fireEvent.drop(inputEl)

await waitFor(() =>
expect(mockSendGTMEvent).toHaveBeenCalledWith({
event: 'image_upload_failure',
fileSize: expect.any(Number),
fileType: 'image/png',
errorCode: 'upload-mark-complete-failed'
})
)
expect(onChange).not.toHaveBeenCalled()
expect(setUploading).toHaveBeenCalledWith(false)
})
})
Loading
Loading