Choose a file button in swagger doesn't show up

[jcarlo-vs]

Hello been trying to make a nodejs app with an endpoint that uploads a file.

• OS: [Windows]
• Browser: [Chrome]
• Version: [latest]
• Method of installation: [npm]
• Swagger-UI version: [3.10.0]

• Swagger/OpenAPI version: [ OpenAPI 3.0]

  TRIED the code below and everything around the internet. but seems it really doesn't show and CHOOSE A FILE BUTTON to upload in, but just shows, an input textbox

CODE USED :

const express = require('express');
const multer = require('multer');
const swaggerJsdoc = require('swagger-jsdoc');
const swaggerUi = require('swagger-ui-express');

const app = express();
const port = process.env.PORT || 3000;

// Set up Multer for handling file uploads
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

// Swagger configuration
const swaggerOptions = {
  definition: {
    openapi: '3.0.0',
    info: {
      title: 'File Upload API',
      version: '1.0.0',
    },
  },
  apis: ['./server.js'], // Specify the file where your routes are defined
};

const swaggerSpec = swaggerJsdoc(swaggerOptions);

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerSpec));

/**
 * @swagger
 * /upload:
 *   post:
 *     summary: Upload a file
 *     consumes:
 *       - multipart/form-data
 *     parameters:
 *       - in: formData
 *         name: file
 *         type: file
 *         required: true
 *         description: The file to upload
 *     responses:
 *       200:
 *         description: File uploaded successfully
 */
app.post('/upload', upload.single('file'), (req, res) => {
  const file = req.file;
  if (!file) {
    return res.status(400).json({ message: 'No file uploaded' });
  }

  // Process the file (you can save it, manipulate it, etc.)
  // For now, we'll just return some information about the uploaded file
  res.json({
    message: 'File uploaded successfully',
    originalname: file.originalname,
    mimetype: file.mimetype,
    size: file.size,
  });
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

RESULT :

EXPECTED RESULT

[MuhammedJaseemVK]

Can I work on it?. Please assign it to me

[AlexWinder]

I had a similar issue to this, but found that it was an issue with the documentation version I was using. On v5.17.14 the latest documentation works for me - https://swagger.io/docs/specification/describing-request-body/file-upload/.

With the following YAML:

/upload:
    post:
      requestBody:
        content:
          multipart/form-data:
            schema:
              type: object
              properties:
                file:
                  type: string
                  format: binary
                  description: The file to upload.
                  required: true