Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Blueimp File Upload to S3</title>
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
- <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.14.0/css/jquery.fileupload-ui.css" integrity="sha256-ifT1V9+cbcwQlKPmG5IQAjw8d3EWNOD/NJyJ7BBdDK8=" crossorigin="anonymous" />
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.14.0/css/jquery.fileupload.css" integrity="sha256-imNlcy7z1wzkld49jVqMmBW2xMSDo6M+ibveWDltwfc=" crossorigin="anonymous" />
- <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.14.0/js/vendor/jquery.ui.widget.js" integrity="sha256-CvqMlHtDX8dDgshwl03tVwvzncqqMKN0FLzZrNap4+I=" crossorigin="anonymous"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.14.0/js/jquery.iframe-transport.js" integrity="sha256-crfsFqVM6OjkK4bc0XepM2rcSNZijer+t4QvBg5K0Og=" crossorigin="anonymous"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.14.0/js/jquery.fileupload.js" integrity="sha256-VLqHfBaZnpwDmjmdAKAt/4raSYcfh7OzImUdRor26Dc=" crossorigin="anonymous"></script>
- <style type="text/css">
- .btn-file input[type=file] {
- position: absolute;
- opacity: 0;
- }
- </style>
- <script type="text/javascript">
- $(function() {
- $(':file').each(function(i, el) {
- var fileInput = $(el);
- var form = fileInput.parents('form:first');
- fileInput.fileupload({
- forceIframeTransport: true,
- autoUpload: true,
- singleFileUploads: true, //default anyway
- add: function(event, data) {
- var files = data.files || [];
- var nextInQueue = files[0]; //this is a queue, not a list
- console.log('nextInQueue:', nextInQueue);
- if (!nextInQueue) return;
- var fileData = {name: nextInQueue.name, mime: nextInQueue.type, size: nextInQueue.size};
- $.ajax({
- url: '/s3stuff',
- type: 'POST',
- dataType: 'json',
- data: {'file': fileData},
- async: false,
- success: function(res) {
- form.find('input[name="key"]').val(res.key);
- form.find('input[name="AWSAccessKeyId"]').val(res.AWSAccessKeyId);
- form.find('input[name="policy"]').val(res.policy);
- form.find('input[name="signature"]').val(res.signature);
- form.find('input[name="acl"]').val(res.acl);
- form.find('input[name="success_action_status"]').val(res.success_action_status);
- form.find('input[name="Content-Type"]').val(nextInQueue.type);
- form.attr('action', res.url);
- data.submit(); //why is this submitting all files at once?
- }
- });
- },
- fail: function(err) {
- console.log('err:', err.stack);
- }
- });
- });
- });
- </script>
- </head>
- <body>
- <div class="container">
- <div class="page-header">
- <h2>Blueimp File Upload to S3</h2>
- </div>
- <div class="row">
- <div class="col-xs-12">
- <form class="form-horizontal" role="form" method="POST" enctype="multipart/form-data">
- <div class="form-group">
- <div class="col-xs-12">
- <div class="input-group">
- <label class="input-group-btn" for="file">
- <span class="btn btn-primary btn-file">
- <i class="fa fa-cloud-upload fa-lg" aria-hidden="true"></i> Choose File...
- <input type="file" name="file" accept="image/jpeg,image/gif,image/png,application/pdf,image/tiff" tabindex="1">
- </span>
- </label>
- <input type="text" class="form-control" readonly>
- <input type="hidden" name="key">
- <input type="hidden" name="AWSAccessKeyId">
- <input type="hidden" name="policy">
- <input type="hidden" name="signature">
- <input type="hidden" name="acl">
- <input type="hidden" name="success_action_status">
- <input type="hidden" name="Content-Type">
- </div>
- </div>
- </div>
- </form>
- </div>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement