How To Upload Folder Into Azure Automatically?
Solution 1:
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><scriptsrc="https://dmrelease.blob.core.windows.net/azurestoragejssample/bundle/azure-storage.blob.js"></script></head><body><inputtype='file'id="files"name="files"multiplewebkitdirectorydirectory /><script>// Render via server-side to pass the value of account name and sas token, even container name.var accountName = '<your storage account>';
varSasToken = '<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:
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 offile.name
, because it includes parent-folder path.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');
varMulterAzureStorage = require('multer-azure-storage');
var upload = multer({
preservePath: true,
storage: newMulterAzureStorage({
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}!`));
Post a Comment for "How To Upload Folder Into Azure Automatically?"