Converting Image into URL

Ask the community
, ,
1

Hi, I have created a form (NOT using Wix Form) to allow visitors to submit their particulars and upload some images. These input fields have been connected to a collection which will then export the data to my Google Sheets via “Automation” by Ascend. As images can not be connected to my Google Sheets, I need the images to be in url format whenever a visitor submit the form.

“Wix Form” has this setting but I do not want to use the element due to;

  1. pages are in multi-state box which is very laggy

  2. text fields do no have Regex Validation

Example of what I want to achieve:

  1. Visitor submits “Name”, “Mobile”, “Image 1”, “Image 2”
  2. Data Collection will have the Name and Mobile along with the url of Image 1 and Image 2 in the same row.

Thank you in advance!

1464×523 12.7 KB

2

The user uploads an image.
You get a Wix Media URL.
If you wish to use it on external sites/emails, you should convert it into an https URL.
It’s up to you to decide if you want to convert it before you save it (i.e. to save the converted URL) or to save the Wix Media URL and to convert it on query.

Any way in order to make the conversion you can do:

const externalUrl = 'https://static.wixstatic.com/media/' + wixMediaUrl.split('/')[3];
3

another suggestion depending on your approach/preference. getFileUrl takes a parameter of the media upload url and converts it to https. This is a backend only API.

4

@jonatandor35 Thank you very much for noticing my query, really appreciate very much!

I am using “Wix Automation“ to automatically send all input answers to google sheet. Due to the limitations of the Wix Automation, I am using a Button connected to my dataset once visitor complete the form. Once visitor submit the form, the Automation will then trigger to Google Sheets (which images can’t be connected in the Automation page).

Form includes Text inputs and 3 Images. I used onChange function to Upload images once they complete uploading but they would not be at the end of the form to click on the Submit button yet. Therefore it will not be entered into the Dataset.

I would assume that the flow would be as follows;

  1. Visitor fill up Name

  2. Upload 3 Images (onChange will start uploading the files with $w(“image1”).uploadfile

  3. Visitor continues to fill in other questions. So far, all input elements are connected to the fields in my “Collection” dataset

  4. Lastly, onClick Submit button, all items will be saved in the dataset which Images will be in Image format.

  5. I need to add onClick function to the Submit Button to retrieve the Url of the 3 uploaded Images and query to replace the Images in it’s correct field (all within the same row inside Content Manager, on one single click of the Submit Button to Trigger the Automation)

Is that correct? Something like
$w(“upload1”).onChange function
$w(“upload1”).uploadfile;
let upload1.url = ???;
$w(“upload2”).onChange function
$w(“upload2”).uploadfile;
let upload2.url = ???;
$w(“upload3”).onChange function
$w(“upload3”).uploadfile;
let upload3.url = ???;

export fuction $w(“btnSubmit”).onClick
wixDate.query(“Collection”)
.eq(“firstName”, $w(“#firstName”).value)
.then((replaceImgWithUrl) => {

})

I really appreciate if you could help!
If you used the Wix Form, you would be able to understand what I require.

5

1224×200 36.4 KB

This was what Wix Form was able to do.

  1. Visitor fill up the form consisting of Text and Images Input.

  2. Images submitted would be converted into URL and Triggered to appear on my Google Sheets

6

Someone help me please?