Silverbullet069/js-e2e-browser-file-upload-storage-blob

File upload in browser using React client (TS) to Azure Storage Blobs.

page_type	languages	name	description	products
sample	javascript typescript nodejs	JavaScript end-to-end client file upload to Azure Storage Blobs	Locally build and deploy client application to an Azure Static Web App with a GitHub action, analyze image with Cognitive Services Computer Vision.	azure azure-storage azure-portal vs-code azure-computer-vision azure-app-service-static

JavaScript end-to-end client file upload to Azure Storage Blobs

This sample project is a TypeScript React (create-react-app) framework client app with an HTML form to select a file for upload to Azure Storage Blobs.

The user:

• selects an image from the file system

• uploads the image to Storage Blobs

• Read Tutorial - The tutorial demonstrates how to load and run the project locally with VSCode. The tutorial includes creating a Storage resource, SAS token and CORS configuration.

Sample application

The React (create-react-app) client app consists of the following elements:

• React app hosted on port 3000
• uploadToBlob.ts using @azure/storage-blob client library to create Blob container and upload file

Features

This project framework provides the following features:

• Create Azure Storage resource
• Generate SAS token for Storage resource
• Set Storage resource CORS
• Select and upload file to Azure Storage Blob Container

Getting Started

1. Clone or download repo.

2. Create Azure Storage resource - using /scripts/newStorageService.js. This resource name is the storageAccountName.

3. Generate SAS Token for Storage resource - using /scripts/az-storage-generte-sas.sh. This value is the sasToken.

4. Configure CORS for browser - using /scripts/az-storage-cors-add.sh

   Settings for CORS:

   • Allowed origins: *
   • Allowed methods: DELETE, GET, HEAD, MERGE, POST, OPTIONS, and PUT
   • Allowed headers: *
   • Exposed headers: *
   • Max age: 86400

5. Install dependencies:

   npm install

   To run the React app, you need the following Azure SDK client npm packages:

   • @azure/identity
   • @azure/storage-blob

   A third Azure package, @azure/arm-storage, is listed in the package.json strictly for use by the scripts/newStorageService.js file to create a new Azure Storage resource.

6. Create a file name .env at the root of the project.

7. Add two required variables with their storage values:

   REACT_APP_STORAGESASTOKEN=
   REACT_APP_STORAGERESOURCENAME=
   

   React builds the static files with these variables.

8. If the token begins with a question mark, remove the ?. The code file provides the ? for you so you don't need it in the token.

9. Start project:

   npm start

10. View project in browser, http://localhost:3000.

11. Select image then select Upload!.

    Page displays images in container.

Prerequisites

• Git, if cloning
• Node.js and NPM
• Web browser
• Azure subscription to create resource on

Installation

1. Install the sample's dependencies:

    npm install

2. Run the command to run the web app.

   npm start

3. Open a web browser and use the following url to view the client app on your local computer.

   http://localhost:3000/

Troubleshooting

If you received an error or your file doesn't upload to the container, check the following:

• Recreate your SAS token, making sure that your token is created at the Storage resource level and not the container level. Copy the new token into the code at the correct location.
• Check that the token string you copied into the code doesn't contain the ? (question mark) at the beginning of the string.
• Verify your CORS setting for your Storage resource.

Additional scripts

• Create Azure Storage Blob from JavaScript file: scripts/newStorageService.js
• Set CORS for service using Azure CLI script: scripts/az-storage-cors-add.sh
• Generate SAS Token using Azure CLI script: scripts/az-storage-generate-sas.sh

Images

The /images folder includes images for upload.