项目作者: AndrewJBateman
项目描述 :
:clipboard: FCC project to be able to select and upload a file via a UI
高级语言: HTML
项目地址: git://github.com/AndrewJBateman/file-metadata.git
- extracts uploaded file metadata and stores file using multer node.js middleware
- This was part of the FreeCodeCamp exercises for Front End Certification
- Note: to open web links in a new window use: ctrl+click on link




Table of contents
General info
- Original instructions (User Stories) from FCC:
- I can submit a form that includes a file upload.
- The from file input field has the “name” attribute set to “upfile”. We rely on this in testing.
- When I submit something, I will receive the file name and size in bytes within the JSON response
- To handle the file uploading you should use the multer npm package.
Screenshots
.
Technologies
- Node v14 javaScript runtime built on Chrome’s V8 JavaScript engine
- Express v5 Fast, unopinionated, minimalist web framework for Node.js
- multer v1 node.js middleware for handling multipart/form-data, mainly used for uploading files
- Cors v2 node.js package for providing Connect/Express middleware that can be used to enable CORS with various options.
Setup
- Run
node server.js
for a dev server. Navigate to http://localhost:8080/
. - The app will not automatically reload if you change any of the source files.
Code Examples
- extract from
server.js
to upload file and produce a json object with file details (or error message if it does not work)
app.post('/api/fileanalyse', upload.single('upfile'), (req, res, next) => {
const fileSize = req.file && req.file.size;
console.log(typeof fileSize); //should return 'number'
res.json(
typeof fileSize == 'undefined'
? { error: 'sorry, but there is a file error' }
: {
name: req.file.originalname,
type: req.file.mimetype,
size: req.file.size + ' bytes',
}
);
});
Features
- multer used to upload files - uploaded files stored in a folder named ‘uploads’. If this folder does not exist then it is created.
Status & To-Do List
- Status: Working
- To-Do: nothing
Inspiration
License
- This project is licensed under the terms of the MIT license.