How to let users upload and manage photos in their portfolio? Answered

Post author
Marko Guzvic

Hey everyone. I need some guidance here.

How would I go about making users able to upload photos to their portfolio?
So that they can always remove them or upload more.

Thanks in advance!

Comments

12 comments

  • Comment author
    Kyle Karnes

    A great tool is Uploadcare. The integration is very simple, and the tool has a free plan with a pretty generous upload limit/bandwidth.

    0
  • Comment author
    Shadi null

    Or use this for free šŸ™‚
    (memberscript 38)

    https://www.memberstack.com/scripts/file-upload-field

    Or if you mean to build your own system where people can create a new portfolio item and update them/delete them, then I encourage watching Chris Drit's amazing tutorial on creating memberstack/webflow user specific CMS item edits. Incorporate it with the memberscript 38 and you're golden, for the price of 0$
    https://www.youtube.com/watch?v=J_VbHn5Omkw

    0
  • Comment author
    Marko Guzvic

    Shadi null I am using Zapier instead of Make, and I’m not getting any data from #38 Form..

    Okay so I tried using Webhooks and I’m now able to upload images with native file upload, I don’t even need the script šŸ˜„

    Thank you for your help!

    Yeah I almost forgot. I would like to upload more than just 1 image. Is that possible?

    Actually I needed the script! When I removed the script it stopped working

    0
  • Comment author
    Shadi null

    yea, I use the script to upload multiple images šŸ™‚

    glad its working

    0
  • Comment author
    Marko Guzvic

    Shadi null How tho? I can only upload 1 photo at a time

    Also it just works when testing inside Zapier. When I publish it it for some reason doesn’t work. Zap just doesn’t activate for some reason

    0
  • Comment author
    Shadi null

    I honestly stick to Make instead of zapier, so I don’t have much experience with making zaps.
    However from my experience with make, multiple uploads in one form is definitely possible. I use it in one of my forms which requires 1 or more images to be uploaded by the user.

    0
  • Comment author
    Jonathan Gallegos

    Anyone have a script (or other workaround) that can pass through an uploaded file's URL? When i use webflow's native Form File uploader it only passes through the actual file

    This is what comes through the webhook

    I tried Julian Galluzzo's masterful File Field Upload script, but don't think it's going to fit the bill for this.

    For others wondering, for some reason Zapier natively passes through the file URL. Just used zapier for this fix and it works perfectly.

    0
  • Comment author
    Abdelhalim WithDev

    Hey Jonathan Gallegos try using uploadcare for uploading files. it passes a URL and there is a workaround for uploading multi images as well. I tried it already.

    Edit: I saw you used Zapier and everything is fine but anyway you can use uploadcare when you don't have access to use the native file upload component form Webflow.

    0
  • Comment author
    Brad Nemer

    I’m using make.com right now to use the script #38 scenario to upload a profile image. All I need is to get the image URL so I can send it to webflow.

    There’s no ā€œtriggerā€ set, because the member would have already been created.

    Basically, I want to get the member ID of someone who is logged in, so that when they update their profile, make.com knows which record to store the new data into.

    This might be the wrong term, but I need it to ā€œlistenā€ or just magically KNOW what member ID is logged in and making updates.

    Hopefully that makes sense...

    0
  • Comment author
    Raquel Lopez

    Hey Brad,

    If you need to get the current member id you can use this the method to get the member object details

    await memberstack.getCurrentMember()

    Docs: https://developers.memberstack.com/docs/dom-front-end-package#get-current-member

    Are you using a Form to send data to make?

    0
  • Comment author
    Brad Nemer

    Thanks Raquel! I am using the script #38 (https://www.memberstack.com/scripts/file-upload-field) and I just simply imported the make.com automation and connected my sources, and then updated the webhook into the webflow form.

    where do i put that object detail (await…) In make.com…

    SIDE NOTE: Are you willing to assist with this at all? I’m happy to pay you for one on one walkthrough of this. This is over my head but I feel like if someone just walk through it once with me ill get it forever.

    0
  • Comment author
    A J

    Hey Brad Nemer, since what you are looking for is simple, can you try having another input in the update profile photo form, but keep it hidden.

    And add the attribute in Webflow to that input field

    data-ms-member="id"

    Since this is a form and you are listening to it on Make, this should get the logged in Memberstack member ID for you.

    0

Please sign in to leave a comment.