I am developing a web app that will upload the files on azure storage. For this I used
Manage blobs with JavaScript v12 SDK in a browser> https://learn.microsoft.com/en-us/azure/storage/blobs/quickstart-blobs-javascript-browser
I work on Apache Xampp where I have a PHP file having button clicking on which should upload files. I want that when a user clicks on "upload" button then the above upload to blob storage gets appear on screen.
https://jsfiddle.net/mahajaved/p059vzka/3/ Hero is the demo, I want that in place of the div "uploaddiv", the html file appears and it works exactly the same as it is doing now.
HTML file is:
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<button id="create-container-button">Create container</button>
<button id="delete-container-button">Delete container</button>
<button id="select-button">Select and upload files</button>
<input type="file" id="file-input" multiple style="display: none;" />
<button id="list-button">List files</button>
<button id="delete-button">Delete selected files</button>
<p><b>Status:</b></p>
<p id="status" style="height:160px; width: 593px; overflow: scroll;" />
<p><b>Files:</b></p>
<select id="file-list" multiple style="height:222px; width: 593px; overflow: scroll;" />
</body>
<script src="./index.js"></script>
</html>
JavaScript file is:
// index.js
const { BlobServiceClient } = require("@azure/storage-blob");
// Now do something interesting with BlobServiceClient
const createContainerButton = document.getElementById("create-container-button");
const deleteContainerButton = document.getElementById("delete-container-button");
const selectButton = document.getElementById("select-button");
const fileInput = document.getElementById("file-input");
const listButton = document.getElementById("list-button");
const deleteButton = document.getElementById("delete-button");
const status = document.getElementById("status");
const fileList = document.getElementById("file-list");
const reportStatus = message => {
status.innerHTML += `${message}<br/>`;
status.scrollTop = status.scrollHeight;
}
// Update <placeholder> with your Blob service SAS URL string to establish connection between our application and storage account
const blobSasUrl = "https://azurefileupload.blob.core.windows.net/?sv=2020-02-10&ss=b&srt=sco&sp=rwdlactfx&se=2021-06-05T16:49:19Z&st=2021-06-05T08:49:19Z&spr=https&sig=D%2FggJPtFqLm7s13ukQkmnvl3M24OKxPrUAvkyunOG%2Bc%3D";
// Create a new BlobServiceClient
const blobServiceClient = new BlobServiceClient(blobSasUrl);
// Create a unique name for the container by
// appending the current time to the file name
const containerName = "filecontainer";
const hostName = "https://azurefileupload.blob.core.windows.net";
// Get a container client from the BlobServiceClient
const containerClient = blobServiceClient.getContainerClient(containerName);
const createContainer = async () => {
try {
reportStatus(`Creating container "${containerName}"...`);
await containerClient.create();
reportStatus(`Done.`);
} catch (error) {
reportStatus(error.message);
}
};
const deleteContainer = async () => {
try {
reportStatus(`Deleting container "${containerName}"...`);
await containerClient.delete();
reportStatus(`Done.`);
} catch (error) {
reportStatus(error.message);
}
};
createContainerButton.addEventListener("click", createContainer);
deleteContainerButton.addEventListener("click", deleteContainer);
const listFiles = async () => {
fileList.size = 0;
fileList.innerHTML = "";
try {
reportStatus("Retrieving file list...");
let iter = containerClient.listBlobsFlat();
let blobItem = await iter.next();
while (!blobItem.done) {
fileList.size += 1;
// fileList.innerHTML += `<option>${blobItem.value.name}</option>`;
fileList.innerHTML += `<option>${blobService.getUrl(containerName,blobItem.value.name,null,hostName)}</option>`;
blobItem = await iter.next();
}
if (fileList.size > 0) {
reportStatus("Done.");
} else {
reportStatus("The container does not contain any files.");
}
} catch (error) {
reportStatus(error.message);
}
};
listButton.addEventListener("click", listFiles);
const uploadFiles = async () => {
try {
reportStatus("Uploading files...");
const promises = [];
for (const file of fileInput.files) {
const blockBlobClient = containerClient.getBlockBlobClient(file.name);
promises.push(blockBlobClient.uploadBrowserData(file));
}
await Promise.all(promises);
reportStatus("Done.");
listFiles();
}
catch (error) {
reportStatus(error.message);
}
}
selectButton.addEventListener("click", () => fileInput.click());
fileInput.addEventListener("change", uploadFiles);
const deleteFiles = async () => {
try {
if (fileList.selectedOptions.length > 0) {
reportStatus("Deleting files...");
for (const option of fileList.selectedOptions) {
await containerClient.deleteBlob(option.text);
}
reportStatus("Done.");
listFiles();
} else {
reportStatus("No files selected.");
}
} catch (error) {
reportStatus(error.message);
}
};
deleteButton.addEventListener("click", deleteFiles);
Launch.json is:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch chrome against localhost",
"url": "http://localhost:1234/index.html",
"webRoot": "${workspaceFolder}"
}
]
}
My question is little messed up, but I am having trouble explaining it. I want files being uploaded to be saved on azure storage account. I found this method but have no idea how to integrate it in my application.
