February 10, 2024
Updated!

Upload Multi-images From Webflow Form to Webflow CMS

CMS
Webflow
Zapier

Addressing the Issue

To my knowledge, there isn't a straightforward solution readily available to tackle this problem. Once, while working on my Webflow project, I encountered a challenge where I needed to create a CMS item for each form submission. The form comprised various types of inputs, including text information and photos. Initially, I sought a native input field in Webflow to facilitate photo/file uploads, only to discover that such functionality required a purchase of an Ecommerce Plus, Advanced, or Business site plan.

Webflow File Uploader

This discovery was disappointing, but I remained convinced that there had to be a workaround. Upon researching how to upload files in a Webflow form without relying on the native file uploader, I stumbled upon a helpful tool called "Uploadcare." Their Low-code guides for Shopify, Webflow, and Marketo presented a solution:

Fortunately, you can embed an advanced Uploading Widget into your Webflow website. Using it is as easy as using the default Webflow File Upload element, but with almost no limits. With Uploadcare, you can upload files up to 5 TB and use more input sources, including Facebook, Instagram, Dropbox, etc.

With this revelation, my initial issue was resolved; I integrated their embed into my form seamlessly, and it functioned perfectly.

Uploadcare uploader

Now, let's revisit the problem we're addressing: we have a form on Webflow, and we need a CMS item created for each form submission. My first thought was to leverage Zapier, our beloved automation tool. I set up a simple Zap, as illustrated in the next image. After testing the zap, the CMS item was successfully created, and the image was uploaded. However, when attempting to upload multiple images—since I had a multi-image field in my CMS setup—I encountered a setback. I had to add a custom attribute to the input field [data-multiple="true"]. Despite these adjustments, upon testing, not a single image was uploaded to my CMS.

Why? When multiple images are uploaded with Uploadcare, they are grouped or placed into a folder, and the input field contains the value as a single URL, which Webflow fails to recognize as an image source. It may sound complex, but allow me to share the solution that worked for me.

Solution

After numerous trials and errors, I discovered that I had to generate individual image URLs from the group URL using JavaScript and then create an array of URLs to input as the field value passed to Zapier. This was the first step. To utilize this array, I had to set up a custom webhook on Zapier. Using the native action for creating a CMS item wouldn't work!

Here is how the array appears:

<
'[{"url":"https://ucarecdn.com/c4ae3867-6fd5-4378-806e-0c65d5bd570f~3/nth/0/-/format/webp/-/quality/smart/"},{"url":"https://ucarecdn.com/c4ae3867-6fd5-4378-806e-0c65d5bd570f~3/nth/1/-/format/webp/-/quality/smart/"},{"url":"https://ucarecdn.com/c4ae3867-6fd5-4378-806e-0c65d5bd570f~3/nth/2/-/format/webp/-/quality/smart/"}]'
<

Additionally, here is the JavaScript code I used to generate the links. I also included certain parameters in the image URL to optimize and compress the images.

<script>
    const inputMultiFiles = document.getElementById('file');
    var form = document.getElementById('email-form');
    var process_button = document.getElementById('process-btn');
    var submit_button = document.getElementById('submit_button');

    // Event listener for form submission
    process_button.addEventListener('click', function (event) {

        process_button.textContent = 'Processing.';
        process_button.textContent = 'Processing..';
        process_button.textContent = 'Processing...';

        if (inputMultiFiles.value) {

            var img = inputMultiFiles.value;
            var number = parseInt(img.split('~').pop().replace('/', ''));
            var imgs = [];

            for (var i = 0; i < number; i++) {
                imgs.push({ "url": img + 'nth/' + i + '/-/format/webp/-/quality/smart/' });
            }

            inputMultiFiles.value = JSON.stringify(imgs);
        }

        else {
        }

        // After preparing the URLs, show submit button
        process_button.style.display = 'none';
        submit_button.style.display = 'block';

    });
</script>

To set up the webhook with type "custom request" on Zapier, you will need to:

  1. Set the method to POST.
  2. Obtain your bearer token from Site settings > Apps & integrations tab > API access.
  3. Authorize on Webflow API Docs using your bearer token.
  4. Obtain the collection ID from Collection settings in Webflow CMS.
  5. Get the API URL from Webflow API Docs to use in your webhook.
  6. Input your raw data and headers.

{
  "isArchived": true,
  "isDraft": true,
	"fieldData": {
        "gallery": /your array here/ ,
        "name": "testing webhook",
        "slug": ""
      }
}
Successful Webhook!

To sum up, we encountered obstacles integrating file uploads into Webflow forms and automating CMS item creation. Solutions like Uploadcare and custom JavaScript helped us overcome challenges, including managing multiple image uploads and configuring Zapier. In the upcoming image, I'll provide you with the final recipe we used to resolve our issue. Thank you for your support, and may your development endeavors be filled with joy!

Solution Flowchart

Introduction

In this tutorial, I'll guide you through the process of building an interactive dynamic gallery using Webflow's CMS multi-image field feature. By the end of this tutorial, you'll have a visually appealing gallery where users can navigate through multiple images seamlessly.

Step 1: Setting Up Your Collection

Begin by creating a collection in Webflow with a multi-image field. For example, let's say you have a collection named "Recipes" with a gallery of images for each recipe.

Step 2: Addressing Lightbox Issues

If you try to use the lightbox component directly within a collection list linked to the multi-image field, you might face a problem. Each collection item ends up with a separate lightbox containing only one image. To resolve this, group all the lightboxes by assigning them a common group name. This ensures that all images are displayed together in the lightbox.

Step 3: Designing Your Gallery Layout

To achieve the desired gallery layout, create a separate collection list for the gallery. Limit the items displayed to 3. Style the list as a grid with 2 columns and add an overlay with "(+n)" indicating the number of additional images beyond the third one.

Use the following JavaScript code to modify the layout:

// Make the first image span 2 columns
var firstImg = document.querySelector(".gallery-list > div:nth-child(1)")
firstImg.style.gridArea = 'span 1/span 2/span 1/span 2';

// Hide overlay for items in the gallery, except for the third one if there are more than 3 images
var imgCount = document.querySelector('.lightbox-list').childElementCount
if (imgCount > 3) {
    var imgOverlay = document.querySelector('.gallery-list').children[2].children[0].children[1];
    imgOverlay.style.display = 'flex';
    imgOverlay.children[0].textContent = `+${imgCount - 3}`;
}

Step 3: Designing Your Gallery Layout

To ensure that clicking on images in the gallery opens the lightbox, use the following JavaScript code:

const imageWrappers = document.querySelectorAll('.image-wrapper');

for (let i = 0; i < imageWrappers.length; i++) {
    const imageWrapper = imageWrappers[i];
    const order = i + 1;

    imageWrapper.addEventListener('click', () => {
        console.log(`Image wrapper clicked! Order: ${order}`);
        document.querySelector(`.lightbox-list > div:nth-child(${order}) > a`).click()
    });
}

This code creates an array of gallery images and triggers a click event on the corresponding lightbox item when a gallery image is clicked. This way, users can seamlessly navigate through the images in the lightbox.

Conclusion

By following these steps and implementing the provided code snippets, you can create a dynamic and interactive image gallery in Webflow using CMS multi-image fields. This approach enhances user experience by allowing smooth navigation through multiple images within a cohesive lightbox environment.

Happy designing!

logo in footer
Copyrights 2024 © Abdelhalim Aljamal - All rights reserved.
Close
logo in navbar
Code copied to clipboard!