More than 5 years have passed since last update.

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

Posted at 2015-12-02

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

ポイントとしては

awsdartパッケージを使う
crosの設定を忘れない
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かけたい場合はこちら

archiveパッケージを使う
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があったらいいと思い製作中ですが
どうも力不足感があるので誰か代わりにおなしゃす。

DartAdvent Calendar 2015

Day 3

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up