Free Image Upload for Webflow Forms with Uploadcare

hello everyone my name is eer and today I will be talking about how to use upload care in webflow for you to have a free upload of images and files in your forums uh in the flow website so we'll be integrating um uh uploader which will look like something like this so it can be uh this kind of style minimal it could be like different like dark mode light mode and it's very easy to use in web flow and today I will be talking about how to actually do that so uh first of all uh I have a project here I have a form um I have some custom code here like I have some HTML in beds uh this is what we will need to um set up the thing and uh first of all we need to go to upload care you need to create your project uh you can start for free and uh we need to go you can go to this page like get started and uh um actually you don't need to go there we you go to file uploader and uh you will have this really nice UI which helps you to customize uh the feel and the look of your uploader so uh you have two options uh the first is like model which will look something like this and you have like a minimal uh which is like very very minimal U as it's called Uh UI for uploading files and images so uh let's start with uh minimal I guess uh and we have choices to make it like light mode or dark mode you can choose your um kind of like color theme you can even probably have your own uh uh color here I will use the default uh white one uh you cannot use image editor because it's not supported in a minimal mode we will uh talk about that when we go for a model uh we go next uh uh we can choose like whether we want to upload any image any files or only images uh I guess like on the free plan you can only upload images so let's put images uh here you can set like the maximum file uh size for your image uh let's say it's going to be like 10 mbes then uh we can like upload multiple files at the time or like single files so like this time to make things simple we will go with single file so we go next and uh now we have uh some instructions about how to install our uh model right how to install our uploader so we choose the uh Library like we install from CDN and we have the first script here like to bring this script of upload Care on our page so we go to the flow we go to page settings and uh we put it inside of head okay now we go into uh configure section so we choose we we copy this code and this code actually has to be uh inside of um uh style text so we write like style here again style and I just put it inside so this is my config um I actually can add a lot of like different variables and different CSS here uh for uh for this uploader so we can play around with this so and we need to add this uh config file so we go also copy it and we put it under the style okay that's it uh be sure to change this like if you if you like copying it from my clonable like don't forget to uh change this uh public key uh you need to put your own public key which you can find uh I will tell you later um you can find in your project settings so um that's it and we save it and I have a custom code here on in actual form and there we need to put this uh thing put it on a page we also copy it and we put it here inside looks a little bit ugly but never mind uh okay and uh now we will publish and we will see how it actually works on the live website and this is it so this is my file um I can choose uh let's say I will upload my photo and you can see this really nice animation of how the f file is been uploaded and I also set up some custom code to have the ID of my uploaded file and to have a CDN URL of my uploaded file uh placed in my uh form fields uh because uh we are not going to have any any kind of like input field uh from this uh videt so we can actually go into the code and um you will see that there is actually no absolutely no uh input here so like you cannot really send any data from just having this the uh pidget so that's why we need to have other fields with uh actual data from the file uh I will show you the snippet later uh so let's go back to our project and we can see that I have my uh file so this is the file uh we have our uid here um and many kind of like different things uh yeah so this is basically the uid which we got here also and uh let's now go and try to set up a model like not the minimal version not like this one but uh set up a model model so let's go to file uploader again and choose the model here and I still choose this one image editor now we can turn it on let's go next uh we can choose like where I want to get my uh files from so we can have a lot of sources good uh let's do it also only images let's do it like 10 megabytes single file next and uh again we have this thing so most of these things they are pretty much same but like just to make sure that we don't uh mess up with code let's go and have the same things here so this script it's actually completely same I guess uh we go into configuration so here I think it should be also quite same yep absolutely the same and uh I think this one one will be a little bit different [Music] so yeah this one was quite different okay cool uh we have our new uh configuration and uh for this part we also change it with this like later one like put on the page thing so we copy this and change it here okay save and now let's publish and see how it works okay cool uh now we have this kind of like button here right uh and uh we press upload file and I can drag and drop the thing here I can choose from my device I can choose from like camera Dropbox like Facebook whatever uh I get like from my device I want to upload the same picture and um I have it uploaded and I think this one is the image editor actually so I can cut my image make it like this uh you have like different options like to edit image okay uh looks good and this is done so I have my uid and my URL again here uh we can submit this data and I will see it uh in my form submission uh and we can use this uh data to um let's say send this uh image like put it in our CMS or let's say if you're using like member stack or some other like um membership system you can use this uploader for sending the image data to your profile uh picture fields in the membership system so there are many use cases for that um and uh there are yeah many many things which you can do and I also want to uh mention how we uh have this uh uh data here inside of our uh Fields so if you go to my uh setup you will see that I have one more HTML embed here and uh this is kind of like we have uh event listener so we're listening to event when upload is finished and uh I put like this data inside of console and then I have uh this like two uh um Fields uh with IDs like U uid field and URL field and we get the data from uh uid and CDN URL to put them inside of our form yeah and um that's basically it uh this is very simple way how you can have your um file uploader uh in web flow completely for free and uh with a really nice interface with really nice UI uh you can go in uh you can check actually the this this file and uh you'll see that in many things it h it's using like um variables so you can you you see like this is like variable here and you can change this value by uh just adding the those to configuration here uh together this variables you can add them here and you can put your own values for like let's say the Border radius like for the background colors like anything uh you can have your own uh CSS and you can really customize the look and feel uh of your uploader uh of your like upload care uh file uploader uh yeah that's basically it I hope you uh enjoyed the tutorial and you will like using upload care for your overflow forms and you will build really nice use cases with this feature thanks and um yeah see you in the next video bye

Channel: Igor Voroshilov

Views: 1,222

Keywords:

Id: F_F2LQuIy9s

Length: 11min 8sec (668 seconds)

Published: Fri Nov 24 2023