Skip to content

Used shared Koenig file upload hook #26626

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

Merged
EvanHahn merged 5 commits into from
Mar 2, 2026
+17 −226
Merged

Used shared Koenig file upload hook #26626

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
bc73e6b
Used shared Koenig file upload hook
EvanHahn Feb 26, 2026
874130e
Fixed ghost-admin Nx deps for admin-x-framework build
EvanHahn Feb 28, 2026
068dfe4
Fixed validator ESM deep import resolution in admin-x design system
EvanHahn Feb 28, 2026
7d3c700
Try reverting something
EvanHahn Feb 28, 2026
9058e15
Revert "Try reverting something"
EvanHahn Mar 1, 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
2 changes: 1 addition & 1 deletion apps/admin-x-design-system/src/utils/format-url.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import isEmail from 'validator/es/lib/isEmail';
import isEmail from 'validator/es/lib/isEmail.js';
Copy link
Contributor Author

@EvanHahn EvanHahn Mar 1, 2026

Choose a reason for hiding this comment

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

I admit I'm not certain why this is required.

I think this is because validator/es/lib/isEmail isn't directly exported from the validator package, and we need to make sure it's resolving a file.

This change could be done separately, but it only started causing problems after this PR was made.

Let me know if you want me to understand this further.

Copy link
Contributor

@9larsons 9larsons Mar 2, 2026

Choose a reason for hiding this comment

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

Per Claude analysis, it's because Admin uses webpack v5 which uses fullySpecified: true so we need the extension.


