User avatar
×

User name

user email

Delete Account
Sign Out
BACK

Almost there!

We've sent an email to with a link to activate your account.
Contact us if you need any help.
BACK

Reset Password

Get New Password
BACK LOG IN

Create Your Account

By creating an account, you agree to the Widget Pro Terms of Service and Privacy Policy.
Register
BACK CREATE ACCOUNT

Login

Sign In
Forgot your password?
Terms of Service
Privacy Policy
Widget Pro logo. Links to home.
Logo for Widget Pro. It shows an intertwined W and P character.
    User avatar
    ×

    User name

    user email

    Delete Account
    Sign Out
    BACK

    Almost there!

    We've sent an email to with a link to activate your account.
    Contact us if you need any help.
    BACK

    Reset Password

    Get New Password
    BACK LOG IN

    Create Your Account

    By creating an account, you agree to the Widget Pro Terms of Service and Privacy Policy.
    Make a free account
    BACK CREATE ACCOUNT

    Login

    Sign In
    Forgot your password?
    Terms of Service
    Privacy Policy
    API workflow: Airtable image upload → Duda content library → Send Duda-stored image URL back to Airtable (Make collections more awesome!)

    Liz Fedak • Jan 20, 2022New Paragraph

    Make life easier for your clients and make their sites faster with optimized images by uploading images to Duda from their Airtable base

    In a quest to make a custom widget using 12k-15k records in an Airtable collection as fast as possible and as easy to use as possible, I wrote out a script that uploads images to Duda and sends the Duda image URL back to the base, so it can be used directly in the collection on your website without dealing with the process of uploading the image to Duda yourself and manually grabbing the URL. Please note this ONLY works for image files with the content upload API endpoint.


    Here's some code you can use if you're tech savvy.


    Step 1: Add a scripting block in your Airtable base (requires a Pro plan)

    In your Airtable base, add a new column and use the 'button' field type. Connect it to the scripting app and create a new dashboard for your code. Add this script below. On line 3, replace the word Attachments with the name of your image column where you're uploading images to Airtable. The rest of the code is getting the current base, getting the details for the record in the particular row where you click the button, and grabbing the URL of the image itself and not extra details, like the name of the image.


    Then it calls a serverless function that handles the calls to Duda and sends the response back to Airtable. I recommend using Google Cloud Functions for your serverless function because you can up the timeout time if you need to. The upload resource endpoint takes a while because it is making a bunch of versions of the image over at Duda and doesn't send the final image URL back until it's done.

    let table = base.getTable("Table 1");
    let record = await input.recordAsync('',table).catch()
    const imgUrl = record.getCellValue("Attachments")[0].url;

    const obj = {}
    obj.imgUrl = imgUrl;
    obj.id = record.id;
    let data = JSON.stringify(obj);

    const options = {
    method: 'POST',
    body: data,
    headers: {
    'Content-Type': 'application/json'
    }
    }

    let response = await remoteFetchAsync('{YOUR SERVERLESS FUNCTION ENDPOINT}', options);

    2. Write your serverless function to handle the image upload to Duda and the response to Airtable

    /**
    * Responds to any HTTP request.
    *
    * @param {!express:Request} req HTTP request context.
    * @param {!express:Response} res HTTP response context.
    */

    const fetch = require('node-fetch');

    exports.uploadToDuda = (req, res) => {


    res.set('Access-Control-Allow-Origin', '*');
    res.set('Content-Type', 'application/json');
    res.set('Access-Control-Allow-Methods', 'GET, POST');
    res.set('Access-Control-Allow-Headers', 'Content-Type');


    if (req.method === 'OPTIONS') {
    // Send response to OPTIONS requests
    res.set('Access-Control-Allow-Origin', '*');
    res.set('Access-Control-Allow-Methods', 'GET, POST');
    res.set('Access-Control-Allow-Headers', 'Content-Type');
    res.set('Content-Type', 'application/json');
    res.set('Access-Control-Max-Age', '3600');
    res.status(204).send('');
    } else {

    let id = req.body.id;
    let img = req.body.imgUrl;
    let obj = {resource_type: 'IMAGE', src: ''}
    obj.src = img;
    let arr = [];
    arr.push(obj);


    fetch('https://api.duda.co/api/sites/multiscreen/resources/{YOUR SITE ID}/upload', {
    method: 'POST',
    body: JSON.stringify(arr),
    headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'Authorization': process.env.DUDA_AUTH
    },
    })
    .then(res => res.json())
    .then(function(data) {
    let newImgURL = data.uploaded_resources[0].new_url;

    let responseObj = {
    records: [
    {
    "id": "",
    "fields": {
    "dudaImg": ""
    }
    }
    ]
    }
    responseObj.records[0].id = id;
    responseObj.records[0].fields.dudaImg = newImgURL;
    let responseJson = JSON.stringify(responseObj);
    let airtableOptions = {
    method: 'PATCH',
    headers: {
    'Authorization': process.env.AIRTABLE_AUTH,
    'Content-Type': 'application/json'
    },
    body: responseJson
    }
    fetch("{YOUR AIRTABLE BASE URL}", airtableOptions)
    })
    .catch(err => console.log(err))
    .then(res.status(200).send("Complete"))
    }
    };

    This code is going to read the request object from Airtable, get the image URL, upload it to Duda, wait for the NEW URL, then send that back to Duda.


    In the GCP function, be sure to set the allUsers permission with the Cloud Function Invoker permission and to set HTTP as the trigger. That's about it! Once the new URL is added to your Airtable base, you can delete that old image in the base to save storage space, or simply leave both there.


    FAQ


    Can I use this to upload many images at once? Yes, you will need to write new code that generates the array for multiple images though and gets all of the source URLs. Duda can take up to 10 images at a time with this endpoint. You'll need to make an array of arrays of images and go through each one if there are more than 10 images in a record to be uploaded with a script.


    My image didn't upload. Make sure you're using an image with a .jpeg or .png ending. If it's something you added via an Airtable search, it works like 5% of the time. The Duda documentation specifies that you are required to use a valid image URL, so don't use the .attachment Airtable format unless you want to have frequent failure of the function call. Import a real image file.


    Can you set this up for me? Yep! Reach out for rates/availability. Widget Pro is also able to host your Airtable base in our Airtable Pro account and can configure your GCP function and manage it for a nominal monthly fee, or we can do a training session to get your GCP account setup if you're new to Google Cloud. Your Airtable workspace will need to be a paid Pro plan.


    Can another developer set this up for me? Yep! You can find more Duda Experts in the Duda Community on the Duda Experts page. Widget Pro is a certified Duda Expert, but there are a growing number of other experts available in the directory. Just send them this tutorial and they should be able to make it work to your base and with their preferred serverless function platform.

    A small figurine holding a post-it note

    How to add a 'publish date' field in your Airtable external Duda collection

    By Liz Fedak • 17 Dec, 2021
    Learn how to use Airtable formulas to set up a publish date for your external collection items.

    I Saw a Christmas Tree Roll Across the Road Today

    By Liz Fedak • 16 Dec, 2021
    Today's the official release of my website widgetpro.io, and it almost didn't happen! Read the story to hear about the epic adventure I went on today to ensure I could make this happen.

    Case Study: How I Built the Widget Shop

    By Liz Fedak • 14 Dec, 2021
    Case study on my process when I built the custom widget shop on my website, Widgetpro.io

    Case Study: Content Snare <> Duda API

    By Liz Fedak • 13 Dec, 2021
    Streamline your content collection process using Content Snare and use the Duda API to make a site directly from the Content Snare form when it's complete

    Case Study: How the COPreneur Path Podcast Uses an Airtable External Collection in Duda to Showcase their Episodes

    By Liz Fedak • 13 Dec, 2021
    Learn how StoryWeb Creative used Duda's dynamic pages and custom widgets to manage weekly podcast content for the COPreneur Path Podcast
    Image of 4 letter cards spelling out the word blog

    Blog tags custom widget tutorial

    By Liz Fedak • 13 Dec, 2021
    Build a one-line Duda widget for extra blog functionality

    Build a custom Duda widget that displays an author image and links to their author page

    By Liz Fedak • 13 Dec, 2021
    Tired of the default blog widgets? So was I! ;) Read this tutorial to learn how you can add a custom author bar widget 
    More Posts
    Share by: