Aws-s3-multipart doesn't work #1095
Description
When I try to upload a file using Aws-s3-multipart, nothing happens— no upload progress bar, error message, or activity on my aws s3 account. I've installed through the CDN package and included my javascript code through a script tag. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>VideoUpload</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
</head>
<body>
<%= yield %>
<script src="https://unpkg.com/[email protected]/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/tus.js"></script>
<script src="https://transloadit.edgly.net/releases/uppy/v0.27.5/dist/uppy.min.js"></script>
<link href="https://transloadit.edgly.net/releases/uppy/v0.27.5/dist/uppy.min.css" rel="stylesheet" />
</body>
<script>
function fileUpload(fileInput) {
fileInput.style.display = 'none'; // uppy will add its own file input
const imagePreview = document.querySelector(".upload-preview");
var uppy = window.Uppy.Core({
id: fileInput.id,
})
.use(window.Uppy.FileInput, {
target: fileInput.parentNode,
})
.use(window.Uppy.Informer, {
target: fileInput.parentNode,
})
.use(window.Uppy.ProgressBar, {
target: imagePreview.parentNode,
});
uppy.use(window.Uppy.AwsS3Multipart, {
serverUrl: '',
});
uppy.on('upload-success', function (file, data, uploadURL) {
console.log("SUCCESS");
// show image preview
imagePreview.src = URL.createObjectURL(file.data)
// construct uploaded file data in the format that Shrine expects
var uploadedFileData = JSON.stringify({
id: uploadURL.match(/\/cache\/([^\?]+)/)[1], // extract key without prefix
storage: 'cache',
metadata: {
size: file.size,
filename: file.name,
mime_type: file.type,
}
});
// set hidden field value to the uploaded file data so that it's submitted with the form as the attachment
var hiddenInput = fileInput.parentNode.querySelector('.upload-hidden')
hiddenInput.value = uploadedFileData;
})
return uppy;
}
document.querySelectorAll("#file-input").forEach( fileInput => {
fileUpload(fileInput)
});
//Move the submit button to the end of the form
const submitButton = document.getElementById('submit');
const uploadForm = document.querySelector('.upload-form');
uploadForm.append(submitButton);
</script>
</html>