swagger-ui
swagger-ui copied to clipboard
Choose a file button in swagger doesn't show up
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