[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