WangZixian
/
app


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
							<!-- 
 * 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>object_operations_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 upload object" onclick="putObject();"/>
	<p>
    <input type="button" value="Click to get object metadata" onclick="getObjectMetadata();"/>
	<p>
    <input type="button" value="Click to download object" onclick="getObject();"/>
	<p>
    <input type="button" value="Click to copy object" onclick="copyObject();"/>
	<p>
    <input type="button" value="Click to set/get object acl" onclick="doObjectAcl();"/>
	<p>
    <input type="button" value="Click to delete object" onclick="deleteObject();"/>

</body>


<script src="../dist/esdk-obs-browserjs.3.23.5.min.js"></script>
<script type="text/javascript">
/**
 * This sample demonstrates how to do object-related operations
 * (such as create/delete/get/copy object, do object ACL) 
 * on 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,
	});
}
 
 /*
 * Put object
 */
 function putObject(){
	var bucketName =  document.getElementById('bucketname').value;
	var objectKey =  document.getElementById('objectkey').value;
	var obs = getObsClient();
	obs.putObject({
		Bucket: bucketName,
		Key : objectKey,
		Body : 'Hello OBS'
	}).then(function(result) {
		if(result.CommonMsg.Status < 300){
			console.log('Create object:' + objectKey + ' successfully!\n');
		}
	});
 }
 /*
 * Get object metadata
 */
 function getObjectMetadata(){
	var bucketName =  document.getElementById('bucketname').value;
	var objectKey =  document.getElementById('objectkey').value;
	var obs = getObsClient();
	obs.getObjectMetadata({
		Bucket: bucketName,
		Key : objectKey
	}).then(function(result) {
		if(result.CommonMsg.Status < 300){
			console.log('Get object metadata');
			console.log('\tETag-->' + result.InterfaceResult.ETag);
			console.log('\tContentLength-->' + result.InterfaceResult.ContentLength);
			console.log('\n');
		}
	});
}
/*
 * Get object
 */
function getObject(){
	var bucketName =  document.getElementById('bucketname').value;
	var objectKey =  document.getElementById('objectkey').value;
	var obs = getObsClient();
	obs.getObject({
		Bucket: bucketName,
		Key : objectKey
	}).then(function(result){
		if(result.CommonMsg.Status < 300){
			console.log('Get object content');
			console.log('\tContent-->' + result.InterfaceResult.Content);
			console.log('\n');
		}
	});
}
/*
 * Copy object
 */
function copyObject(){
	var bucketName =  document.getElementById('bucketname').value;
	var objectKey =  document.getElementById('objectkey').value;
	var obs = getObsClient();
	obs.copyObject({
		Bucket: bucketName,
		Key: objectKey + '-back',
		CopySource : bucketName + '/' + objectKey,
		MetadataDirective : obs.enums.CopyMetadata
	}).then(function(result)  {
		if(result.CommonMsg.Status < 300){
			console.log('Copy object');
			console.log('\tETag-->' + result.InterfaceResult.ETag);
			console.log('\n');
		}
	});	
}

/*
 * Put/Get object acl operations
 */
function doObjectAcl(){
	var bucketName =  document.getElementById('bucketname').value;
	var objectKey =  document.getElementById('objectkey').value;
	var obs = getObsClient();
	obs.setObjectAcl({
		Bucket: bucketName,
		Key: objectKey,
		ACL : obs.enums.AclPublicRead
	}).then(function(result)  {
		if(result.CommonMsg.Status < 300){
			console.log('Set object ACL to ' + obs.enums.AclPublicRead + ' finished. \n');
			obs.getObjectAcl({
				Bucket: bucketName,
				Key: objectKey
			}).then(function(result) {
				console.log('Get object ACL:');
				console.log('\tOwner[ID]-->' + result.InterfaceResult.Owner.ID);
				console.log('\tOwner[Name]-->' + result.InterfaceResult.Owner.Name);
				console.log('\tGrants:');
				var i=0;
				for(;i<result.InterfaceResult.Grants.length;i++){
					console.log('\tGrant[' + i + ']:');
					console.log('\tGrantee[ID]-->' + result.InterfaceResult.Grants[i]['Grantee']['ID']);
					console.log('\tGrantee[Name]-->' + result.InterfaceResult.Grants[i]['Grantee']['Name']);
					console.log('\tGrantee[URI]-->' + result.InterfaceResult.Grants[i]['Grantee']['URI']);
					console.log('\tPermission-->' + result.InterfaceResult.Grants[i]['Permission']);
				}
				console.log('\n');
			});
		}
	});
}
/*
 * Delete object
 */
function deleteObject(){
	var bucketName =  document.getElementById('bucketname').value;
	var objectKey =  document.getElementById('objectkey').value;
	var obs = getObsClient();
	obs.deleteObject({
		Bucket: bucketName,
		Key: objectKey
	}).then(function(result) {
		if(result.CommonMsg.Status < 300){
			console.log('Delete object ' + objectKey +  ' finished.\n');
		}
		obs.deleteObject({
			Bucket: bucketName,
			Key: objectKey + '-back'
		}).then(function(result)  {
			if(result.CommonMsg.Status < 300){
				console.log('Delete object ' + objectKey + '-back' +  ' finished.\n');
			}
		});
	});
}

 
</script>

</html>