· 6 years ago · May 10, 2019, 02:32 PM
1<?php
2$params = array(
3 'access_key' => 'XXX',
4 'secret_key' => 'XXX',
5 'bucket_name' => 'XXX',
6 'region' => 'XXX', // eg: eu-west-1
7 'allowed_file_size' => 1073741824, // eg: 1073741824 (1 GB)
8);
9
10$dates = array(
11 'short' => gmdate('Ymd'),
12 'iso' => gmdate('Ymd\THis\Z'),
13 'expiry' => 3600,
14);
15
16$policy = base64_encode(json_encode(array(
17 'expiration' => gmdate('Y-m-d\TG:i:s\Z', strtotime('+6 hours')),
18 'conditions' => array(
19 array('bucket' => $params['bucket_name']),
20 array('starts-with', '$key', ''),
21 array('starts-with', '$Content-Type', ''),
22 array('success_action_status' => '201'),
23 array('x-amz-credential' => implode('/', array($params['access_key'], $dates['short'], $params['region'], 's3', 'aws4_request'))),
24 array('x-amz-algorithm' => 'AWS4-HMAC-SHA256'),
25 array('content-length-range', 1, $params['allowed_file_size']),
26 array('x-amz-date' => $dates['iso']),
27 array('x-amz-expires' => '' . $dates['expiry'] . ''),
28 ),
29)));
30
31$signature = hash_hmac('sha256', $dates['short'], 'AWS4' . $params['secret_key'], true);
32$signature = hash_hmac('sha256', $params['region'], $signature, true);
33$signature = hash_hmac('sha256', 's3', $signature, true);
34$signature = hash_hmac('sha256', 'aws4_request', $signature, true);
35$signature = hash_hmac('sha256', $policy, $signature);
36?>
37<!DOCTYPE html>
38<html>
39<head>
40 <meta charset="utf-8" />
41 <title>S3 Upload</title>
42 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
43</head>
44<body>
45 <div class="container mt-5">
46 <div class="row">
47 <div class="col-12">
48 <div class="card">
49 <div class="card-body">
50 <h5 class="card-title">Upload files to S3</h5>
51 <p class="card-text">Use this simple form to upload files to Amazon S3 - using jQuery, Bootstrap and PHP.</p>
52 <hr />
53 <form action="https://<?php echo $params['bucket_name']; ?>.s3-<?php echo $params['region']; ?>.amazonaws.com" method="POST" enctype="multipart/form-data" id="s3-upload">
54 <input type="hidden" name="success_action_status" value="201" />
55 <input type="hidden" name="policy" value="<?php echo $policy; ?>" />
56 <input type="hidden" name="X-amz-credential" value="<?php echo $params['access_key']; ?>/<?php echo $dates['short']; ?>/<?php echo $params['region']; ?>/s3/aws4_request" />
57 <input type="hidden" name="X-amz-algorithm" value="AWS4-HMAC-SHA256" />
58 <input type="hidden" name="X-amz-date" value="<?php echo $dates['iso']; ?>" />
59 <input type="hidden" name="X-amz-expires" value="<?php echo $dates['expiry']; ?>" />
60 <input type="hidden" name="X-amz-signature" value="<?php echo $signature; ?>" />
61 <input type="hidden" name="key" value="" />
62 <input type="hidden" name="Content-Type" value="" />
63 <div class="form-group">
64 <label for="file">Please, select you file...</label>
65 <input type="file" name="file" id="file" class="form-control-file" />
66 </div>
67 <button type="submit" class="btn btn-block btn-primary upload">Upload</button>
68 </form>
69 </div>
70 <div class="card-footer result" style="display: none;">
71 <div class="progress" style="display: none;">
72 <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%"></div>
73 </div>
74 <div class="result-file"></div>
75 </div>
76 </div>
77 </div>
78 </div>
79 </div>
80 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
81 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
82 <script>
83 $("#s3-upload").submit(function(t) {
84 t.preventDefault(), $(".upload").attr("disabled", true), $(".result").show(), $(".progress").show(), file = this.elements.file.files[0], $(this).find("input[name=key]").val(file.name), $(this).find("input[name=Content-Type]").val(file.type);
85 var e = $(this).attr("action"),
86 a = new FormData(this);
87 $.ajax({
88 url: e,
89 type: "post",
90 datatype: "xml",
91 data: a,
92 contentType: !1,
93 processData: !1,
94 xhr: function() {
95 var t = $.ajaxSettings.xhr();
96 return t.upload && t.upload.addEventListener("progress", function(t) {
97 var e = 0,
98 a = t.loaded || t.position,
99 n = t.total;
100 t.lengthComputable && (e = Math.ceil(a / n * 100), $(".progress-bar").css("width", e + "%").text(e + " %"))
101 }, !0), t
102 }
103 }).done(function(t) {
104 var e = $(t).find("Location").text(),
105 a = $(t).find("Key").text();
106 $(".upload").attr("disabled", false), $(".progress").hide(), $(".result-file").html("<p class=\"mb-0\">Your file: <a href=" + e + " target=\"_blank\">" + a + "</a></p>")
107 })
108 });
109 </script>
110</body>
111</html>