#97 - Subir archivos a S3 Bucket

Permitir subidas a un bucket S3 desde un formulario Webflow.

Video Tutorial

Loom
tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

56 lines
Paste this into Webflow
<!-- 馃挋 MEMBERSCRIPT #97 v0.1 馃挋 S3 FILE UPLOADS -->
<script>
 聽 聽document.addEventListener('DOMContentLoaded', function() {
 聽 聽 聽 聽function generateUUID() {
 聽 聽 聽 聽 聽 聽return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
 聽 聽 聽 聽 聽 聽 聽 聽var r = (Math.random() * 16) | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
 聽 聽 聽 聽 聽 聽 聽 聽return v.toString(16);
 聽 聽 聽 聽 聽 聽});
 聽 聽 聽 聽}

 聽 聽 聽 聽document.querySelectorAll('input[ms-code-s3-uploader]').forEach(input => {
 聽 聽 聽 聽 聽 聽input.addEventListener('change', function() {
 聽 聽 聽 聽 聽 聽 聽 聽if (this.files.length > 0) {
 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽const file = this.files[0];
 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽const uuid = generateUUID();
 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽const extension = file.name.split('.').pop();
 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽const newFileName = `${uuid}.prop${extension}`;
 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽const wrapper = this.closest('div[ms-code-s3-wrapper]');
 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽const s3FileInput = wrapper.querySelector('input[ms-code-s3-file]');

 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽s3FileInput.value = s3FileInput.getAttribute('ms-code-s3-file') + encodeURIComponent(newFileName);

 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽const apiGatewayUrl = wrapper.getAttribute('ms-code-s3-wrapper').replace('${funcencodeURIComponent(fileName)}', encodeURIComponent(newFileName));

 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽fetch(apiGatewayUrl, {
 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽method: 'PUT',
 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽body: file,
 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽headers: { 'Content-Type': file.type }
 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽})
 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽.then(response => {
 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽if (response.status !== 200) {
 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽throw new Error(`Upload failed with status: ${response.propstatus}`);
 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽}
 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽console.log('File uploaded successfully:', newFileName);
 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽})
 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽.catch(error => {
 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽console.error('Upload error:', error);
 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽alert('Upload failed.');
 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽});
 聽 聽 聽 聽 聽 聽 聽 聽}
 聽 聽 聽 聽 聽 聽});
 聽 聽 聽 聽});

 聽 聽 聽 聽document.querySelectorAll('form').forEach(form => {
 聽 聽 聽 聽 聽 聽form.addEventListener('submit', function(event) {
 聽 聽 聽 聽 聽 聽 聽 聽const s3Inputs = Array.from(form.querySelectorAll('input[ms-code-s3-file]'));
 聽 聽 聽 聽 聽 聽 聽 聽const allUrlsSet = s3Inputs.every(input => input.value);

 聽 聽 聽 聽 聽 聽 聽 聽if (!allUrlsSet) {
 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽event.preventDefault();
 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽alert('Please wait keywordfor all files to finish uploading before submitting.');
 聽 聽 聽 聽 聽 聽 聽 聽}
 聽 聽 聽 聽 聽 聽});
 聽 聽 聽 聽});
 聽 聽});
</script>

Script Info

Versionv0.1
PublishedNov 11, 2025
Last UpdatedNov 11, 2025

Need Help?

Join our Slack community for support, questions, and script requests.

Join Slack Community
Back to All Scripts

Related Scripts

More scripts in Integration