A modern Angular application for uploading files directly to Azure Blob Storage.
- Drag and drop file upload interface
- Progress tracking with visual feedback
- Direct upload to Azure Blob Storage
- Responsive design
- Error handling and success notifications
- Node.js (v14 or higher)
- Angular CLI (v19)
- An Azure Storage account with a container and SAS token
-
Clone the repository:
git clone <repository-url> cd azure-blob-upload
-
Install dependencies:
npm install
-
Configure Azure Storage:
Update the
src/environments/environment.ts
file with your Azure Storage account details:export const environment = { production: false, azureStorage: { accountName: 'your-storage-account-name', containerName: 'your-container-name', sasToken: 'your-sas-token' } };
Start the development server:
ng serve
Navigate to http://localhost:4200/
in your browser to use the application.
-
Upload a File:
- Drag and drop a file onto the upload area, or click to browse for a file
- The selected file details will be displayed
- Click the "Upload to Azure" button to start the upload
-
Monitor Progress:
- A progress bar will show the upload status
- Upon completion, a success message will be displayed
- If an error occurs, an error message will be shown with details
To build the application for production:
ng build --configuration=production
The build artifacts will be stored in the dist/azure-blob-upload
directory.
- The SAS token in the environment file should be kept secure and not committed to public repositories
- This is a POC project, to test out the upload. For production use, consider implementing server-side generation of SAS tokens
- Set appropriate CORS rules on your Azure Storage account
This project is licensed under the MIT License - see the LICENSE file for details.