I haven't been able to get a working example. My following example tells me that the createBlockBlob method is undefined.
Note: I've also tried createBlockBlobFromLocalFile and passed in the filename and still no luck.
import React from 'react';
var storage = require('azure-storage');
const CONNECTION_STRING = "MYCONNECTIONSTRING";
const BlockBlobContainerName = "MYCONTAINERNAME";
const BlobName = "MYBLOBNAME";
class NumberUploader extends React.Component {
render() {
return (
<div className="App">
<input type="file" onChange={ (e) => this.buttonClick(e.target.files[0]) } />
</div>
);
}
buttonClick(myFile) {
var blobService = storage.createBlobService(CONNECTION_STRING);
blobService.createContainerIfNotExists(BlockBlobContainerName, function (error) {
if (error) {
console.log("error creating container");
}
});
blobService.createBlockBlobFromBrowserFile(BlockBlobContainerName, BlobName, myFile, function (error, result, response) {
if (error) {
alert('Upload failed, open browser console for more detailed info.');
console.log(error);
} else {
setTimeout(function () { // Prevent alert from stopping UI progress update
alert('Upload successfully!');
}, 1000);
}
});
}
};
export default NumberUploader;
Edit: Visual Studio provides a really good web app template running .Net Core serving React. I was able to use the following code on the server to get the SASToken and pass it to React. From there, you can use the browser file upload method with the SAS.
static string GetAccountSASToken()
{
// To create the account SAS, you need to use your shared key credentials. Modify for your account.
const string ConnectionString = "GET_STRING_FROM_STORAGE_ACCOUNT";
CloudStorageAccount storageAccount = CloudStorageAccount.Parse(ConnectionString);
// Create a new access policy for the account.
SharedAccessAccountPolicy policy = new SharedAccessAccountPolicy()
{
Permissions = SharedAccessAccountPermissions.Read | SharedAccessAccountPermissions.Write | SharedAccessAccountPermissions.List,
Services = SharedAccessAccountServices.Blob | SharedAccessAccountServices.File,
ResourceTypes = SharedAccessAccountResourceTypes.Service,
SharedAccessExpiryTime = DateTime.UtcNow.AddHours(24),
Protocols = SharedAccessProtocol.HttpsOnly
};
// Return the SAS token.
string token = storageAccount.GetSharedAccessSignature(policy);
return token;
}
createBlockBlobFromBrowserFileare you getting the same error message thatcreateBlockBlobmethod is undefined? What's the version ofazure-storageSDK you're using? Also, I am assuming that you're using a SAS Token.