examples/simple-multipart-upload-sample.html

<!-- 
 * Copyright 2019 Huawei Technologies Co.,Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use
 * this file except in compliance with the License.  You may obtain a copy of the
 * License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed
 * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
 * CONDITIONS OF ANY KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations under the License.
 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Pragma" name="Pragma" content="no-cache">
<title>simple_multipart_upload_sample</title>

</head>

<body>
	
    <h3>OBS BrowserJS SDK demo</h3>
    
    <h4>Basic Configuration</h4>
    <label>AK:</label> <input type="text" value="*** Provide your Access Key ***" id="ak" size="30"/>
    <label>SK:</label> <input type="text" value="*** Provide your Secret Key ***" id="sk" size="30"/>
	<p>
    <label>Server:</label> <input type="text" value="http://your-endpoint" id="server" size="30"/>
    <label>Bucket:</label> <input type="text" value="bucketname" id="bucketname"/>
	<label>Key:</label> <input type="text" value="objectkey" id="objectkey"/>
	
    <p>
    <input type="button" value="Click to do multipart upload" onclick="doMultipartUpload();"/>


</body>


<script src="../dist/esdk-obs-browserjs.3.23.5.min.js"></script>
<script type="text/javascript">
/**
 * This sample demonstrates how to upload multiparts to OBS 
 * using the OBS SDK for BrowserJS.
 */

 function getObsClient(){
	 /*
	 * Initialize a obs client instance with your account for accessing OBS
	 */
	var ak = document.getElementById('ak').value;
	var sk = document.getElementById('sk').value;
	var server = document.getElementById('server').value;
	return new ObsClient({
		access_key_id: ak,
		secret_access_key: sk,
		server : server,
		timeout : 60 * 5,
	});
}
 
 function doMultipartUpload(){
		var bucketName =  document.getElementById('bucketname').value;
		var objectKey =  document.getElementById('objectkey').value;
		var obs = getObsClient();
        /*
         * Step 1: initiate multipart upload
         */
		console.log('Step 1: initiate multipart upload \n');
		obs.initiateMultipartUpload({
			Bucket: bucketName, 
			Key: objectKey,
		}).then(function(result)  {
			if(result.CommonMsg.Status < 300){
				var uploadId = result.InterfaceResult.UploadId;
				 /*
	             * Step 2: upload a part
	             */
				console.log('Step 2: upload part \n');
				obs.uploadPart({
					Bucket: bucketName,
					Key: objectKey,
					UploadId: uploadId,
					PartNumber : 1,
					Body : 'Hello OBS'
				}).then(function(result)  {
					if(result.CommonMsg.Status < 300){
						var etag = result.InterfaceResult.ETag;
						 /*
			             * Step 3: complete multipart upload
			             */
						console.log('Step 3: complete multipart upload \n');
						obs.completeMultipartUpload({
							Bucket : bucketName,
							Key : objectKey,
							UploadId: uploadId,
							Parts : [{PartNumber : 1, ETag: etag}]
						}).then(function(result)  {
							if(result.CommonMsg.Status < 300){
								console.log('complete multipart upload finished.\n');
							}
						});
					}
				});
			}
		});
 }

 



</script>

</html>
