---
title: Quickstart: Upload, list, and delete blobs with Azure Storage using JavaScript and HTML in the Browser
description: Learn to use an instance of BlobService to upload, list, and delete blobs using JavaScript in an HTML page.
services: storage
keywords: storage, javascript, html
author: craigshoemaker
manager: jeconnoc
ms.custom: mvc
ms.service: storage
ms.author: cshoe
ms.date: 03/31/2018
ms.topic: quickstart
# Customer intent: As a web application developer I want to interface with Azure Blob storage entirely on the client so that I can build a SPA application that is able to upload and delete files on blob storage.
---
This quickstart demonstrates how to manage blobs from code running entirely in the browser along with the required security measures to ensure protected access to your blob storage account. To complete this quickstart, you need an Azure subscription.
[!INCLUDE storage-quickstart-tutorial-create-account-portal]
Once your storage account is created, you need a few security-related values in order to create a security token. From the portal, you can copy the values into a text editor for later use.
Select the storage account in the portal and find the Settings section. Under Settings, select Access keys and set aside the Storage account name and the Key value under the key1 heading. (You can use the "copy" button just to the right of the input box to copy the value to your clipboard.)
Before your web application can access a blob storage from the client, the account must be configured to enable cross-origin resource sharing, or CORS.
Return to the Azure portal and select your storage account. To define a new CORS rule, return to the Settings section and click on the CORS link. Next, click the Add button to open the Add CORS rule window. For this quickstart, you create an open CORS rule:
The following table describes each CORS setting and explains the values used to define the rule.
| Setting | Value | Description |
|---|---|---|
| Allowed origins | * | Accepts a comma-delimited list of domains set as acceptable origins. Setting the value to * allows all domains access to the storage account. |
| Allowed verbs | delete, get, head, merge, post, options, and put | Lists the HTTP verbs allowed to execute against the storage account. For the purposes of this quickstart, select all available options. |
| Allowed headers | * | Defines a list of request headers (including prefixed headers) allowed by the storage account. Setting the value to * allows all headers access. |
| Exposed headers | * | Lists the allowed response headers by the account. Setting the value to * allows the account to send any header. |
| Maximum age (seconds) | 86400 | The maximum amount of time the browser caches the preflight OPTIONS request. A value of 86400 allows the cache to remain for a full day. |
Important
Ensure any settings you use in production expose the minimum amount of access necessary to your storage account in order to maintain secure access. In production, SAS tokens should be generated on the server and sent to the HTML page in order pass back to Azure Blob Storage.
The CORS settings described here are appropriate for a quickstart as it defines a lenient security policy. These settings, however, are not recommended for a real-world context.
Next, you use the Azure cloud shell to create a security token.
[!INCLUDE Open the Azure cloud shell]
The shared access signature (SAS) is used by the code running in the browser to authenticate requests to Blob storage. By using the SAS, the client can authenticate without having the account access key or connection string. For more information on SAS, see Using shared access signatures (SAS).
You can create a SAS using the Azure CLI through the Azure cloud shell. The following table describes the parameters you need to provide values for in order to generate a SAS.
| Parameter | Description | Placeholder |
|---|---|---|
| expiry | The expiration date of the access token in YYYY-MM-DD format. Enter tomorrow's date for use with this quickstart. | FUTURE_DATE |
| account-name | The storage account name. Use the name set aside in an earlier step. | YOUR_STORAGE_ACCOUNT_NAME |
| account-key | The storage account key. Use the key set aside in an earlier step. | YOUR_STORAGE_ACCOUNT_KEY |
The following script used the Azure CLI to create a SAS that you can pass to a JavaScript blob service.
Note
For best results remove the exta spaces between parameters before pasting the command into the Azure cloud shell.
az storage account generate-sas
--permissions racwdl
--resource-types sco
--services b
--expiry FUTURE_DATE
--account-name YOUR_STORAGE_ACCOUNT_NAME
--account-key YOUR_STORAGE_ACCOUNT_KEYYou may find the series of values after each parameter a bit cryptic. These parameter values are taken from the first letter of their respective permission. The following table explains where the values come from:
| Parameter | Value | Description |
|---|---|---|
| permissions | racwdl | This SAS allows read, append, create, write, delete, and list capabilities. |
| resource-types | sco | The resources affected by the SAS are service, container, and object. |
| services | b | The service affected by the SAS is the blob service. |
Now that the SAS is generated, copy the value returned in the console into your text editor. You use this value in an upcoming step.
Important
In production, always pass SAS tokens using SSL.
The Azure Storage JavaScript client libraries will not work directly from the file system and must be served from a web server. Therefore, the following steps detail how to use simple local web server with Node.js.
Note
This section shows you how to create a local web server which requires Node.js being installed on your machine. If you do not wish to install Node.js then you can use any other means of running a local web server.
First, create a new folder for your project and name it azure-blobs-javascript. Next, open a command prompt in the azure-blobs-javascript folder and prepare the application to install the web server module by entering the following command:
npm init -yRunning init adds files needed to help install a web server module. To install the module, enter the following command:
npm i http-serverNext, edit the package.json file and replace the existing scripts definition with the following code snippet:
"scripts": {
"start": "http-server"
}Finally, in your command prompt, enter npm start to start the web server:
npm startDownload the JavaScript client libraries, extract the contents of the zip, and place the script files from the bundle folder in a folder named scripts.
Create an HTML page at the root of the azure-blobs-javascript folder and name it index.html. Once the page is created, add the following markup to the page.
<!DOCTYPE html>
<html>
<body>
<button id="create-button">Create Container</button>
<input type="file" id="fileinput" />
<button id="upload-button">Upload</button>
<button id="list-button">List</button>
<button id="delete-button">Delete</button>
</body>
<script src="scripts/azure-storage.blob.min.js"></script>
<script>
// Blob-related code goes here
</script>
</html>This markup adds the following to the page:
- a reference to scripts/azure-storage.blob.js
- buttons used to create a container, upload, list, and delete blobs
- an INPUT element used to upload a file
- a placeholder for storage-specific code
The BlobService provides an interface to Azure Blob Storage. To create an instance of the service, you need to provide the storage account name and the SAS generated in a previous step.
const account = {
name: YOUR_STORAGE_ACCOUNT_NAME,
sas: YOUR_SAS
};
const blobUri = 'https://' + account.name + '.blob.core.windows.net';
const blobService = AzureStorage.Blob.createBlobServiceWithSas(blobUri, account.sas);With the blob service created you can now create a new container to hold an uploaded blob. The createContainerIfNotExists method creates a new container and does not return an error if the container already exists.
document.getElementById('create-button').addEventListener('click', () => {
blobService.createContainerIfNotExists('mycontainer', (error, container) => {
if (error) {
// Handle create container error
} else {
console.log(container.name);
}
});
});To upload a blob from an HTML form, you first get a reference to the selected file via the files array of an INPUT element that has the type set to file.
From script, you can reference the HTML element and pass the selected file to the blob service.
document.getElementById('upload-button').addEventListener('click', () => {
const file = document.getElementById('fileinput').files[0];
blobService.createBlockBlobFromBrowserFile('mycontainer',
file.name,
file,
(error, result) => {
if(error) {
// Handle blob error
} else {
console.log('Upload is successful');
}
});
});The method createBlockBlobFromBrowserFile uses the browser file directly to upload to a blob container.
Once you have uploaded a file into the blob container, you access a list of blobs in the container using the listBlobsSegmented method.
document.getElementById('list-button').addEventListener('click', () => {
blobService.listBlobsSegmented('mycontainer', null, (error, results) => {
if (error) {
// Handle list blobs error
} else {
results.entries.forEach(blob => {
console.log(blob.name);
});
}
});
});You can delete the blob you uploaded by calling deleteBlobIfExists.
document.getElementById('delete-button').addEventListener('click', () => {
var blobName = YOUR_BLOB_NAME;
blobService.deleteBlobIfExists('mycontainer', blobName, (error, result) => {
if (error) {
// Handle delete blob error
} else {
console.log('Blob deleted successfully');
}
});
});Warning
In order for this code sample to work, you need to provide a string value for blobName.
To clean up the resources created during this quickstart, return to the Azure portal and select your storage account. Once selected, you can delete the storage account by going to: Overview > Delete storage account.
Downloading blobs using the JavaScript client libraries requires that a server-issued SAS is generated for the client script. The client script then passes the SAS back to Azure Storage in order to enable a blob download.
[!div class="nextstepaction"] Using blob storage Client Libraries to download blobs