From 8a9a747874db6e02e71b3362118969119cf0adda Mon Sep 17 00:00:00 2001 From: yaroslav8765 Date: Fri, 12 Dec 2025 11:13:13 +0200 Subject: [PATCH 1/3] docs: add instructions for uploading avatar --- .../tutorial/03-Customization/01-branding.md | 24 ++- .../docs/tutorial/07-Plugins/04-RichEditor.md | 2 +- .../docs/tutorial/07-Plugins/05-upload.md | 153 +++++++++++++++++- .../docs/tutorial/07-Plugins/14-markdown.md | 2 +- 4 files changed, 177 insertions(+), 4 deletions(-) diff --git a/adminforth/documentation/docs/tutorial/03-Customization/01-branding.md b/adminforth/documentation/docs/tutorial/03-Customization/01-branding.md index a1a3f3c0e..f6d0f6e83 100644 --- a/adminforth/documentation/docs/tutorial/03-Customization/01-branding.md +++ b/adminforth/documentation/docs/tutorial/03-Customization/01-branding.md @@ -252,4 +252,26 @@ customization: { ] } -``` \ No newline at end of file +``` + +## Avatars + +If you want your user to have custom avatar you can use avatarUrl: + +```ts title='./index.ts' + +auth: { + + ... + + avatarUrl: async (adminUser)=> { + return `https://${process.env.STORAGE_PROVIDER_PATH}/${adminUser.dbUser.avatar_path}` + }, + + ... + +} + +``` + +This syntax can be use to get unique avatar for each user of hardcode avatar, but it makes more sense to use it with upload adapter diff --git a/adminforth/documentation/docs/tutorial/07-Plugins/04-RichEditor.md b/adminforth/documentation/docs/tutorial/07-Plugins/04-RichEditor.md index f7cd79d45..49dad5151 100644 --- a/adminforth/documentation/docs/tutorial/07-Plugins/04-RichEditor.md +++ b/adminforth/documentation/docs/tutorial/07-Plugins/04-RichEditor.md @@ -221,7 +221,7 @@ export default { "exe", "webp", ], - maxFileSize: 1024 * 1024 * 20, // 5MB + maxFileSize: 1024 * 1024 * 20, // 20MB filePath: ({ originalFilename, originalExtension, contentType }) => diff --git a/adminforth/documentation/docs/tutorial/07-Plugins/05-upload.md b/adminforth/documentation/docs/tutorial/07-Plugins/05-upload.md index 51060e419..d453c98e6 100644 --- a/adminforth/documentation/docs/tutorial/07-Plugins/05-upload.md +++ b/adminforth/documentation/docs/tutorial/07-Plugins/05-upload.md @@ -508,4 +508,155 @@ You can set the maximum width for the preview image in the `./resources/apartmen ... }); -``` \ No newline at end of file +``` + +## Using plugin for uploading avatar + +Let's say, that you want to use upload plugin for uploading avatar for each user. +To do this add avatar column to the user resource: + + +```ts title="./schema.prisma" + model adminuser { + id String @id + email String @unique + password_hash String + role String + created_at DateTime + //diff-add + avatar ?String + } +``` + +Then make migration: + +```bash + npm run makemigration -- --name add-user-avatar-field ; npm run migrate:local +``` + +Add this column to the users resource: + +```ts title="./resources/adminuser.ts" + +... + +columns: [ + + ... + + //diff-add + { + //diff-add + name: "avatar", + //diff-add + type: AdminForthDataTypes.STRING, + //diff-add + showIn: ["show", "edit", "create" ], + //diff-add + }, + + ... + +] + +... + +plugins: [ + + ... + + //diff-add + new UploadPlugin({ + //diff-add + pathColumnName: "avatar", + //diff-add + storageAdapter: new AdminForthAdapterS3Storage({ + //diff-add + bucket: process.env.AWS_BUCKET_NAME, + //diff-add + region: process.env.AWS_REGION, + //diff-add + accessKeyId: process.env.AWS_ACCESS_KEY_ID as string, + //diff-add + secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY as string, + //diff-add + }), + //diff-add + allowedFileExtensions: [ + //diff-add + "jpg", + //diff-add + "jpeg", + //diff-add + "png", + //diff-add + "gif", + //diff-add + "webm", + //diff-add + "exe", + //diff-add + "webp", + //diff-add + ], + //diff-add + maxFileSize: 1024 * 1024 * 20, // 20MB + //diff-add + filePath: ({ originalFilename, originalExtension, contentType, record }) => { + //diff-add + return `aparts/${new Date().getFullYear()}/${originalFilename}.${originalExtension}` + //diff-add + }, + //diff-add + preview: { + //diff-add + maxWidth: "200px", + //diff-add + }, + //diff-add + }), + + ... + +] + +``` + +And finally add this callback: + +```ts title="./index.ts" + + auth: { + + ... + //diff-add + avatarUrl: async (adminUser)=>{ + //diff-add + const plugin = admin.getPluginsByClassName('UploadPlugin').find(p => p.pluginOptions.pathColumnName === 'avatar') as any; + //diff-add + if (!plugin) { + //diff-add + throw new Error('Upload plugin for avatar not found'); + //diff-add + } + //diff-add + if (adminUser.dbUser.avatar === null || adminUser.dbUser.avatar === undefined || adminUser.dbUser.avatar === '') { + //diff-add + return ''; + //diff-add + } + //diff-add + const imageUrl = await plugin.getFileDownloadUrl(adminUser.dbUser.avatar || '', 3600); + //diff-add + return imageUrl; + //diff-add + }, + + + ... + + } + +``` + +And now you can easily update avatar for each user \ No newline at end of file diff --git a/adminforth/documentation/docs/tutorial/07-Plugins/14-markdown.md b/adminforth/documentation/docs/tutorial/07-Plugins/14-markdown.md index 439d9ae7d..e45a01755 100644 --- a/adminforth/documentation/docs/tutorial/07-Plugins/14-markdown.md +++ b/adminforth/documentation/docs/tutorial/07-Plugins/14-markdown.md @@ -113,7 +113,7 @@ export default { "exe", "webp", ], - maxFileSize: 1024 * 1024 * 20, // 5MB + maxFileSize: 1024 * 1024 * 20, // 20MB filePath: ({ originalFilename, originalExtension, contentType }) => From 0f079de3cba99fa705a6d376a3e4240a9c2b2d79 Mon Sep 17 00:00:00 2001 From: yaroslav8765 Date: Fri, 12 Dec 2025 11:16:24 +0200 Subject: [PATCH 2/3] docs: update avatar usage explanation to reference upload plugin --- .../documentation/docs/tutorial/03-Customization/01-branding.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/adminforth/documentation/docs/tutorial/03-Customization/01-branding.md b/adminforth/documentation/docs/tutorial/03-Customization/01-branding.md index f6d0f6e83..5f049a561 100644 --- a/adminforth/documentation/docs/tutorial/03-Customization/01-branding.md +++ b/adminforth/documentation/docs/tutorial/03-Customization/01-branding.md @@ -274,4 +274,4 @@ auth: { ``` -This syntax can be use to get unique avatar for each user of hardcode avatar, but it makes more sense to use it with upload adapter +This syntax can be use to get unique avatar for each user of hardcode avatar, but it makes more sense to use it with [upload plugin](https://adminforth.dev/docs/tutorial/Plugins/upload/#using-plugin-for-uploading-avatar) From 1593179de90d57535bac6754f6fbd444967f0632 Mon Sep 17 00:00:00 2001 From: Ivan Borshchov Date: Mon, 15 Dec 2025 12:56:10 +0200 Subject: [PATCH 3/3] Revise user avatar documentation Updated section on user avatars to improve clarity and accuracy. --- .../docs/tutorial/03-Customization/01-branding.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/adminforth/documentation/docs/tutorial/03-Customization/01-branding.md b/adminforth/documentation/docs/tutorial/03-Customization/01-branding.md index 5f049a561..73ed87fe6 100644 --- a/adminforth/documentation/docs/tutorial/03-Customization/01-branding.md +++ b/adminforth/documentation/docs/tutorial/03-Customization/01-branding.md @@ -254,9 +254,9 @@ customization: { ``` -## Avatars +## User Avatar -If you want your user to have custom avatar you can use avatarUrl: +If you want your user to have custom avatar you can use avatarUrl function in auth section: ```ts title='./index.ts' @@ -265,7 +265,7 @@ auth: { ... avatarUrl: async (adminUser)=> { - return `https://${process.env.STORAGE_PROVIDER_PATH}/${adminUser.dbUser.avatar_path}` + return ... // absolute URL of avatar for this adminUser }, ... @@ -274,4 +274,4 @@ auth: { ``` -This syntax can be use to get unique avatar for each user of hardcode avatar, but it makes more sense to use it with [upload plugin](https://adminforth.dev/docs/tutorial/Plugins/upload/#using-plugin-for-uploading-avatar) +We recommend to use this feature with [upload plugin](https://adminforth.dev/docs/tutorial/Plugins/upload/#using-plugin-for-uploading-avatar)