export const formatUrl = (value: string, baseUrl?: string, nullable?: boolean) => {
if (nullable && !value) {
Expand Down
226 changes: 2 additions & 224 deletions ghost/admin/app/components/koenig-lexical-editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,13 @@
import * as Sentry from '@sentry/ember';
import Component from '@glimmer/component';
import React, {Suspense} from 'react';
import ghostPaths from 'ghost-admin/utils/ghost-paths';
import moment from 'moment-timezone';
import {action} from '@ember/object';
import {didCancel, task} from 'ember-concurrency';
import {inject} from 'ghost-admin/decorators/inject';
import {koenigFileUploadTypes, useKoenigFileUpload} from '@tryghost/admin-x-framework/hooks';
import {inject as service} from '@ember/service';

// TODO(NY-1097) This should be DRYed out with what's in the `useFileUpload` hook.
export const fileTypes = {
image: {
mimeTypes: ['image/gif', 'image/jpg', 'image/jpeg', 'image/png', 'image/svg+xml', 'image/webp'],
extensions: ['gif', 'jpg', 'jpeg', 'png', 'svg', 'svgz', 'webp'],
endpoint: '/images/upload/',
resourceName: 'images'
},
video: {
mimeTypes: ['video/mp4', 'video/webm', 'video/ogg'],
extensions: ['mp4', 'webm', 'ogv'],
endpoint: '/media/upload/',
resourceName: 'media'
},
audio: {
mimeTypes: ['audio/mp3', 'audio/mpeg', 'audio/ogg', 'audio/wav', 'audio/vnd.wav', 'audio/wave', 'audio/x-wav', 'audio/mp4', 'audio/x-m4a'],
extensions: ['mp3', 'wav', 'ogg', 'm4a'],
endpoint: '/media/upload/',
resourceName: 'media'
},
mediaThumbnail: {
mimeTypes: ['image/gif', 'image/jpg', 'image/jpeg', 'image/png', 'image/webp'],
extensions: ['gif', 'jpg', 'jpeg', 'png', 'webp'],
endpoint: '/media/thumbnail/upload/',
requestMethod: 'put',
resourceName: 'media'
},
file: {
endpoint: '/files/upload/',
resourceName: 'files'
}
};

function LockIcon({...props}) {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" {...props}>
Expand Down Expand Up @@ -469,202 +436,13 @@ export default class KoenigLexicalEditor extends Component {
};
const cardConfig = Object.assign({}, defaultCardConfig, props.cardConfig, {pinturaConfig: this.pinturaConfig, visibilitySettings: defaultCardConfig.visibilitySettings});

// TODO(NY-1097) This should be DRYed out with the other `useFileUpload` hook.
const useFileUpload = (type = 'image') => {
const [progress, setProgress] = React.useState(0);
const [isLoading, setLoading] = React.useState(false);
const [errors, setErrors] = React.useState([]);
const [filesNumber, setFilesNumber] = React.useState(0);

const progressTracker = React.useRef(new Map());

function updateProgress() {
if (progressTracker.current.size === 0) {
setProgress(0);
return;
}

let totalProgress = 0;

progressTracker.current.forEach(value => totalProgress += value);

setProgress(Math.round(totalProgress / progressTracker.current.size));
}

// we only check the file extension by default because IE doesn't always
// expose the mime-type, we'll rely on the API for final validation
function defaultValidator(file) {
// if type is file we don't need to validate since the card can accept any file type
if (type === 'file') {
return true;
}
const extensions = fileTypes[type].extensions;
const [, extension] = (/(?:\.([^.]+))?$/).exec(file.name) ?? [];

// if extensions is falsy exit early and accept all files
if (!extensions) {
return true;
}

if (!extension || extensions.indexOf(extension.toLowerCase()) === -1) {
let validExtensions = `.${extensions.join(', .').toUpperCase()}`;
return `The file type you uploaded is not supported. Please use ${validExtensions}`;
}

return true;
}

const validate = (files = []) => {
const validationResult = [];

for (let i = 0; i < files.length; i += 1) {
let file = files[i];
let result = defaultValidator(file);
if (result === true) {
continue;
}

validationResult.push({fileName: file.name, message: result});
}

return validationResult;
};

const _uploadFile = async (file, {formData = {}} = {}) => {
progressTracker.current.set(file, 0);

const fileFormData = new FormData();
fileFormData.append('file', file, file.name);

Object.keys(formData || {}).forEach((key) => {
fileFormData.append(key, formData[key]);
});

const url = `${ghostPaths().apiRoot}${fileTypes[type].endpoint}`;

try {
const requestMethod = fileTypes[type].requestMethod || 'post';
const response = await this.ajax[requestMethod](url, {
data: fileFormData,
processData: false,
contentType: false,
dataType: 'text',
xhr: () => {
const xhr = new window.XMLHttpRequest();

xhr.upload.addEventListener('progress', (event) => {
if (event.lengthComputable) {
progressTracker.current.set(file, (event.loaded / event.total) * 100);
updateProgress();
}
}, false);

return xhr;
}
});

// force tracker progress to 100% in case we didn't get a final event
progressTracker.current.set(file, 100);
updateProgress();

let uploadResponse;
let responseUrl;

try {
uploadResponse = JSON.parse(response);
} catch (error) {
if (!(error instanceof SyntaxError)) {
throw error;
}
}

if (uploadResponse) {
const resource = uploadResponse[fileTypes[type].resourceName];
if (resource && Array.isArray(resource) && resource[0]) {
responseUrl = resource[0].url;
}
}

return {
url: responseUrl,
fileName: file.name
};
} catch (error) {
console.error(error); // eslint-disable-line

// grab custom error message if present
let message = error.payload?.errors?.[0]?.message || '';
let context = error.payload?.errors?.[0]?.context || '';

// fall back to EmberData/ember-ajax default message for error type
if (!message) {
message = error.message;
}

// TODO: check for or expose known error types?
const errorResult = {
message,
context,
fileName: file.name
};

throw errorResult;
}
};

const upload = async (files = [], options = {}) => {
setFilesNumber(files.length);
setLoading(true);

const validationResult = validate(files);

if (validationResult.length) {
setErrors(validationResult);
setLoading(false);
setProgress(100);

return null;
}

const uploadPromises = [];

for (let i = 0; i < files.length; i += 1) {
const file = files[i];
uploadPromises.push(_uploadFile(file, options));
}

try {
const uploadResult = await Promise.all(uploadPromises);
setProgress(100);
progressTracker.current.clear();

setLoading(false);

setErrors([]); // components expect array of objects: { fileName: string, message: string }[]

return uploadResult;
} catch (error) {
console.error(error); // eslint-disable-line no-console

setErrors([...errors, error]);
setLoading(false);
setProgress(100);
progressTracker.current.clear();

return null;
}
};

return {progress, isLoading, upload, errors, filesNumber};
};

const KGEditorComponent = ({isInitInstance}) => {
return (
<div data-secondary-instance={isInitInstance ? true : false} style={isInitInstance ? {display: 'none'} : {}}>
<KoenigComposer
editorResource={this.editorResource}
cardConfig={cardConfig}
fileUploader={{useFileUpload, fileTypes}}
fileUploader={{useFileUpload: useKoenigFileUpload, fileTypes: koenigFileUploadTypes}}
initialEditorState={this.args.lexical}
onError={this.onError}
darkMode={this.feature.nightShift}
Expand Down
15 changes: 14 additions & 1 deletion ghost/admin/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
"@sentry/ember": "7.120.3",
"@sentry/integrations": "7.114.0",
"@sentry/replay": "7.116.0",
"@tryghost/admin-x-framework": "0.0.0",
"@tryghost/color-utils": "0.2.10",
"@tryghost/ember-promise-modals": "2.0.1",
"@tryghost/helpers": "1.1.97",
Expand Down Expand Up @@ -186,6 +187,7 @@
"build:dev",
{
"projects": [
"@tryghost/admin-x-framework",
"@tryghost/admin-x-settings",
"@tryghost/activitypub",
"@tryghost/posts",
Expand All @@ -204,6 +206,7 @@
"build",
{
"projects": [
"@tryghost/admin-x-framework",
"@tryghost/admin-x-settings",
"@tryghost/activitypub",
"@tryghost/posts",
Expand All @@ -212,7 +215,17 @@
"target": "build"
}
]
},
"test": {
"dependsOn": [
{
"projects": [
"@tryghost/admin-x-framework"
],
"target": "build"
}
]
}
}
}
}
}
Loading