post-object-sample.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <!--
  2. * Copyright 2019 Huawei Technologies Co.,Ltd.
  3. * Licensed under the Apache License, Version 2.0 (the "License"); you may not use
  4. * this file except in compliance with the License. You may obtain a copy of the
  5. * License at
  6. *
  7. * http://www.apache.org/licenses/LICENSE-2.0
  8. *
  9. * Unless required by applicable law or agreed to in writing, software distributed
  10. * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
  11. * CONDITIONS OF ANY KIND, either express or implied. See the License for the
  12. * specific language governing permissions and limitations under the License.
  13. -->
  14. <html>
  15. <head>
  16. <meta charset="utf-8">
  17. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  18. <meta http-equiv="Pragma" name="Pragma" content="no-cache">
  19. <title>post_object_sample</title>
  20. </head>
  21. <body>
  22. <h3>OBS BrowserJS SDK demo</h3>
  23. <h4>Basic Configuration</h4>
  24. <label>AK:</label> <input type="text" value="*** Provide your Access Key ***" id="ak" size="30"/>
  25. <label>SK:</label> <input type="text" value="*** Provide your Secret Key ***" id="sk" size="30"/>
  26. <p>
  27. <label>Server:</label> <input type="text" value="your-endpoint" id="server" size="30"/>
  28. <label>Bucket:</label> <input type="text" value="bucketname" id="bucketname"/>
  29. <form method="post" enctype="multipart/form-data" id="postForm">
  30. Object key
  31. <!-- Object name -->
  32. <input type="text" name="key" value="objectkey" id="objectkey"/>
  33. <p>
  34. ACL
  35. <!-- Object ACL -->
  36. <input type="text" name="x-obs-acl" value="public-read" id="x-obs-acl"/>
  37. <p>
  38. Content-Type
  39. <!-- Object MIME type -->
  40. <input type="text" name="content-type" value="text/plain" id="content-type"/>
  41. <p>
  42. <!-- Customized metadata -->
  43. <input type="text" name="x-obs-meta-property1" value="property-value1" id="x-obs-meta-property1"/>
  44. <p>
  45. <input type="text" name="x-obs-meta-property2" value="property-value2" id="x-obs-meta-property2"/>
  46. <!-- Base64 code of the policy -->
  47. <input type="hidden" name="policy" value="*** Provide your policy ***" id="policy"/>
  48. <!-- Signature information -->
  49. <input type="hidden" name="signature" value="*** Provide your signature ***" id="signature"/>
  50. <!-- AK -->
  51. <input type="hidden" name="accessKeyId" value="*** Provide your Access Key ***" id="accessKeyId"/>
  52. <p>
  53. <input name="file" type="file" />
  54. <input name="Click to upload file" value="Upload" type="button" onclick="doUpload();" />
  55. </form>
  56. </body>
  57. <script src="../dist/esdk-obs-browserjs.3.23.5.min.js"></script>
  58. <script type="text/javascript">
  59. /**
  60. * This sample demonstrates how to post object under specified bucket from
  61. * OBS using the OBS SDK for BrowserJS.
  62. */
  63. function getObsClient(){
  64. /*
  65. * Initialize a obs client instance with your account for accessing OBS
  66. */
  67. var ak = document.getElementById('ak').value;
  68. var sk = document.getElementById('sk').value;
  69. var server = document.getElementById('server').value;
  70. return new ObsClient({
  71. access_key_id: ak,
  72. secret_access_key: sk,
  73. server : server,
  74. signature : 'obs',
  75. timeout : 60 * 5
  76. });
  77. }
  78. function doUpload(){
  79. var obs = getObsClient();
  80. var server = document.getElementById('server').value;
  81. var bucketName = document.getElementById('bucketname').value;
  82. var acl = document.getElementById('x-obs-acl');
  83. var contentType = document.getElementById('content-type');
  84. var meta1 = document.getElementById('x-obs-meta-property1');
  85. var meta2 = document.getElementById('x-obs-meta-property2');
  86. var formParams = {'x-obs-acl': acl.value, 'content-type': contentType.value, 'x-obs-meta-property1': meta1.value, 'x-obs-meta-property2': meta2.value};
  87. var res = obs.createPostSignatureSync({Expires:3600, FormParams: formParams});
  88. var policy = document.getElementById('policy');
  89. var signature = document.getElementById('signature');
  90. policy.value = res.Policy;
  91. signature.value = res.Signature;
  92. var accessKeyId = document.getElementById('accessKeyId');
  93. accessKeyId.value = document.getElementById('ak').value;
  94. var postForm = document.getElementById('postForm');
  95. postForm.action = 'http://' + bucketName + '.' + server + '/';
  96. postForm.submit();
  97. console.log('Creating object in post way');
  98. }
  99. </script>
  100. </html>