Cloud Storage Account Management

  • 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.

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

        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", "custom-service-account@api-project-82456107.iam.gserviceaccount.com", "..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

    Run Demo

    UploadControlSettings.AmazonSettings.AccountName

    UploadControlSettings.AzureSettings.AccountName

    UploadControlSettings.DropboxSettings.AccountName

    UploadControlSettings.GoogleDriveSettings.AccountName

    UploadControlSettings.GoogleDrivePersonalSettings.AccountName

    UploadControlSettings.OneDriveSettings.AccountName

    UploadControlSettings.OneDrivePersonalSettings.AccountName

    FileManager

    Run Demo

    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.

@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()
static AmazonFileSystemProvider CreateAmazonProvider() {
    var provider = new AmazonFileSystemProvider("/");
    provider.AccountName = "FileManagerAmazonAccount";
    provider.BucketName = "dxdemobucket";
    return provider;
}