title: How to visualize filestorage content of firebase in table at the view?
body: <p>I want to represent the downloadUrl's of firebase storage in datatable where we can see the files and download to the computer.</p>
  
  <p>At the moment i have successfully get all files and the links , but how to get this links in table where users can click on it.</p>
  
  <p>The function which get all firebase storage:</p>
  
  <pre><code>showFileUrl(){
  
     storageRef.child('UploadedFiles/').listAll().then(function(res) {
        res.items.forEach(function(folderRef) {
          folderRef.getDownloadURL().then(function(url) {
  
            console.log('Got download URL',url);
           });
          console.log("folderRef",folderRef.toString());
          var blob = null;
          var xhr = new XMLHttpRequest(); 
          xhr.open("GET", "downloadURL"); 
          xhr.responseType = "blob";       
          xhr.onload = function() 
          {
          blob = xhr.response;//xhr.response is now a blob object
          console.log("BLOB",blob)
  
          // var path = storageRef.child('UploadedFiles/').getDownloadURL(folderRef);
          // var zip = new JSZip();
          // zip.file(path,blob);
      }
  
          xhr.send();
        });
  
      }).catch(function(error) {
        console.log(error);
      });
    }
  </code></pre>
  
  <p>View tags:</p>
  
  <pre><code>  &lt;table&gt;
            &lt;tbody&gt;
  
                {urls.map((user) =&gt; {
                              return (
                                &lt;tr key={Math.random()}&gt;
                                    &lt;td&gt;{user}&lt;/td&gt;
                                &lt;/tr&gt;);}
                )}     
          &lt;/tbody&gt;
        &lt;/table&gt;
  </code></pre>
  
  <p>View output:</p>
  
  <p><a href="https://i.stack.imgur.com/EydZD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EydZD.png" alt="enter image description here"></a></p>