Question:
Why Swagger UI does not show the Choose a File button?

Problem

So I am trying to create a nodejs application with an endpoint that uploads files, but seems anything I research on, and using chatGPT, won't show any CHOOSE A FILE BUTTON but rather just an input textbox.


The code sample below that I have tried, but it shows no button in Swagger. http://localhost:3000/api-docs/


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}`);

});


Solution

You should mention type in the schema


/**

 * @swagger

 * /upload:

 *   post:

 *     summary: Upload a file

 *     consumes:

 *       - multipart/form-data

 *     parameters:

 *       - in: formData

 *         name: file

 *         schema:

 *           type: file

 *         required: true

 *         description: The file to upload

 *     responses:

 *       200:

 *         description: File uploaded successfully

 */


>Swagger Doc


Answered by: >Yuvaraj M

Credit: >StackOverflow


Blog Links

>How to manage the Text in the container in Django?

>Fix webapp stops working issue in Django- Python webapp

>Creating a form in Django to upload a picture from the website

>Sending Audio file from Django to Vue

>How to keep all query parameters intact when changing page in Django?

>Solved: TaskList View in Django

>Implement nested serializers in the Django rest framework

>How to filter events by month in Django?

>Sorting the restframework in Django

>Ways to access instances of models in view in order to save both forms at once in Django

>What makes index.html have such kind of name in Django?

>Fix Module Not Found during Deployment- Django

>Creating a Django with existing directories, files, etc.?

>How to Read a CSV file with PHP using cURL?


Nisha Patel

Nisha Patel

Submit
0 Answers