Wix Velo Image Upload and Save Image Into Database Wix Collection

hello and welcome to my youtube channel our today’s topic is how we can upload images in wix and as well as save the image into database so here we will create a wix page and add some field first we add a heading title of the page is an example now we will i will create true field first name last name and image field to upload an image here you can change it’s a textbox i id first name you have to enable dev mode to write code in wix last name
id now i will add upload field upload button you can select any design according to your theme you can also change the design custom design upload button now you have to add a button to submit this data you can write these field using a wix form or without a wix form so here we will add a button submit button name is submit and button id is this now we will create a on click event of this button here is on click event you can also add validation
in the form like if emerges image field is empty no image is selected so you can display error before without inserting data into database you can display error like upload image before saving data you also have to create a new collection click on add sign new collection give a name to your collection like student and additional setting go into additional setting and who can submit the form from submission anyone can submit data to the collection
or you can also select custom permission and anyone can submit mostly i select this option it will create a new table here here comes the new table student so you have to add field so currently we have only three field first name it create the id of the table you cannot change the id once it is created last name and image image type will be image save okay now we will add code here first we will check upload button upload button dot value dot
length if we will use if condition if length is greater than zero now you can if you want to upload data without image you can add the insert code here and else what else part otherwise you can display error upload image let’s say i will show an error we will add a new text field text message change its color to black and change its id message and hide it first message dot text is equal to please choose image and show this message expand okay now
we will start uploading here upload button dot start upload then upload file upload file here we will get url image url upload file dot url so let’s start it will start uploading the image and on image upload successful we will image will be uploaded in wix media but we will save the url of the image into our collection week collection so here we will create a variable in arraytime variable to insert we have three column in our week’s collection
three field like first name here we will link it with first name field fname dot value last name with the last name dot value and image these are the wix collection fill ids wix collection ids these are the weeks collection id and these are the offer page ids how much how many we have field in the page we will connect it with the wix collection field oh sorry here i will add image url of the variable we have created above so now i will use here
we will import wix library wix data you have to import this library to use wix queries for insertion update or any other purpose objects data dot insert here you have to give the collection id wix collection id student and add here array variable then result this is the part if data is inserted successfully cache is the part if there is any error during the insert process we can display error message also in the in this message variable sorry
message dot text is equal to error and expand this variable in this message field expand otherwise we will display a message dot text is equal to and expand this message expand okay let’s preview this page first name last name submit please choose image select an image and submit it is submitting the data data saved successfully so this is the tutorial about how you can upload images in wix and save images into database let’s i will show you the
inserted record in the database here you can see so this is the sandbox you have to publish your website to check this on your live website to insert data into your live website you have to publish your website so thanks for watching this video you can subscribe to my channel to watch more video tutorial about wix velo or php coordinator and jquery