Inserting Attachments in Create Record Airtable API

This article discusses how you can insert attachments to the Airtable’s Table using Custom JavaScript Code and Airtable Connector. To follow along make sure you have set up your Airtable Connector inside the DronaHQ Studio, if not then read this article.

For this use case, we have created a Table with 2 fields, Email and Attachments. The Email column field type is set to Single Line Text and Attachments column field type is set to Attachment.



Inside the studio, we have taken one textfield for email input, one file upload control for uploading attachment images and one button “Insert Record”.



Upon the button’s click action, add a File Upload service which will upload only the first file from the File Upload Control onto the DronaHQ CDN and will return the public url for the file uploaded. In the File field make sure you select the File Upload Control, in our case it is attachment.



Add a variable which will store the uploaded file url, we named the variable as file.



On the success branch of the File Upload Service, add a JS Code Block with the File Upload Service output as input parameter to the function.

Code

output = [];
if(typeof url === 'string') {
  var obj = {};
  obj["url"] = url;
  output.push(obj);
} else if(Array.isArray(url)) {
  for(let i = 0; i < url.length; i++) {
    var obj = {};
    obj["url"] = url[i];
    output.push(obj);
  }
}

Now create a variable which will store the JS Code’s output, in our case it is urls.



Now add the Airtable Connector and select the Create Row option. Bind the Email field with the Email textfield and Attachments field with the JS Code Block output.



This step is optional, you may add toasts to the success and error branch of the Airtable Connector.



Now run the app, enter the email and select an image using file upload control and click on the “Insert Record” button.



In the Airtable table, you will see the newly added record.