LoginSignup
3

More than 5 years have passed since last update.

ブラウザから直接AmazonS3にデータを保存する方法

Posted at

生のAccessKeyとSecretKeyを配れる前提ですが。

ポイントとしては
1. awsdartパッケージを使う
2. crosの設定を忘れない
3. HostやDate等のHeaderは特に要らない

pubspec
dependencies:
  awsdart: "^0.0.3"
crosの設定
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>
index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>browser_s3</title>
</head>

<body>

<label for="access-key">AccessKey
    <input type="text" id="access-key">
</label>
<br>
<label for="secret-key">SecretKey
    <input type="text" id="secret-key">
</label>
<br>
<label for="text">Text
    <textarea id="text"></textarea>
</label>
<br>
<button id="button">保存</button>
<link rel="stylesheet" href="styles.css">
<script async src="main.dart" type="application/dart"></script>
<script async src="packages/browser/dart.js"></script>
</body>
</html>

main.dart
import "dart:html";
import 'dart:convert';
import 'package:awsdart/html.dart';

ButtonElement button;
TextInputElement secret_key , access_key;
TextAreaElement text;


void main() {
  button = querySelector('#button');
  secret_key = querySelector('#secret-key');
  access_key = querySelector('#access-key');
  text = querySelector('#text');

  button.onClick.listen(onClick);
}

void onClick(_){
  setupAwsHtml();
  var uri = Uri.parse('https://s3-ap-northeast-1.amazonaws.com/isyumi/advent-calendar.html');
  var headers = <String, String>{
    "Content-Type" : "text/html; charset=UTF-8",
  };
  var body = new Utf8Encoder().convert(text.value);
  new Aws(accessKey: access_key.value , secretKey:secret_key.value).request(uri,method:'PUT' , headers: headers,body: body);
}

ちなみにGZIPかけたい場合はこちら
1. archiveパッケージを使う
2. HeaderにContent-Encoding:gzipを指定する

pubspec.yaml
dependencies:
  awsdart: "^0.0.3"
  archive: "^1.0.20"
main.dart
import "dart:html";
import 'dart:convert';
import 'package:awsdart/html.dart';
import 'package:archive/archive.dart';

ButtonElement button;
TextInputElement secret_key, access_key;
TextAreaElement text;


void main() {
  button = querySelector('#button');
  secret_key = querySelector('#secret-key');
  access_key = querySelector('#access-key');
  text = querySelector('#text');

  button.onClick.listen(onClick);
}

void onClick(_) {
  setupAwsHtml();
  var uri = Uri.parse(
      'https://s3-ap-northeast-1.amazonaws.com/isyumi/advent-calendar.html');
  var headers = <String, String>{
    "Content-Type" : "text/html; charset=UTF-8",
    "Content-Encoding" : "gzip"
  };
  var body = new GZipEncoder().encode(new Utf8Encoder().convert(text.value));
  new Aws(accessKey: access_key.value, secretKey: secret_key.value).request(uri, method: 'PUT', headers: headers, body: body);
}

この方法を利用したAmazonS3向けCMSがあったらいいと思い製作中ですが
どうも力不足感があるので誰か代わりにおなしゃす。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3