Skip to content

Commit a9c1b65

Browse files
ivictborivictbor
authored
Merge pull request #228 from devforth/add-image-attachments-rich-markdown
docs: document image uploads for rich and markdown editors
2 parents 62d0086 + ce06ae2 commit a9c1b65

2 files changed

Lines changed: 228 additions & 0 deletions

File tree

‎adminforth/documentation/docs/tutorial/05-Plugins/04-RichEditor.md‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,3 +144,113 @@ To get completion suggestions for the text in the editor, you can use the `compl
144144
```
145145

146146
![alt text](gptDemo.gif)
147+
148+
### Imges in Rich editor
149+
150+
First, you need to create resource for images:
151+
```prisma title="schema.prisma"
152+
model description_image {
153+
id String @id
154+
created_at DateTime
155+
resource_id String
156+
record_id String
157+
image_path String
158+
}
159+
```
160+
161+
```bash
162+
npm run makemigration -- --name add_description_image
163+
```
164+
165+
```bash
166+
npm i @adminforth/upload --save
167+
npm i @adminforth/storage-adapter-local --save
168+
```
169+
170+
```typescript title="./resources/description_image.ts"
171+
import AdminForthStorageAdapterLocalFilesystem from "../../adapters/adminforth-storage-adapter-local";
172+
import { AdminForthResourceInput } from "../../adminforth";
173+
import UploadPlugin from "../../plugins/adminforth-upload";
174+
import { v1 as uuid } from "uuid";
175+
176+
export default {
177+
dataSource: "maindb",
178+
table: "description_image",
179+
resourceId: "description_images",
180+
label: "Description images",
181+
columns: [
182+
{
183+
name: "id",
184+
primaryKey: true,
185+
required: false,
186+
fillOnCreate: ({ initialRecord }: any) => uuid(),
187+
showIn: {
188+
create: false,
189+
},
190+
},
191+
{
192+
name: "created_at",
193+
required: false,
194+
fillOnCreate: ({ initialRecord }: any) => new Date().toISOString(),
195+
showIn: {
196+
create: false,
197+
},
198+
},
199+
{ name: "resource_id", required: false },
200+
{ name: "record_id", required: false },
201+
{ name: "image_path", required: false },
202+
],
203+
plugins: [
204+
new UploadPlugin({
205+
pathColumnName: "image_path",
206+
207+
// rich editor plugin supports only 'public-read' ACL images for SEO purposes (instead of presigned URLs which change every time)
208+
storageAdapter: new AdminForthStorageAdapterLocalFilesystem({
209+
fileSystemFolder: "./db/uploads/description_images", // folder where files will be stored on disk
210+
adminServeBaseUrl: "static/source", // the adapter not only stores files, but also serves them for HTTP requests
211+
mode: "public", // public if all files should be accessible from the web, private only if could be accesed by temporary presigned links
212+
signingSecret: process.env.ADMINFORTH_SECRET, // secret used to generate presigned URLs
213+
}),
214+
215+
allowedFileExtensions: [
216+
"jpg",
217+
"jpeg",
218+
"png",
219+
"gif",
220+
"webm",
221+
"exe",
222+
"webp",
223+
],
224+
maxFileSize: 1024 * 1024 * 20, // 5MB
225+
226+
227+
filePath: ({ originalFilename, originalExtension, contentType }) =>
228+
`description_images/${new Date().getFullYear()}/${uuid()}/${originalFilename}.${originalExtension}`,
229+
230+
preview: {
231+
// Used to display preview (if it is image) in list and show views instead of just path
232+
// previewUrl: ({s3Path}) => `https://tmpbucket-adminforth.s3.eu-central-1.amazonaws.com/${s3Path}`,
233+
// show image preview instead of path in list view
234+
// showInList: false,
235+
},
236+
}),
237+
],
238+
} as AdminForthResourceInput;
239+
```
240+
241+
Next, add attachments to RichEditor plugin:
242+
243+
```typescript title="./resources/apartments.ts"
244+
import RichEditorPlugin from '@adminforth/rich-editor';
245+
246+
// ... existing resource configuration ...
247+
248+
new RichEditorPlugin({
249+
htmlFieldName: 'description',
250+
attachments: {
251+
attachmentResource: "description_images",
252+
attachmentFieldName: "image_path",
253+
attachmentRecordIdFieldName: "record_id",
254+
attachmentResourceIdFieldName: "resource_id",
255+
}
256+
})

