WangZixian
/
app


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
							<!-- 
 * 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>upload_download_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="text" value="Hello OBS" id="stringToUpload"/>
    <input type="button" value="Click to upload object using string" onclick="uploadUsingString();"/>
    <p>
    <input type="file" id="fileToUpload"/>
    <input type="button" value="Click to upload object using file" onclick="uploadUsingFile();"/>
    <p>
    <input type="button" value="Click to download object as file" onclick="downloadAsFile();"/>
    <p>
    <input type="button" value="Click to download object as string" onclick="downloadAsString();"/>
	<p>
	<select id="saveAsByType">
		<option value="arraybuffer">arraybuffer</option>
		<option value="blob">blob</option>
		<option value="text">text</option>
	</select>
    <input type="button" value="Click to download object by type" onclick="downloadByType();"/>

</body>


<script src="../dist/esdk-obs-browserjs.3.23.5.min.js"></script>
<script type="text/javascript">
/**
 * This sample demonstrates how to upload/download an object 
 * to/from OBS in different ways 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,
	});
}

/**
 * Upload an object by string
 */
function uploadUsingString(){
	var bucketName =  document.getElementById('bucketname').value;
	var objectKey =  document.getElementById('objectkey').value;
	var obs = getObsClient();
	obs.putObject({
		Bucket: bucketName,
		Key : objectKey,
		Body : document.getElementById('stringToUpload').value
	}).then(function(result) {
		if(result.CommonMsg.Status < 300){
			console.log('Create object:' + objectKey + ' successfully!\n');
		}
	});
}

/**
 * Upload an object by file
 */
function uploadUsingFile(){
	var bucketName =  document.getElementById('bucketname').value;
	var objectKey =  document.getElementById('objectkey').value;
	var obs = getObsClient();
	obs.putObject({
		Bucket: bucketName,
		Key : objectKey,
		SourceFile : document.getElementById('fileToUpload').files[0]
	}).then(function(result) {
		if(result.CommonMsg.Status < 300){
			console.log('Create object:' + objectKey + ' successfully!\n');
		}
	});
}

/*
 * Download the object to a file
 */
function downloadByType(){
	var bucketName =  document.getElementById('bucketname').value;
	var objectKey =  document.getElementById('objectkey').value;
	var obs = getObsClient();

	obs.getObject({
		Bucket: bucketName,
		Key: objectKey,
		SaveByType: document.getElementById('saveAsByType').value
	}).then(function(result) {
		console.log(typeof result.InterfaceResult.Content);
		console.log('DownloadPath-->\n' + result.InterfaceResult.Content +'\n');
	});
}

/*
 * Download the object by type
 */
function downloadAsFile(){
	var bucketName =  document.getElementById('bucketname').value;
	var objectKey =  document.getElementById('objectkey').value;
	var obs = getObsClient();

	obs.getObject({
		Bucket: bucketName,
		Key: objectKey,
		SaveByType : 'file'
	}).then(function(result) {
		console.log(result.InterfaceResult.Content);
		console.log('DownloadPath-->\n' + result.InterfaceResult.Content.SignedUrl+'\n');
	});
}

/*
 * Download the object as a String
 */
function downloadAsString(){
	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('Content-->\n' + result.InterfaceResult.Content);
			console.log('\n');
		}
	});
}
 

</script>

</html>