Add Uploadcare to Form

Hey Guys, just looking for some advice, I need to add https://uploadcare.com/ to a form element for handling customers images and just need to know if this is possible and how it can be done before I start. I also need to integrate something like stripe or similar into the form as a method of payment. I’m basically trying to create something like http://printstagr.am/ I’m not to hot with code so be gentle with me :slight_smile:

Any help appreciated
Cheers,
Matt

2 Likes

A question about the widget…

Does the widget provide a fix width crop ?
– ie: you know you need every image as 200x100 (hXw)
– so crop area always defaults to 200x100 and cannot be changed ?

Do the images have to be hosted on your service ?
– or is this a download widget.

Hi Revolution, yeah you can crop and do all kinds of other image manipulation from within the widget settings, and you can also setup custom storage to a Dropbox or an Amazon s3 bucket, but I’m still trying to figure it out for myself at the moment, but you can start a free account if you want to play around with it.

@Revolution would you know how to implement this into a form in webflow?

should be able to do it with jquery.

I’ll try to take a look this weekend… time is a little tight…

  • have bootstrap 7 sites to build this month - 4 down 3 to go.

Is @bartekkustra around ? He could probably whip up a faster / better solution.

Thanks @Revolution and good luck with your 7 sites!

@Revolution @mattbrant1981 I will look at this today or tomorrow and will post a video on how to set this up.

Speak soon!

2 Likes

@bartekkustra That’s awesome thanks for your help!
Cheers

Hey @bartekkustra I don’t mean to be a pest, but by any chance did you have a look at how to integrate this?
Cheers

Oh boy, I am so sorry!!! Thanks to my regular job and implementation of new application update I have totally forgotten about this. I have registered for this uploading service already. I will look at this today. I promise! Once again I’m very sorry… :(

Thanks @bartekkustra no need to be sorry : )

This one fell off my plate also. I’ll take a look.
Hopefully someone can come up with with a quick solution.

Cheers @Revolution Its relatively easy to add the widget and get it uploading pictures, but I don’t know how to get it to only submit the pictures until the order form is complete!

@mattbrant1981 what do you mean by that?

What I need to do if it’s possible in webflow is that when the customer chooses a product it takes them to an order form which they can upload their images then pay for the product. So I would get the customers order address and payment and the pictures would be uploaded to uploadcare when the form is submitted.

@mattbrant1981 did you every find a solution to this inquiry?

@BWLackore I didn’t and I’ve not had a chance to experiment with it yet myself, but soon as I can get it working I’ll let you know.

Did anyone get this working? Its an old post but still relevant for my circumstances and I am sure for others.

Wanted to have an upload button on a form and found this post. I gave this a go today and it works really well.

Signed up and on the widget settings page in uploadcare I took the 2 script files added them to my footer scripts in the site dashboard. Then added a form and used an embed to add the input.

Published and tested and it worked perfectly. I could upload files as expected.

3 Likes

Hi @andyjames,

I’m still trying to add it to my site so I’d be interested to see how you implemented it.

I’m currently using filepicker.io and Jotform, but would like to do it natively as you have with uploadcare, as they are cheaper than Filepicker.

Its is pretty straightforward.

  1. Setup and account at uploadcare.com

  2. Login to the dashboard create a project

  3. In project settings click on widget and select the options you want and scroll down

  4. Copy the JS scripts

  5. Open webflow dashboard and in site settings → Custom code paste in the scripts

  6. Open site in webflow and add a form block where you want a form

  7. Drag a new embed element into the form where you want the upload button

  8. Copy the input from the uploadcare project page eg:

  9. Paste this into the embed element and save.

Now you should have uploads working and going to your uploadcare project.

3 Likes