Photo upload in webflow and associated zaps

Community Help
#1

Hi guys,

One of the questions in my multi-step signup form is to ask users to upload their photo. Now, I already went through this question which also has a video by Duncan: Show Profile Photo on Profile Page. This video suggests that we use a webflow form submit as a trigger action instead of MS update.

For other actions in my product, I am already using a MS update trigger (I have a webflow + MS + airtable set up). Now, if I set up a Webflow form submit trigger, won’t both zaps be running on each form submission? My point being, everything in my app (or I would guess anyone’s app) which has Memberstack associated with it is practically a form (including basic things like sign-up as well!). So on everyone form submit, both zaps will be getting triggered, wouldn’t it? Isn’t this a super inefficient set up in that case?

Is there a way to isolate only file uploads to run the webflow form submit trigger? So that all other forms are triggered with memberstack itself

#2

Hey Karthik :wave:

Thanks for the question. Is it possible for you to add an upload field to your other ms update trigger instead of using another one?

#3

Hey Josh,

Thanks for the quick revert. I could surely add it to the same zap which is triggered on ms update. However, what Duncan’s post told me here, was that for upload fields, the webflow link isn’t generated until form submit. Therefore, we need the zap to trigger based on webflow form submit instead of ms update.

EDIT: I just tried the flow in my app and all fields are getting stored MemberStack on Submit except the CV upload field. I am using the same “data-ms-member” attribute on the upload button. You can view my webflow project through this link: here.

Look forward to hearing from you :slight_smile:

1 Like
#5

Hey Karthik :wave:

You’ll want to collect the image upload in a separate form that doesn’t submit to Webflow. You’ll want to include a hidden field with the members ID and/or email so you can associate the form submission with their account and pass the information over to Memberstack.

Hope that makes sense! These things get tricky when images are involved.

1 Like
#6

Hey Duncan,

Thanks for the message. I am not sure I understand this completely.

Can you expand what you mean by “You’ll want to collect the image upload in a separate form that doesn’t submit to Webflow”? Don’t all webflow forms submit to Webflow? Is there some tutorial video you might have on this?

1 Like
#7

I’m afraid we don’t have any other tutorials. I think trial & error + some quick prototyping will be your best friend here.

I know it’s going to go something like this:

Webflow form (not a Memberstack form) → Zapier → update Memberstack.

Because Memberstack forms don’t submit to Webflow.

#8

Thanks. I presume I am surely not the first one to attempt to upload files through webflow and save them to Memberstack. Given it is tricky, might make sense to have a tutorial.

What does a “memberstack form” mean? Aren’t all forms “webflow forms” with just memberstack attributes added to them?

Also, you mentioned in your previous answer that it should be a separate form that doesn’t submit to Webflow. Now you have mentioned that the process should be: Webflow -> Zapier -> Memberstack. Wouldn’t that need a webflow form submission as a trigger? In which case wouldn’t we need to submit the form?

If you did mean “a separate form that doesn’t submit to Webflow”, what would the trigger for Zapier be (if not a webflow form submission)? If the trigger is a “webflow form submission” then we come back to the very first question I have asked in this thread of having dupiicate zaps (one getting triggered on MS update and another on webflow form submission, costing a huge amount of zaps).

I hope you understand the lack of clarity here.

#9

@Karthik_Sridharan I’m in the middle of making a new screen cast that walks through this very setup. I don’t have it ready to show you right now (sorry) but I do have a test site up and working with all of these features (this is what the screencast walks through building).

https://profile-directory.webflow.io

Signup for an account (it’s free, I’ll blow it away latter) and upload an image.

Does this get you what you’re looking for?

It uses:

  • Webflow
  • MemberStack
  • Zapier
#10

Hey @ChrisDrit,
This is great. I need to do something similar actually.

If you wouldn’t mind signing up for an account through this link: https://flexiple-jobs-product.webflow.io/candidates/signup (this is free too), you would notice that after sign-up there is a field to upload the person’s CV. I just want to be able to store that in Memberstack, webflow and airtable.

Currently to store the data of any other field, I am using the zapier trigger of “update to memberstack” and then storing the data in webflow and airtable. However, in this case that logic isn’t working because (I guess) the file url isn’t generated till it hits the Webflow server and hence memberstack is actually not updated (basically after clicking update on webflow, only that field remains empty in memberstack).

Would you mind sharing what the zapier trigger is in this case for you? I see that you are using Uploadcare instead of the native webflow upload field. Wonder if that makes a difference.

Thanks in advance :))

#11

Would you mind sharing what the zapier trigger is in this case for you?

Yea, once my screencast is done I always share all of my resources (including the Zapier zaps) but right now it’s still in flux until I’m done.

I see that you are using Uploadcare instead of the native webflow upload field.

Yes, this screencast was going to start the walk through of various file uploaders. Starting with Uploadcare. I do have say, Uploadcare is pretty darn impressive and would definitely work for the use-case you’ve outlined.

I just want to be able to store that [Resume/CV] in Memberstack, webflow and airtable.

I think your architecture is slightly off. That said, most of it will work for you as you’ve described. You don’t need to store a Resume/CV within MemberStack. Worst case you can store it the Webflow CMS, best case you have something like Uploadcare store it securely for you, and just store an auth’ed url to it within the Webflow CMS.

The trick is associating your member in Webflow with your member in MemberStack. It’s really simple to do though, and most of my screencasts walk you through it.

Here’s a good example:

Check that out, see if helps (post questions here if it doesn’t).

That all said, I should have this new one finished shortly. It walks through answering all of the questions you’ve posted.

1 Like
#12

Thanks for this Chris. Can you please let me know what you mean by my architecture is off?

#13

You don’t need to store a Resume/CV within MemberStack.

#14

Hi Chris, I’m looking to building a membership site where users can submit a form with multiple photo uploads after logging in to MS. They can also edit the photos after upload. I’ve checked out your other tutorial with the user editable comment form but I wonder is it possible to achieve something I described above? Thanks in advance if you can guide me to the right direction, and sorry for hijacking this thread!

#15

Hi @motive sorry for the slow reply. Did you get this figured out yet or are you still looking for some help?

#16

Hi @ChrisDrit, no luck for me. I’m still trying to figure out this multiple uploads function. Any help would really be appreciated. Thanks!

#17

I would use Uploadcare.com, they have a free plan to test it all. They give you the ability to hook into your form and through their popup you can upload multiple images, edit them, etc…

#18

Thanks @ChrisDrit. I have tried uploadcare but haven’t done integration with it before. I reckon it acts as a “bridge” from form (webflow/typeform?) to airtable database but how do you think the uploaded images in airtable can be replaced (user editable)?

#19

It’s much simpler than all that. It has a widget, with an “upload” button that hooks into your Webflow form. You click the “upload” button and it’s popup widget handles everything (file uploads, resizing, multi-uploads, etc…) and returns a link that it pre-populates into a hidden form field on your Webflow form. You then submit the Webflow form and you can add that link to an “image” field in your Webflow CMS.

I’ve been meaning to back up my example Webflow project with a screencast, but haven’t found the time yet. You can see the example site here:

https://profile-directory.webflow.io/

Signup with a fake email, you’ll be prompted to create a “profile” and you’ll see Uploadcare in action :smiley:

1 Like