Lists all Blobs inside Azure Container with directory-level support using web front-end

Question

I'm currently working on developing some set of codes to display all blobs inside specified Azure Container using web front-end. I'm expecting the final output to be something like this:

I started by creating a dummy storage account and populates it with some dummy files for me to play around with.

https://alicebob.blob.core.windows.net/documents  
├── docx  
│   ├── 201801_Discussion.docx  
│   ├── 201802_Discussion.docx  
├── xlsx  
│   ├── 201801_Summary.xlsx  
│   ├── 201802_Summary.xlsx  
│   ├── 201803_Summary.xlsx  
├── 201801_Review.pdf  
├── 201802_Review.pdf  
├── 201803_Review.pdf

To develop file listing function, I'm using Azure Storage JavaScript client library from here and put all the necessary codes (.html and .js files) in Azure Static website $web container and set index.html as Index document name and Error document path in the Static website configuration.

https://alicebob.z23.web.core.windows.net/  
├── azure-storage.blob.min.js  
├── azure-storage.common.min.js  
├── index.html

The problem is that the function to do the listing is only either listBlobsSegmentedWithPrefix or listBlobDirectoriesSegmentedWithPrefix. So, in my case, I assume it wouldn't work straightforwardly to list all the blobs and directories in a well-structured / tree format.

My current approach is that I trick the code to keep using listBlobDirectoriesSegmentedWithPrefix until there is no more directory to list inside, then continue to list using listBlobsSegmentedWithPrefix

So far I'm quite satisfied that my code can list all the Blobs at the leaf-level and also list all the directories if it isn't on the leaf-level. You can take a look at the blob listing here and feel free to go for 'View Source' to see the codes I built so far.

The only problem that I face is that this set of code fails to list the Blobs if it wasn't on the leaf-level. For example, it fails to list these blobs on alicebob storage account:

├── 201801_Review.pdf  
├── 201802_Review.pdf  
├── 201803_Review.pdf

This is an expected issue as I'm not running listBlobsSegmentedWithPrefix if it isn't on the leaf-level. The reason is that it will produces the output with something like this which isn't what I want:

├── docx/201801_Discussion.docx  
├── docx/201802_Discussion.docx  
├── xlsx/201801_Summary.xlsx  
├── xlsx/201802_Summary.xlsx  
├── xlsx/201803_Summary.xlsx  
├── 201801_Review.pdf  
├── 201802_Review.pdf  
├── 201803_Review.pdf

Any suggestion on how to overcome this issue? The real implementation would involves a huge amount of data so I think a simple if-then-else wouldn't be efficient on this case.

sorry for the long description but I just want to describe my problem as clear as possible :)

Jerry Liu · Accepted Answer · 2018-10-30 09:02:01Z

6

There's an option called delimiter when listing blobs. Let's get down to code.

blobService.listBlobsSegmentedWithPrefix('documents',null,null,{delimiter:'/'},(error,result,response)=>{
    console.log(result);
    console.log(response.body.EnumerationResults.Blobs.BlobPrefix);
})

With delimiter /, listing operation returns results of two parts.

result, contains info of blobs under the root directory of container, e.g. 201801_Review.pdf, etc. in your case.
BlobPrefix in response body, contains directory names of single level with delimiter.
```
[ { Name: 'docx/' }, { Name: 'xlsx/' } ]
```

Use BlobPrefix as prefix, we can continue listing content of current subdirectory.

    blobService.listBlobsSegmentedWithPrefix('documents','docx/',null,{delimiter:'/'},(error,result,response)=>{
        console.log(result);
        console.log(response.body.EnumerationResults.Blobs.BlobPrefix);
    })

Basically point 1 result is enough, you don't necessarily have to use BlobPrefix to refactor your code. See more info in section Using a Delimiter to Traverse the Blob Namespace of list blobs.

answered Oct 30, 2018 at 9:02

Jerry Liu

17.9k4 gold badges47 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andi Ariffin Over a year ago

Sorry for the delay, yes the delimiter option works perfectly on my case, thanks! Anyway for that BlobPrefix option I've already implemented on my code by parsing it from the URL using getDir function (https://alicebob.z23.web.core.windows.net/{BlobPrefix}) so that I can continue listing the rest of the subdirectories.

Jerry Liu Over a year ago

@AndiAriffin You are welcome. Could you accept the answer for others to refer?

Ari · Accepted Answer · 2019-03-16 00:32:06Z

0

You can also do this with out the overhead of the whole storage api using a fetch request as follows.

  fetch("https://cvworkshop.blob.core.windows.net/telaviv-bw/?restype=container&comp=list")
    .then(response => response.text())
    .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
    .then(data => console.log(data));

answered Mar 16, 2019 at 0:32

Ari

5834 silver badges19 bronze badges

Collectives™ on Stack Overflow

Lists all Blobs inside Azure Container with directory-level support using web front-end

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related