‎adminforth/documentation/docs/tutorial/05-Plugins/14-markdown.md‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,121 @@ Here is how it looks in show view:
3737
![alt text](markdown-show1.png)
3838
![alt text](markdown-show2.png)
3939

40+
### Imges in Markdown
41+
42+
First, you need to create resource for images:
43+
```prisma title="schema.prisma"
44+
model description_image {
45+
id String @id
46+
created_at DateTime
47+
resource_id String
48+
record_id String
49+
image_path String
50+
}
51+
```
52+
53+
```bash
54+
npm run makemigration -- --name add_description_image
55+
```
56+
57+
```bash
58+
npm i @adminforth/upload --save
59+
npm i @adminforth/storage-adapter-local --save
60+
```
61+
62+
```typescript title="./resources/description_image.ts"
63+
import AdminForthStorageAdapterLocalFilesystem from "../../adapters/adminforth-storage-adapter-local";
64+
import { AdminForthResourceInput } from "../../adminforth";
65+
import UploadPlugin from "../../plugins/adminforth-upload";
66+
import { v1 as uuid } from "uuid";
67+
68+
export default {
69+
dataSource: "maindb",
70+
table: "description_image",
71+
resourceId: "description_images",
72+
label: "Description images",
73+
columns: [
74+
{
75+
name: "id",
76+
primaryKey: true,
77+
required: false,
78+
fillOnCreate: ({ initialRecord }: any) => uuid(),
79+
showIn: {
80+
create: false,
81+
},
82+
},
83+
{
84+
name: "created_at",
85+
required: false,
86+
fillOnCreate: ({ initialRecord }: any) => new Date().toISOString(),
87+
showIn: {
88+
create: false,
89+
},
90+
},
91+
{ name: "resource_id", required: false },
92+
{ name: "record_id", required: false },
93+
{ name: "image_path", required: false },
94+
],
95+
plugins: [
96+
new UploadPlugin({
97+
pathColumnName: "image_path",
98+
99+
// rich editor plugin supports only 'public-read' ACL images for SEO purposes (instead of presigned URLs which change every time)
100+
storageAdapter: new AdminForthStorageAdapterLocalFilesystem({
101+
fileSystemFolder: "./db/uploads/description_images", // folder where files will be stored on disk
102+
adminServeBaseUrl: "static/source", // the adapter not only stores files, but also serves them for HTTP requests
103+
mode: "public", // public if all files should be accessible from the web, private only if could be accesed by temporary presigned links
104+
signingSecret: process.env.ADMINFORTH_SECRET, // secret used to generate presigned URLs
105+
}),
106+
107+
allowedFileExtensions: [
108+
"jpg",
109+
"jpeg",
110+
"png",
111+
"gif",
112+
"webm",
113+
"exe",
114+
"webp",
115+
],
116+
maxFileSize: 1024 * 1024 * 20, // 5MB
117+
118+
119+
filePath: ({ originalFilename, originalExtension, contentType }) =>
120+
`description_images/${new Date().getFullYear()}/${uuid()}/${originalFilename}.${originalExtension}`,
121+
122+
preview: {
123+
// Used to display preview (if it is image) in list and show views instead of just path
124+
// previewUrl: ({s3Path}) => `https://tmpbucket-adminforth.s3.eu-central-1.amazonaws.com/${s3Path}`,
125+
// show image preview instead of path in list view
126+
// showInList: false,
127+
},
128+
}),
129+
],
130+
} as AdminForthResourceInput;
131+
```
132+
133+
Next, add attachments to Markdown plugin:
134+
135+
```typescript title="./resources/apartments.ts"
136+
import MarkdownPlugin from '@adminforth/markdown';
137+
138+
// ... existing resource configuration ...
139+
140+
plugins: [
141+
new MarkdownPlugin({
142+
fieldName: "description"
143+
// diff-add
144+
attachments: {
145+
// diff-add
146+
attachmentResource: "description_images",
147+
// diff-add
148+
attachmentFieldName: "image_path",
149+
// diff-add
150+
attachmentRecordIdFieldName: "record_id",
151+
// diff-add
152+
attachmentResourceIdFieldName: "resource_id",
153+
// diff-add
154+
},
155+
}),
156+
]
157+
```

0 commit comments

Comments
 (0)