How to upload folder into azure automatically?

五迷三道 提交于 2019-12-02 13:15:53

I see you were using Azure Storage JavaScript Client Library for Browsers to automatically upload all files under a folder and its all sub-folders in brower.

Here is my sample code which refer to the offical sample Azure Storage JavaScript Client Library Sample for Blob Operations to set CORS rules and get the sas token from Azure Storage Explorer, and it works for me.

<html>
<head>
<script src="https://dmrelease.blob.core.windows.net/azurestoragejssample/bundle/azure-storage.blob.js"></script>
</head>
<body>
<input type='file' id="files" name="files" multiple webkitdirectory directory />
<script>
// Render via server-side to pass the value of account name and sas token, even container name.
var accountName = '<your storage account>';
var SasToken = '<sas token like sv=2018-03-28&ss=bfqt&srt=sco&sp=rwdl&st=2019-04-11T06%3A48%3A24Z&se=2019-04-12T06%3A48%3A24Z&sig=xxxxxxxxxxxxxxxxxxxx'
var blobUri = 'https://' + accountName + '.blob.core.windows.net';
var blobService = AzureStorage.Blob.createBlobServiceWithSas(blobUri,SasToken);
var containerName = '<your container name>';
document.getElementById("files").addEventListener("change", function(event) {
    var files = event.target.files;
    console.log(files)
    for(var i in files) {
        blobService.createBlockBlobFromBrowserFile(containerName, files[i].webkitRelativePath, files[i], {blockSize : files[i].size}, function(error, result, response) {
            finishedOrError = true;
            if (error) {
                // Upload blob failed
            } else {
                // Upload successfully
            }
        })
    }
});
</script>
</body>
</html>

Notes:

  1. At here, I use file.webkitRelativePath (only works in Chrome or other browsers based on chromium, please refer to https://developer.mozilla.org/en-US/docs/Web/API/File/webkitRelativePath) instead of file.name, because it includes parent-folder path.

  2. Considering for security, I suggest to reduce the expire time for sas token as possible as you can and to render the HTML page for account name and sas token dynamically on server-side.

Otherwise, you can try to upload files to Azure Storage on server-side.

Front Page index.html:

<form action='/upload' enctype="multipart/form-data" method="POST">
    <input type='file' id="files" name="files" multiple webkitdirectory directory />
    <input type="submit" value="Submit" />
</form>

Server-side using express and multer-azure-storage:

var azure = require('azure-storage');
var accountName = '<your account name>';
var accountKey = '<your account key>';
const express = require('express');
const app = express();
const port = 3000;
var multer  = require('multer');
var MulterAzureStorage = require('multer-azure-storage');
var upload = multer({
    preservePath: true,
  storage: new MulterAzureStorage({
    azureStorageConnectionString: 'DefaultEndpointsProtocol=https;AccountName='+accountName+';AccountKey='+accountKey+';EndpointSuffix=core.windows.net',
    containerName: '<your container name>',
    containerSecurity: 'blob',
    fileName: function(file) {
        return file.originalname; // file.originalname includes parent-folder path name
    }
  })
});
app.use(express.static('public'));
app.post('/upload', upload.any(), function(req, res, next) {
    console.log(req.files);
    res.send('OK');
});

app.listen(port, () => console.log(`Example app listening on port ${port}!`));
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!