Performing a Batch Upload

This example uploads files in batches.

// Hard-coded or plaintext AK and SK are risky. For security purposes, encrypt your AK and SK before storing them in the configuration file or environment variables. In this example, the AK and SK are stored in environment variables. Before running the code in this example, configure environment variables AccessKeyID and SecretAccessKey.
// The front-end code does not have the process environment variable, so you need to use a module bundler like webpack to define the process variable.
// Obtain an AK/SK pair on the management console. For details, see https://support.huaweicloud.com/intl/en-us/usermanual-ca/ca_01_0003.html.
const AK = process.env.AccessKeyID
const SK = process.env.SecretAccessKey
// (Optional) If you use a temporary AK and SK pair and a security token to access OBS, obtain them using environment variables.
const security_token= process.env.SecurityToken
// Set server to the endpoint corresponding to the bucket. CN-Hong Kong is used here as an example. Replace it with the one currently in use.
const server = "https://obs.ap-southeast-1.myhuaweicloud.com"

// Create an ObsClient instance.
var obsClient = new ObsClient({
    access_key_id: AK,
    secret_access_key: SK,
    server: server
});

// Bucket name
var bucket = 'examplebucket';
// Prefix of the object names after the upload
var objectPrefix = 'upload/';
async function putObjects() {
    var fileInput = document.getElementById('folder');
    var files = fileInput.files;
    if (!files || files.length === 0) {
        console.log('Select the folder to be uploaded.');
        return;
    }
    console.log('Starting batch upload. Total number of files: ' + files.length + '.');
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        // Use relativePath or webkitRelativePath to retain the folder structure.
        var relativePath = file.webkitRelativePath || file.relativePath || file.name;
        var key = objectPrefix + relativePath;
        try {
            var params = {
                Bucket: bucket,
                Key: key,
                SourceFile: file
            };
            var result = await obsClient.putObject(params);
            if (result.CommonMsg.Status <= 300) {
                console.log('[' + (i + 1) + '/' + files.length + '] succeeded: ' + relativePath);
            } else {
                console.log('[' + (i + 1) + '/' + files.length + '] failed: ' + relativePath + ' - ' + result.CommonMsg.Message);
            }
        } catch (error) {
            console.log('[' + (i + 1) + '/' + files.length + '] exception occurred: ' + relativePath + ' - ' + error);
        }
    }
    console.log('Batch upload completed.');
}
putObjects()

• Use the SourceFile parameter to specify the to-be-uploaded file (a File or Blob object). For example, on an HTML page, use an input tag whose type is file to specify the to-be-uploaded file: <input type="file" id="input-file"/>.
• The SourceFile parameter and the Body parameter cannot be used together.
• The content to be uploaded cannot exceed 5 GB.

• The browser you use must support the window.File feature. Otherwise, the file upload function cannot be used.
• For details about how to solve the problem, see Unable to Upload Files Using a Browser that Does Not Support window.File.