[Feature]: How I can show uploaded image using built-in components

[evgeniym69]

Description

    resources: [
      {
        resource: Tool,
        options: {
          properties: {
            external_id: {
              isVisible: {
                list: true,
                filter: true,
                show: true,
                edit: false,
              },
            },
            deletedAt: {
              isVisible: {
                list: false,
                filter: true,
                show: true,
                edit: false,
              },
            },
            createdAt: {
              isVisible: {
                list: true,
                filter: true,
                show: true,
                edit: false,
              },
            },
            updatedAt: {
              isVisible: {
                list: true,
                filter: true,
                show: true,
                edit: false,
              },
            },
            locationName: {
              isVisible: false,
            },
            locationAddress: {
              isVisible: false,
            },
            locationCoordinates: {
              isVisible: false,
            },
            // photos: {
            //   isArray: true, // will be list of inputs
            //   isVisible: {
            //     list: true,
            //     filter: true,
            //     show: true,
            //     edit: true,
            //   },
            // },
            // photos: {
            //   type: 'string', //custom component view
            //   components: {
            //     edit: Components.ImageView, // this is our custom component
            //   },
            // },
          },
          listProperties: [
            'external_id',
            'name',
            'available',
            'price',
            'status',
            'createdAt',
            'updatedAt',
          ],
        },
        features: [
          uploadFeature({
            componentLoader,
            // provider: { local: localProvider },
            provider: new UploadProvider(),
            // multiple: true, //add multiple files
            properties: {
              key: 'imageFile',
              mimeType: 'mime',
              bucket: 'bucket',
              size: 'size',
            },
            validation: { mimeTypes: ['image/png', 'image/jpeg'] },
          }),
        ],
      },
      ]
                
      This code renders File picker. I've also added  custom provider for upload

import fs, { existsSync } from 'fs';
import { move } from 'fs-extra';
import path from 'path';
import { UploadedFile } from 'adminjs';
import { BaseProvider } from '@adminjs/upload';

const UPLOADS_DIR = 'public/files';

export default class UploadProvider extends BaseProvider {
constructor() {
super(UPLOADS_DIR);
if (!existsSync(UPLOADS_DIR)) {
throw new Error(
directory: "${UPLOADS_DIR}" does not exists. Create it before running LocalAdapter,
);
}
}

public async upload(file: UploadedFile, key: string): Promise {
const externalId = key.split('/')[0];
const dirPath = path.join(UPLOADS_DIR, tool_${externalId});
if (!existsSync(dirPath)) {
await fs.promises.mkdir(dirPath, { recursive: true });
}

const files = await fs.promises.readdir(dirPath);
const fileNumber = files.length + 1;
const filePath = path.join(
  dirPath,
  `${fileNumber}${path.extname(file.name)}`,
);

await move(file.path, filePath, { overwrite: true });

}

public async delete(key: string, bucket: string): Promise {
const filePath = path.join(UPLOADS_DIR, key);
await fs.promises.unlink(filePath);
}

// eslint-disable-next-line class-methods-use-this
public path(key: string, bucket?: string): string {
return path.join(UPLOADS_DIR, key);
}
}

And the question is - how should I render downloaded image/images using built-in component suck as File component on the screen.

I didn't get it using documentation.

Suggested Solution

Update documentation for Show downloaded images case

Alternatives

No response

Additional Context

No response