🚀 - Documentation on how to use TUI_ATTACH_FILES_LOADER (TuiEditorTool.Attach)

[hatsantos]

Description

When using with tool TuiEditorTool.Attach, after we select a file a console error is presented:

tinkoff-tui-editor-components-toolbar.js:677 Assertion failed: Please provide TUI_ATTACH_FILES_LOADER

When searching the documentation, on how to setup TUI_ATTACH_FILES_LOADER there's no examples or reference to TUI_ATTACH_FILES_LOADER token.

[jorgefralves]

+1

[splincode]

I will take it on Monday

[hatsantos]

Thank you @splincode

In the meantime, I made some progress. I read part of the source code of the component and managed to get the functionality active and without compiling errors.

Nevertheless, after activating the tools "Image Upload" and "Attachments Upload" (TuiEditorTool.Img, TuiEditorTool.Attach), I select some files (via file browser) and upload them, but nothing happens in the editor area... nothing is added or presented when using the attachment tools.

The Image tool / code is working as expected and the image is presented in the editor.

The TUI_IMAGE_LOADER seems to need a string as return in the adapter.
The TUI_ATTACH_FILES_LOADER seems to need an array of TuiEditorAttachedFile objects.

Below is the source code I have at the moment:

Config TOKEN and providers in main.ts:

bootstrapApplication(AppComponent, 
{
	providers:
	[
		...
		{ provide: TUI_BUTTON_OPTIONS, useValue: { size: 'm' } },
		{ provide: TUI_TEXTFIELD_SIZE, useValue: { size: 'm' } },
		{ provide: TUI_ANIMATIONS_DURATION, useValue: 200 },
		{ provide: TUI_SANITIZER, useClass: NgDompurifySanitizer },
		{
			provide: TUI_EDITOR_EXTENSIONS,
			deps: [INJECTOR],
			useFactory: (injector: Injector) =>
			[
				...TUI_EDITOR_DEFAULT_EXTENSIONS,
				import('@tinkoff/tui-editor/extensions/image-editor').then(({ tuiCreateImageEditorExtension }) => tuiCreateImageEditorExtension({ injector })),
			],
		},
		{
                        provide: TUI_IMAGE_EDITOR_OPTIONS,
                        useValue: { maxWidth: 512, minWidth: 290 },
                },
		{
			provide: TUI_ATTACH_FILES_OPTIONS,
			useValue: { accept: ".pdf, .doc, .docx .xls, .xlsx", multiple: true },
		},
		{
                        provide: TUI_IMAGE_LOADER,
                        useFactory: TuiImageLoaderAdapter,
                        deps: [FileUploaderService],
                },
		{
			provide: TUI_ATTACH_FILES_LOADER,
			useFactory: TuiAttachFilesLoaderAdapter,
			deps: [FileUploaderService],
		}
	]
});

Uploader Service and Upload Adapters

import { Injectable } from '@angular/core';
import { HttpContext } from "@angular/common/http";
import { AbstractAPIService, CLIENT_REQUEST_LOADING } from "@services/abstract-api.service";
import { IFileUpload } from "@models/features/files.models";
import { IClientUser } from "@models/features/clients.models";
import { TuiEditorAttachedFile } from "@tinkoff/tui-editor";

import {forkJoin, Observable} from 'rxjs';
import { map } from 'rxjs/operators';


export function TuiImageLoaderAdapter(FileUploaderService: FileUploaderService): (file: File) => Observable<string>
{
    return (file: File) =>
	{
		return FileUploaderService.UploadFile(file).pipe(map((response: IFileUpload) => FileUploaderService.PublicUrl(response)));
    };
}

export function TuiAttachFilesLoaderAdapter(FileUploaderService: FileUploaderService): (files: File[]) => Observable<TuiEditorAttachedFile[]>
{
	return (files: File[]) =>
	{
		const uploadObservables = files.map(file => FileUploaderService.UploadFile(file));

		return forkJoin(uploadObservables).pipe(map((responses: IFileUpload[]) => responses.map(response =>
		{
			const attach: TuiEditorAttachedFile =
			{
				link: FileUploaderService.PublicUrl(response),
				name: `${response.OriginalFileName}`
			};

			return attach;
		})));
	};
}

@Injectable({ providedIn: 'root' })
export class FileUploaderService extends AbstractAPIService
{
	constructor() { super(); }

	PublicUrl(file: IFileUpload)
	{
		return `${this.BASE_URL}/Files/Render/${file?.Id}`;
	}

	UploadFile(file: File): Observable<IFileUpload>
	{
		const formData: FormData = new FormData();
		formData.append('file', file, file.name);

		const context = new HttpContext().set(CLIENT_REQUEST_LOADING, false);

		return this.Upload<IFileUpload>('Files/Upload', formData, context);
	}

	DeleteFile(file: IFileUpload)
	{
		return this.Delete<IClientUser>(`Files/${file?.Id}`);
	}
}

[splincode]

https://taiga-family.github.io/editor/starter-kit/Options

And example
https://taiga-family.github.io/editor/embed/html5#video-audio