|
1 |
| -This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). |
| 1 | +# Next.js Azure Blob Storage file upload with stream |
2 | 2 |
|
3 |
| -## Getting Started |
4 |
| - |
5 |
| -First, run the development server: |
6 |
| - |
7 |
| -```bash |
8 |
| -npm run dev |
9 |
| -# or |
10 |
| -yarn dev |
11 |
| -# or |
12 |
| -pnpm dev |
13 |
| -# or |
14 |
| -bun dev |
15 |
| -``` |
| 3 | +This is a Next.js API route that facilitates file uploads from the client-side and stores them in Azure Blob Storage. It uses the `multer` library to handle multipart/form-data and streams files directly to a specified Azure Blob Storage container. |
16 | 4 |
|
17 |
| -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. |
| 5 | +## Features |
18 | 6 |
|
19 |
| -You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. |
| 7 | +- Upload multiple files at once. |
| 8 | +- Stream files directly from memory to Azure Blob Storage. |
| 9 | +- Environment variables for Azure account configuration. |
| 10 | +- Customizable file size and type constraints. |
| 11 | +- Progress tracking on file uploads (client-side feature). |
20 | 12 |
|
21 |
| -[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. |
| 13 | +## Prerequisites |
22 | 14 |
|
23 |
| -The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. |
| 15 | +Before you get started, make sure you have the following: |
| 16 | +- Node.js (v12 or higher recommended) |
| 17 | +- An Azure Storage account with access keys. |
| 18 | +- An Azure Blob Container created in your Storage account. |
24 | 19 |
|
25 |
| -This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. |
26 |
| - |
27 |
| -## Learn More |
| 20 | +## Getting Started |
28 | 21 |
|
29 |
| -To learn more about Next.js, take a look at the following resources: |
| 22 | +These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. |
30 | 23 |
|
31 |
| -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. |
32 |
| -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. |
| 24 | +### Installation |
33 | 25 |
|
34 |
| -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! |
| 26 | +1. Clone the repository: |
| 27 | +```bash |
| 28 | +git clone https://github.com/your-github-username/your-repo-name.git |
| 29 | +cd file-uploader-api |
| 30 | +``` |
| 31 | +2. Install NPM packages: |
| 32 | +```bash |
| 33 | +npm install |
| 34 | +``` |
| 35 | +3. Create a `.env.local` file in the root of your project and populate with configurations from `.env.example`. |
35 | 36 |
|
36 |
| -## Deploy on Vercel |
| 37 | +### Running the project |
| 38 | +After installation, you can start the development server: |
| 39 | +```bash |
| 40 | +npm run dev |
| 41 | +``` |
| 42 | +Open `http://localhost:3000` with your browser to see the file uploader component where you can upload files to azure blob storage. |
37 | 43 |
|
38 |
| -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. |
| 44 | +### API Reference |
| 45 | +#### POST /api/upload |
| 46 | +Accepts a multipart/form-data request with a field named files which should contain the files to be uploaded. |
39 | 47 |
|
40 |
| -Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. |
|
0 commit comments