⚡ Node File Upload

• Uploads image files selected by the user from an Ionic frontend to a Node.js backend folder.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Node File Upload
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Very simple backend using node with express and multer to load image files.
• Client frontend uses Ionic-Angular or Ionic-React to show user controls to upload file from PC file system.

📷 Screenshots

📶 Technologies

Frontends:

• Angular v16
• ionic/angular v7 angular building blocks for Ionic
• ionic/react v7 react building blocks for Ionic. Don't update to v6 due to React breaking changes

Backend:

• cors Cross Origin Resource Sharing Connect/Express middleware
• Express v4 Node.js middleware, includes body parsing
• Morgan v1 HTTP request logger middleware for node.js
• Multer v1 Middleware for handling multipart/form-data.
• Busboy used by Multer as a streaming parser for HTML form data for node.js

💾 Setup

/Ionic-Angular & /Ionic-React Frontends:

• cd client-angular then npm i to install Angular frontend dependencies
• cd client-react then npm i to install React frontend dependencies
• I had to have a Google Chrome CORS extension activated for this to work
• Angular frontend: Run ionic serve & navigate to http://localhost:8080/ or ng serve & navigate to http://localhost:4200/ to run server. The app will automatically reload if you change any of the source files.
• React frontend: Run npm run start & navigate to http://localhost:3001/
• The apps will automatically reload if you change any of the source files.

/server-express Backend:

• cd server-express then npm i to install backend dependencies
• Run node index.js for a node.js server. Backend does not update automatically as nodemon not used

💻 Code Examples

• Extract from server-express/index.js to show use of dependencies and posting of objects to uploads folder.

app.use(cors());
app.use(morgan("combined"));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.post("/upload", upload.single("photo"), (req, res) => {
  console.log(req.file);
});

app.post("/uploads", upload.array("photos[]"), (req, res) => {
  console.log(req.files);
});

🆒 Features

• Tutorial shows different front-ends that can be used to pass objects to the backend
• Backend 'uploads' folder is automically created if it does not exist already.

📋 Status & To-Do List

• Status: Working
• To-Do: Nothing. There is repeated frontend ionic-angular code and scope for refactoring - I am leaving it as is for now.

👏 Inspiration

• Joshua Morony: Youtube: How to upload files to a server with Ionic

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [email protected]