Uploading image urls via Memberstack form on Webflow to Airtable

Hey everyone. I am looking for support with my Webflow, Uploadcare, Memberstack, airtable integration. Curious if anyone might have a solution.

Let me preface. I am not a developer, but I was able to cobble together a solid automated workflow using online resources. So I am looking for a hopeful lowcode/no code solution. Customizing APIs and backend is a little outside my wheelhouse.

I have a Webflow website that I am using for a non-profit membership website. I have successfully integrated a Memberstack form for users to input their information. This auto creates/populates a new memberstack user or updates a memberstack user as necessary. Since the form is a Memberstack form embedded in Webflow, it has all the throughput data.

I then have Airtable watching for changes to automatically create a new row or update user information based on updates. This is using Airtables internal automation (not zapier). Works great.

Then I use Zapier to port this information into the Webflow CMS. We do this because there is an approval process that happens and airtable is both the source of truth and the gatekeeper for this approval process before the new members account appears on the website.

Everything works great, but I am stuck on the image. I’d like every member to have a profile photo that they can upload. The Uploadcare user interface is great and would work well, but I can’t seem to get it to track through to memberstack appropriately. The upload feature does a great job of uploading the image to the Uploadcare system, but I can’t figure out how to accurately get the image URL to a memberstack field. It seems uploadcare is uploading independently. Since I can’t rename the file on upload (say to append the memberstack ID), I can’t have zapier or some system search uploadcare for the correct image.

Eventually I’d like to add a photo reel section to each member page, so they can upload custom photos/videos that show on their unique pages. That’s step 2 though; step 1 is figuring out profile photos.

It’s 1000% likely I’m missing something, so I thought I would reach out

Hi @Ian-DPA, we haven’t had much experience with these no-code tools, but I think what you’re looking for is feasible.

So, you have a Memberstack form, and if I get it right, the uploader is added to this form. If so, and it has a name attribute, then you should receive a file URL in form data when a user submits the form. I know that Webflow doesn’t allow users to add hidden input elements, and you’ve probably added a text input instead. In this case, you may need to add some JS to populate the input with a URL. Would you be able to share a link to the form so we can inspect it?

Hey Alex - Thanks for your support.

I created a test site that demos the current WIP site HERE.
The uploadcare is on the bottom of page 3 of the signup. It’s in test mode, so you won’t need to pay.

Memberstack has a handy integration guide. I have dropped the top part in the custom code section of webflow, but the bottom script I am a little unclear on where to add or what specifically I should put as the var name. If I was adding it to webflow it would be something along the lines of data-ms-member=“company-photo”

In addition. I don’t want a redirect on successful upload using the window.location.replace feature that seems to be built in. Since the uploadcare widget is a part of the overall sign up page, I want the memberstack/webflow form to work and take the user to /user/step-4 instead of the script taking the user there after successful upload