Atlaskit editor-core custom file endpoint/File upload service

I’m trying to use @atlaskit/editor-core in a project and want to specify my own Fileserver/MediaClient. Atlaskit does export a function for testing, where I could mock the client.

So my thoughts were if instead of mocking for testing, I would inject my own client this way…
but is this really the best option?

Since the documentation on @atlaskit/editor-core is fairly minimal, I do not know where else to look…

Findings so far: with the following line the mocking can be enabled.

import { mediaMock } from '@atlaskit/media-test-helpers'
mediaMock.enable()

Minimal Example:

import React from 'react';
import { MediaProvider } from '@atlaskit/editor-common';
import { Editor } from '@atlaskit/editor-core';
import { MediaClientConfig } from '@atlaskit/media-core';
import { mediaMock, mediaPickerAuthProvider } from '@atlaskit/media-test-helpers';

mediaMock.enable();


// Crreating basic MediaProvider
const collection = 'sample-collection';
const mediaClientConfig: MediaClientConfig = {
  authProvider: mediaPickerAuthProvider(),
};

const mediaProvider = Promise.resolve<MediaProvider>({
  uploadParams: { collection },
  viewMediaClientConfig: mediaClientConfig,
  uploadMediaClientConfig: mediaClientConfig,
});

export const EditorMinimal = () => {
  return (
    <Editor
      appearance="full-page"
      media={{
        provider: mediaProvider,
        allowResizing: true,
        allowMediaSingle: true,
        useMediaPickerPopup: false,
        allowDropzoneDropLine: true,
        isCopyPasteEnabled: true,
      }}
    />
  );
};


Any link, direction, advise or starting point will be appreciated!!

Hi @FabioMoretti!

Thanks for reaching out, I’m Hector from the editor-media team.

I think theoretically you could have your own media server and configure the auth provider to point to it since we have the baseUrl prop. Check packages/media/media-core/src/auth.ts.

But in reality that would be very complex, since your service will need to implement a lot of different endpoints and logic that is very specific to Atlassian and how files work in there.

What you tried with mediaMock only works for testing as you said, since it just intercepts HTTP calls and returns some mocks, so it won’t help you in your case if what you want is a working API.

So I would say it’s really not an option currently to have your custom media backend work with the editor. What you can try instead, it’s to implement the legacyImageUploadProvider prop on the editor, check: packages/editor/editor-core/src/types/editor-props.ts and packages/editor/editor-common/src/provider-factory/image-upload-provider.ts, so that way we will ignore the default media API integration and you cold hook your own uploader and later use external media nodes.

Best,
Hector Zarco

Hi @zzarcon!

I’m very thankful for your response!

I’ve tried the lefacyImageUploadProvider for a short period but cant figure out how to use that with the new Media Elements (if I type /media no insert will be possible and no copy paste will be possible).

So now I’m thinking of how I could maybe “patch” the Editor Core to use a custom media Client (just completely a custom Class, so no intercepting…)

Could you maybe point me into the right direction or specify where the MediaClient/Uploader/Api is used?

Best,

Fabio Moretti

1 Like

bump @zzarcon

Update:

I managed to solve this by going to the node_modules directory.

There there is the media-client (@atlaskit/media-client) where it is feasable to rewrite the mediastore class (there is a es2019 module) and then compile the rewrites to the other modules (esm and cjs).

Then after that I patched the module so that the changes are persistent.

But keep in Mind, this is a very hacky Solution.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.