Skip to content

Basic Azure File Upload with Node.js and React (TypeScript)

Latest

Choose a tag to compare

@MustafaGondalwala MustafaGondalwala released this 28 Jul 14:00

Release Notes for v1.0.0:
Overview
This release introduces the initial version of the file upload functionality to Azure Blob Storage, leveraging Node.js for the backend and React for the frontend, both implemented using TypeScript.

Features

Node.js Backend:

Express Server: A lightweight server set up to handle incoming file upload requests.
Multer Middleware: Utilized for handling file uploads and temporarily storing files on disk before processing.
Azure Blob Storage Integration: Seamlessly integrated Azure Blob Storage using the Azure Storage Blob SDK to handle file uploads.
CORS Support: Enabled CORS to allow the frontend application to communicate with the backend server without cross-origin issues.
Error Handling and Cleanup: Implemented robust error handling and ensured temporary files are cleaned up post-upload to manage disk space efficiently.

React Frontend:

File Upload Component: A user-friendly file upload component with an integrated progress bar to provide real-time upload status.
Axios for HTTP Requests: Used Axios for making HTTP requests to the backend server and tracking the progress of the file upload.
TypeScript Integration: Full TypeScript support across both frontend and backend, ensuring type safety and better developer experience.
Usage
Backend: The backend server listens for file upload requests, processes them using Multer, and uploads them to Azure Blob Storage. Configure your .env file with your Azure Storage account details and start the server.
Frontend: The frontend allows users to select a file and upload it to the server. The progress bar provides visual feedback on the upload status. Start the React development server to use the frontend interface.

This release lays the foundation for securely and efficiently handling file uploads to Azure Blob Storage, providing a seamless integration between a TypeScript-based Node.js backend and a React frontend. Future enhancements can build upon this base to add more advanced features and optimizations.