Cloud Storage Account Management

• Nov 24, 2023
• 2 minutes to read

This topic describes how to connect the UploadControl, FileManager and HtmlEditor components to popular cloud storage services such as Amazon, Azure, Dropbox, Google Drive and OneDrive. This functionality allows end users to work with files stored on a cloud storage service - as explained in the steps below.

1. Use the following methods of the AccountManager class to register a cloud storage account within the Global.asax file in the Application_Start event handler.

   • AccountManager.Register
   • AccountManager.RegisterAzure
   • AccountManager.RegisterAmazon
   • AccountManager.RegisterDropbox
   • AccountManager.RegisterGoogleDrive
   • AccountManager.RegisterOneDrive

   The example below registers cloud storage accounts in the Global.asax file.

   C#

       void Application_Start(object sender, EventArgs e) {
       DevExpress.Web.AccountManager.RegisterAzure("Azure1", "StorageName1", "AccessKey1");
       DevExpress.Web.AccountManager.RegisterAmazon("Amazon1", "AccessKeyID1", "SecretAccessKey1");
       DevExpress.Web.AccountManager.RegisterDropbox("Dropbox1", "AccessTokenValue1");
       DevExpress.Web.AccountManager.RegisterGoogleDrive("FileManagerGoogleDriveAccount", "[e-mail]", "..MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCVoaYrE7fEgu...");
       DevExpress.Web.AccountManager.RegisterGoogleDrivePersonal("FileManagerGoogleDrivePersonalAccount", "customClientID", "..MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCVoaYrE7fEgu...");
       DevExpress.Web.AccountManager.RegisterOneDrive("FileManagerOneDriveAccount", "f49c387c-1c25-4f27-855b-dfd3fd3", "..+SKN3n5H0/KZVb6c=...");
   }
   

2. Use a component’s AccountName property to specify the storage account to be used by a component. The following table lists AccountName properties for each component.

   Component	Path to AccountName
   UploadControl	UploadControlSettings.AmazonSettings.AccountName UploadControlSettings.AzureSettings.AccountName UploadControlSettings.DropboxSettings.AccountName UploadControlSettings.GoogleDriveSettings.AccountName UploadControlSettings.GoogleDrivePersonalSettings.AccountName UploadControlSettings.OneDriveSettings.AccountName UploadControlSettings.OneDrivePersonalSettings.AccountName
   FileManager	FileManagerAmazonProviderSettings.AccountName FileManagerAzureProviderSettings.AccountName FileManagerDropBoxProviderSettings.AccountName FileManagerGoogleDriveProviderSettings.AccountName FileManagerGoogleDrivePersonalProviderSettings.AccountName FileManagerOneDriveProviderSettings.AccountName FileManagerOneDrivePersonalProviderSettings.AccountName
   HtmlEditor	HtmlEditorSettings.SettingsDialogs.InsertMediaDialog.SettingsMediaSelector.SettingsAmazon.AccountName HtmlEditorSettings.SettingsDialogs.InsertMediaDialog.SettingsMediaSelector.SettingsAzure.AccountName HtmlEditorSettings.SettingsDialogs.InsertMediaDialog.SettingsMediaSelector.SettingsDropbox.AccountName HtmlEditorSettings.SettingsDialogs.InsertMediaDialog.SettingsMediaUpload.AmazonSettings.AccountName HtmlEditorSettings.SettingsDialogs.InsertMediaDialog.SettingsMediaUpload.AzureSettings.AccountName HtmlEditorSettings.SettingsDialogs.InsertMediaDialog.SettingsMediaUpload.DropboxSettings.AccountName The placeholder Media can take the following values: Audio, Flash, Image, or Video.

Razor

@Html.DevExpress().UploadControl(settings => {
    settings.Name = "uploadControl";

    settings.UploadStorage = "Azure";
    settings.AzureSettings.AccountName = "Azure1";
    //...
}).GetHtml()

@Html.DevExpress().HtmlEditor(settings => {
    settings.Name = "htmlEditor";

    settings.SettingsDialogs.InsertImageDialog.SettingsImageSelector.Enabled = true;
    settings.SettingsDialogs.InsertImageDialog.SettingsImageSelector.ProviderType = FileManagerProviderType.Dropbox;
    settings.SettingsDialogs.InsertImageDialog.SettingsImageSelector.SettingsDropbox.AccountName = "Dropbox1";

    settings.SettingsDialogs.InsertImageDialog.SettingsImageUpload.UploadStorage = UploadFileStorageType.Dropbox;
    settings.SettingsDialogs.InsertImageDialog.SettingsImageUpload.DropboxSettings.AccountName = "Dropbox1";
    //...
}).GetHtml()

@Html.DevExpress().FileManager(settings => {
    settings.Name = "fileManager";
    //...
    }
).BindToFileSystemProvider(CloudProviderHelper.CreateAmazonProvider(Model)).GetHtml()

CloudProviderHelper.cs

static AmazonFileSystemProvider CreateAmazonProvider() {
    var provider = new AmazonFileSystemProvider("/");
    provider.AccountName = "FileManagerAmazonAccount";
    provider.BucketName = "dxdemobucket";
    return provider;
}