Capture the screenshot as bytes or a file, then upload those contents to an Azure block blob. For automation running in Azure, the usual secure starting point is an Azure Storage SDK authenticated with Microsoft Entra ID and a managed identity. For a browser that uploads directly, have a trusted backend issue a narrowly scoped, short-lived shared access signature (SAS); do not put storage credentials in frontend code.
Choose an upload pattern
The right approach depends on where the screenshot is captured and which component should hold Azure credentials.
| Pattern | Best fit | Credential and data flow |
|---|---|---|
| Server-side SDK | Automated tests, scheduled jobs, or services that can reach Azure Storage | The process authenticates and uploads through an Azure SDK. In Azure, use a managed identity where possible. |
| Browser-direct with SAS | A web app where the browser should send the image bytes directly to Blob Storage | A trusted backend issues a limited SAS; the browser uses it for the upload. File bytes need not pass through the backend. |
| Azure portal | One-off manual file upload | A person selects a file and uploads it in the portal; this is not an automated pipeline. |
For an Azure-hosted automation job, the SDK and managed identity route is a straightforward default. A browser-direct design avoids relaying potentially large screenshot files through your application server, but you must build and secure the token-issuing endpoint.
Set up Azure permissions and a container
- Create or choose a storage account and blob container. A container holds blobs. You can organize them further with names containing slash-separated prefixes, often called virtual folders.
- Choose the workload identity. For an Azure-hosted job, enable a managed identity on the resource that runs the automation. Locally, developer credentials can be used by supported credential chains.
- Grant only the permissions needed. Microsoft documents Storage Blob Data Contributor as the least-privileged built-in role for creating or overwriting a block blob using Microsoft Entra authorization. Check the scope and the actual operations your application requires before assigning it.
- Keep secrets out of the capture code. Prefer Microsoft Entra ID authorization where possible. Do not commit storage account keys or expose them to a browser.
Microsoft’s Put Blob (REST API) documentation says Microsoft recommends Microsoft Entra ID with managed identities to authorize requests to Azure Storage. Microsoft’s TypeScript and JavaScript Blob Storage quickstart uses DefaultAzureCredential, which can use local developer credentials and the deployed managed identity in Azure.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →#1 Best Overall
Upload from a TypeScript or JavaScript automation job
The screenshot tool or test framework determines how you capture the image; Azure only needs the resulting bytes. The following is an Azure upload function for bytes already produced by your capture step. Install the packages with npm install @azure/storage-blob @azure/identity. Configure AZURE_STORAGE_ACCOUNT with the storage account name and AZURE_STORAGE_CONTAINER with an existing container name. Authenticate locally with a supported developer login, or run the application with its managed identity in Azure.
import { BlobServiceClient } from "@azure/storage-blob";
import { DefaultAzureCredential } from "@azure/identity";
import { readFile } from "node:fs/promises";
const account = process.env.AZURE_STORAGE_ACCOUNT;
const containerName = process.env.AZURE_STORAGE_CONTAINER;
if (!account || !containerName) {
throw new Error("Set AZURE_STORAGE_ACCOUNT and AZURE_STORAGE_CONTAINER");
}
const credential = new DefaultAzureCredential();
const service = new BlobServiceClient(
`https://${account}.blob.core.windows.net`,
credential
);
const container = service.getContainerClient(containerName);
// Replace this path with the output path used by your screenshot capture step.
const image = await readFile("./artifacts/page.png");
const blobName = `screenshots/${new Date().toISOString().replace(/[:.]/g, "-")}.png`;
const blob = container.getBlockBlobClient(blobName);
await blob.uploadData(image, {
blobHTTPHeaders: { blobContentType: "image/png" }
});
console.log(`Uploaded ${blobName}`);This example uploads a local PNG file. If your automation library returns a byte buffer instead, pass that buffer to uploadData in place of image. If your capture returns a JPEG or WebP, use the matching extension and content type. The capture-library call is intentionally separate: the Azure upload code does not depend on a particular browser, test runner, or screenshot API.
Capture output and content type
Make the format, filename extension, and blob content type agree. A PNG uploaded with an image/jpeg content type may be stored successfully but handled incorrectly by downstream viewers or consumers. If the capture tool writes to a file, read the completed file before uploading; if it returns bytes, upload those bytes directly.
Rank #2
Name blobs to preserve test runs
A block-blob upload under an existing name replaces its contents; Put Blob does not partially update an existing block blob. If each run must remain available, include a unique run identifier, timestamp, build number, or test-case key in the blob name. For example, screenshots/build-1842/homepage.png makes a run and page identifiable. The exact naming scheme is yours to define, not an Azure-required format.
If replacement is intended—for example, keeping only the latest image for a stable test target—reuse a predictable name. If preservation matters, make names unique and consider how your team will find or clean up old runs.
Let a browser upload directly with a SAS
Do not embed an account key, connection string, or broad storage credential in client-side JavaScript. Instead, the browser asks your backend for permission to upload; the backend authenticates to Azure and returns a user-delegation SAS limited to the target blob or container and the required action. The browser then sends the screenshot bytes to Blob Storage using that SAS.
Rank #3
- Browser requests upload authorization. Send the intended blob name and any required content metadata to your application backend.
- Backend validates the request. Apply your app’s authentication and authorization rules, constrain the permitted path and upload operation, and issue a short-lived user-delegation SAS.
- Browser uploads the bytes. Use the SAS URL for the Blob Storage upload. Do not log or expose the SAS longer than necessary.
- Backend or application confirms completion. Treat the upload as successful only after checking the response, and handle expired tokens by requesting a new SAS through the backend.
Microsoft’s browser file upload tutorial demonstrates a backend API that issues a user-delegation SAS for direct browser uploads. Its example describes SAS validity of 10–60 minutes with specific permissions; those are example values in that tutorial, not a universal requirement. Set the lifetime and permissions for your own risk and workflow.
Upload manually in the Azure portal
For a one-time check or an isolated artifact, use the storage account’s container upload workflow in the Azure portal: open the target container, choose the upload action, select the screenshot file, optionally enter a virtual folder, and start the upload. Microsoft documents this workflow in its portal quickstart. It is useful for manual recovery or inspection, but it does not replace SDK or SAS-based automation.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Or skip the browser setup
If you need a screenshot capture endpoint rather than building browser automation and upload plumbing, ScreenshotNeo returns a screenshot or PDF from a single GET request. For example, to retrieve a WebP screenshot from a shell:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. Then upload the returned file to Azure using the SDK approach above. Cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots, and the Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for ScreenshotNeo free.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshoot common failures
- Authorization failure: Confirm the application is using the intended identity, that the role assignment is on the correct account or container scope, and that it includes the required data-plane write permission. A management-plane role alone may not grant blob data access.
- Credential works locally but not in Azure: Check that the deployed resource has its managed identity enabled and that the role is assigned to that identity. Allow for role assignment propagation, then retry.
- Container not found: Verify the configured container name and that it exists in the storage account named by the endpoint. Container names and account settings must match the deployment environment.
- SAS upload returns unauthorized: The SAS may have expired, omit the needed write permission, target a different blob, or have a validity window inconsistent with the request. Have the backend issue a new, appropriately scoped token rather than widening permissions indiscriminately.
- Upload succeeds but the image does not display as expected: Check that the stored bytes are the complete screenshot and that the blob content type and filename extension match the image format.
- Earlier screenshot disappeared: The new upload likely reused the same block-blob name. Use a unique run or capture identifier when retaining history is required.
- Portal upload works but automation does not: The portal user’s permissions do not prove that the job’s managed identity has the required data role. Diagnose using the identity used by the automated process.
Reliability, performance, and cost considerations
Keep capture and storage errors distinguishable in logs: record the run ID, blob name, capture result, and Azure response or exception without logging SAS tokens or secrets. This makes it easier to tell a failed page capture from a valid image that could not be stored.
For a screenshot pipeline, capture only what downstream debugging needs. Full-page images and high-resolution images can increase transfer volume and storage use; a stable naming policy also makes later retention or cleanup more tractable. The Azure upload patterns described here do not establish a specific storage price, throughput target, or retention policy. Check the current Azure pricing and your account configuration for those figures rather than assuming a fixed cost per screenshot.
Recommended Free Tools
Frequently asked questions
Does a screenshot need a special Azure blob type?
For the upload workflow described here, store the image contents as a block blob. Match the content type to the actual screenshot format so consuming software can identify it correctly.
Best Value
Can the same code work on a developer machine and in Azure?
DefaultAzureCredential is designed to use available credentials across supported environments, including developer credentials locally and managed identity when deployed in Azure. The exact local login and deployed identity configuration still need to be set up for your environment.
Should the screenshot pass through my application server?
Not necessarily. A server-side SDK upload is simple when the capture job itself runs on a trusted server. A browser can upload directly with a backend-issued SAS when avoiding a second transfer through the application server is useful.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
