Wrong path when trying to view uploaded images

[petrakoww]

I'm uploading images successfully but when I try to view them the src in the img tag is incorrect.

It should be only http://localhost:8080/static/colors/6349c2a411aac4c21990aa54/registration/123.png
What am I doing wrong and how to fix it?

[petrakoww]

I found that if I edit the document's bucket to ../../../static/colors it works or kinda works.

But if I set the provider to local: { bucket: '../../../static/colors' } it says:
Error: directory: "../../../static/colors" does not exists. Create it before running LocalAdapter

Why is /admin/resources/Test or /admin/resources/ (depending if I'm viewing the document or all) being appended to bucket + path

Also i think this issue is similar to mine.
##35

[petrakoww]

@dziraf Do you have any idea what causes the problem?

[ddresch]

The issue is the baseUrl options parameter, which you are not using. I'm running into a similar situation. I try to run my app in a Docker container, which is not working with the standard local provider (see issue #42). Likewise, I'm currently trying to use a custom provider which is using the move method of the fs-extra package (see here #42 (comment)).

So, the only change is the move method, nothing more, all the rest is the same as the default local provider. I define the custom provider like that:

uploadFileFeature({
        provider: new UploadProvider({
          bucket: path.resolve(`./public/files`),
          opts: {
            baseUrl: '/files',
          },
        }),

As I see it, the baseUrl parameter is ignored and the component uses the bucket path, which is an absolute path and useless for the frontend. I would be happy to any feedback on how this baseUrl needs to be used with a custom provider.

[Reigin16]

@ddresch
Update your custom provider like this from line 8:

now define options like local provider

[murat-mehmet]

This issue is still there. A hacky workaround:

    // Define a custom local provider
    class UploadProvider extends LocalProvider {
      constructor() {
        super({
          bucket: 'public/upload',
          opts: {
            baseUrl: '/upload',
          },
        });
      }

      // @ts-ignore
      public path(key: string, bucket?: string, context): string {
        // build path using baseUrl instead of bucket
        if (bucket && context && !context['adminjs-upload']?.file && !context['adminjs-upload']?.['file.filesToDelete'])
          return super.path(key, this.opts.baseUrl.substring(1));

        return super.path(key, bucket);
      }
    }

    // ... and later use it as provider
    uploadFeature({
              componentLoader,
              provider: new UploadProvider(),
              validation: { mimeTypes: ['image/png', 'image/jpeg'] },