Unable to Uplaod Image using AdminJS

Question

your textI try to Upload Image on mongoDB using AdminJS having schema as

------------------- ifile.mjs -----------------------

import { mongoose } from 'mongoose';

export const ImageSchema = new mongoose.Schema({
mime: {type: String, required: true},
});

const Image = mongoose.model("Image", ImageSchema);
export default Image;

------------------ startup.mjs -----------------------

 import { mongoose } from 'mongoose';

const startupSchema = new mongoose.Schema(
    {
        Logo: { type: Buffer },
        StartUp_Name:    { type: String, required: true },
        Idea_Description:{ type: String, },
    },  
    {
        timestamps: {createdAt: 'created_at', updatedAt: 'updated_at'}
    }
);

const StartUp = mongoose.model("StartUp", startupSchema);
export default StartUp;

I want to upload an image in the startUp Schema for the logo, but this is not working

-------------- app.mjs---------------------

// All required dependencies
import uploadFeature from '@adminjs/upload';

import StartUp from './collection/startup.mjs'
import Image, { ImageSchema } from './collection/ifile.mjs'

dotnev.config("./.env")
const PORT = process.env.PORT || 3002

const start = async () =\> {
const MongoStore = MongoDBStore(session);
connectDB()
const HomePage = { name: 'Home Page', icon: 'Home'}\`

const admin = new AdminJS({
    resources: [
    {
        resource: StartUp,
        options:
        {
        navigation: HomePage,
        bio: {
            isVisible: {
                edit: true,
                show: true,
                list: true,
                filter: true,
           },
        },
        properties: {
            // mime: { type: 'string',},
            // image: { isVisible: true, }
        },
        actions: {
        uploadFile: {
            provider:   { aws: S3 },
            validation: { mimeTypes: \['image/png', 'application/pdf'\] },
            properties: { key: S3.accessKeyId, },  
        },
  
        // features:[
        //   uploadFeature({
        //     provider: { aws: S3 },
        //     validation: { mimeTypes: ['image/png', 'image/jpg', 'image/jpeg'] },
        //     properties: {
        //       key: process.env.AWS_ACCESS_KEY_SECRET
        //       mimeType: 'mimeTypes',
        //     },
        //   }),
        // ]
        },
        editProperties: ['StartUp_Name', 'Idea_Description'],
        filterProperties: ['StartUp_Name', 'Idea_Description', 'created_at'],      
        showProperties: ['StartUp_Name', 'Idea_Description'], 
        },
    ],
    rootPath: "/admin",
    },
    })
    const adminRouter = AdminJSExpress.buildRouter(admin)
    app.use(cors());
    app.use(admin.options.rootPath, adminRouter)
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: true }));
    
    app.listen(PORT, () => {
        console.log(`AdminJS started on http://localhost:${PORT}${admin.options.rootPath}`)
})
start()

If I use uploadFile code, yhen on the top-right corner, there is an upload button, but it is not functional.

If I use the uploadFeature (commented code), then there is an error...

............./backend/node_modules/@adminjs/upload/build/features/upload-file/utils/bundle-component.js:7
return loader.add(componentName, componentPath);
^

TypeError: Cannot read properties of undefined (reading 'add')
at bundleComponent (............./backend/node_modules/@adminjs/upload/build/features/upload-file/utils/bundle-component.js:7:19)
at uploadFeature (............./backend/node_modules/@adminjs/upload/build/features/upload-file/upload-file.feature.js:63:31)
at uploadFileFeature (............./backend/node_modules/@adminjs/upload/build/features/upload-file/upload-file.feature.js:102:12)
at start (............./backend/app.mjs:184:17)
at ............./backend/app.mjs:446:1

Node.js v18.16.0
\[nodemon\] app crashed - waiting for file changes before starting...

I also tried it with Local File System, but got the same error there as well.

features: [
    uploadFeature({
        provider: localProvider,
        validation: { mimeTypes: ['image/png', 'application/pdf'],},
        options: {
        key: 323,
        bucket: './public/files',
        s3Key: 'uploadFeature',
    },
    }),
],

I use https://docs.adminjs.co/basics/features/upload for reference.

I just want that while click on upload, I'm able to browse the image using the popup

Answer 1

Working Solution:

You need to import ComponentLoader in the file where you are using AdminJs library using the following command:

import { ComponentLoader } from "adminjs";

Initialize the object of the above library:

const componentLoader = new ComponentLoader()

make the following changes where you are initializing the AdminJs object:

const admin = new AdminJS({
  componentLoader,
  // other config,
  features: [
    uploadFeature({
      componentLoader,
      // other config,
    })
  ]
})

It will work now.