# Database upload almost working

**URL:** <https://forum.wixstudio.com/t/database-upload-almost-working/40324>\
**Category:** Ask the community\
**Tags:** wix-members-area, code, question\
**Created:** [June 14, 2021, 5:25pm UTC](https://forum.wixstudio.com/t/database-upload-almost-working/40324 "2021-06-14T17:25:15Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![simon9978](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/simon9978/32/28481_2.png) [@simon9978](https://forum.wixstudio.com/u/simon9978)\
**Post date:** [June 14, 2021, 5:25pm UTC](https://forum.wixstudio.com/t/database-upload-almost-working/40324/1 "2021-06-14T17:25:15Z")

</div>

Hi all. Have some code that won’t behave and would appreciate another set of eyes to help.

I have a collection that I want users to be able to write to. Right now I have 5 fields:

Name  
Title  
Story  
Summary  
Image

The “Story” field is actually a rich text editor in an HTML box (CKEditor). The other 4 fields are linked to the collection as they normally would be, but the button is not…as I want to pick-up all 5 fields from pressing one button and load the data into the collection. So the button click is sensed by the code, which should then upload all the data.

The other “wrinkle” here is that the name button is autofilled from the PrivateMembersData Collection.

The code I run on the page is as follows:

```javascript
import wixUsers from 'wix-users';
import wixData from "wix-data";

$w.onReady(function () {
  wixData.query("Members/PrivateMembersData") 
 .eq("_id", wixUsers.currentUser.id) 
 .find() 
 .then( (results) => { 
     $w('#input2').value = results.items[0].name; 
 });
} ); 

export function button1_click(event, $w) {
 //Send a blank message to the HTML element. This tells the HTML 
 //element you want it to send you its contents  
    $w("#html1").postMessage(" ");
 //Receive the message from the HTML element
    $w("#html1").onMessage((event) => {
 //Set the value for the rich text field of the dataset's 
 //current item to be the data in the HTML element
        $w("#dataset1").setFieldValue("story", event.data);
 //Submit the current item of the dataset
        $w("#dataset1").save();
 });
}

```

The html box with CKEditor in it is as follows:

```javascript
<!doctype html>
<html>
  <head>
    <!--Define the character set for the HTML element -->
    <meta charset="utf-8">   
    <!--Call the external script to use the CDN CKEditor in your page-->
    <script src="//cdn.ckeditor.com/4.16.1/basic/ckeditor.js"></script>  
    <script type="text/javascript">
	
    //Define an init function that sends the rich text editor contents to the page code
     function init() {       
       //onMessage runs when the HTML element receives a message from the page code
       window.onmessage = (event) => {  
         if (event.data) {
           //postMessage sends the contents of the CKEDITOR back to the page code
           window.parent.postMessage(CKEDITOR.instances.CK1.getData(),"*"); 
         }
       }
     }
     </script>
  </head>

  <body onload="init();">
    <!--Define the HTML element as a textarea-->
    <textarea name="editor1" id="CK1"></textarea> 
    <script>
        //Use the CKEditor replace() function to turn our text area into a CKEditor rich text editor
        CKEDITOR.replace("editor1"); 
    </script>
  </body>
</html>

```

It’s kind of running but with two issues:

1. I have to press the button twice to make it work

2. Although the name field does show up in the text input box, it does not make it into teh collection with the other info.

Can anyone help me understand why I am seeing this odd behaviour and recommend modifications??

Thanks,  
Simon.

---

<div class="post-metadata">

**Author:** ![yisrael-wix](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/yisrael-wix/32/1107_2.png) [@yisrael-wix](https://forum.wixstudio.com/u/yisrael-wix)\
**Post date:** [June 15, 2021, 5:57am UTC](https://forum.wixstudio.com/t/database-upload-almost-working/40324/2 "2021-06-15T05:57:57Z")

</div>

A couple things to note:

- It is not enough to set the value (in code) of an element that’s connected to a dataset item field. You also need to use the **setFieldValues** function (or setFieldValue) to set the fields in the current item of the dataset.

- The [onMessage()](https://www.wix.com/velo/reference/$w/htmlcomponent/onmessage) function of the HtmlComponent **adds** an event handler that runs when the HTML Component sends a message. This should be done in the page’s **onReady()** function. Then, every time the HtmlComponent sends a message, it will be handled by the event handler that was added.

I haven’t tested the code, but what you need is something like this:

```javascript
import wixUsers from 'wix-users';
import wixData from "wix-data";

$w.onReady(function () {
   wixData.query("Members/PrivateMembersData")
      .eq("_id", wixUsers.currentUser.id)
      .find()
      .then((results) => {
         $w('#input2').value = results.items[0].name;
      });

   // add an event handler to receive the message from the HTML element
   $w("#html1").onMessage((event) => {
      // Set the value for the rich text field of the dataset's 
      // current item to be the data in the HTML element
      $w("#dataset1").setFieldValues( {
         "story": event.data,
         "name": $w('#input2').value
      } );        
      // Submit the current item of the dataset
      $w("#dataset1").save();
   });
});

export function button1_click(event, $w) {
   // Send a blank message to the HTML element. This tells the HTML 
   // element you want it to send you its contents  
   $w("#html1").postMessage(" ");
}

```

---

<div class="post-metadata">

**Author:** ![simon9978](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/simon9978/32/28481_2.png) [@simon9978](https://forum.wixstudio.com/u/simon9978)\
**Post date:** [June 15, 2021, 9:25am UTC](https://forum.wixstudio.com/t/database-upload-almost-working/40324/3 "2021-06-15T09:25:07Z")

</div>

Hi Yisrael,

Thanks for the suggested code. Unfortunately, while it’s not throwing any errors in the console, it isn’t writing to the collection all any more…with my limited coding capabilities, I can’t see why not, as what you have suggested seems relatively straightforward. Odd.

I tried commenting out the line that writes the name to #dataset1 and linking that on page to the dataset but it didn’t make any difference.

It’s not database permissions…as I was able to write the collection yesterday.

I hate to ask…but do you have any other suggestions?

Simon.

---

<div class="post-metadata">

**Author:** ![yisrael-wix](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/yisrael-wix/32/1107_2.png) [@yisrael-wix](https://forum.wixstudio.com/u/yisrael-wix)\
**Post date:** [June 15, 2021, 9:42am UTC](https://forum.wixstudio.com/t/database-upload-almost-working/40324/4 "2021-06-15T09:42:40Z")

</div>

So maybe I was wrong. 🤷‍♂️

You might want to put in some console.log() statements in your code to see what’s happening and when. Maybe the onMessage() event handler is not being triggered, or some other issue is causing the problem. If you put in enough console.log() statements, you’ll understand better what’s happening with your code.

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [June 15, 2021, 9:52am UTC](https://forum.wixstudio.com/t/database-upload-almost-working/40324/5 "2021-06-15T09:52:47Z")

</div>

My question would be —\> Why you simply do not use the wix given Rich-Text-Field-Editor, instead of using a laborious html-verion?

 ![](https://us1.discourse-cdn.com/wix/original/3X/9/2/926a7fecfa4cb318ca8e3e6cb2a56499843201be.png)  
I can’t see any advantages of the html-version! So why not using the standard one?

---

<div class="post-metadata">

**Author:** ![simon9978](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/simon9978/32/28481_2.png) [@simon9978](https://forum.wixstudio.com/u/simon9978)\
**Post date:** [June 15, 2021, 10:13am UTC](https://forum.wixstudio.com/t/database-upload-almost-working/40324/6 "2021-06-15T10:13:28Z")

</div>

This is what I wanted all along but didn’t think it existed. I can edit the rich text in the collection itself but I didn’t see any input block that I could drop on my page. I still can’t see it…where is it?

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [June 15, 2021, 10:15am UTC](https://forum.wixstudio.com/t/database-upload-almost-working/40324/7 "2021-06-15T10:15:04Z")

</div>

@simon9978  
[https://www.wix.com/velo/reference/$w/richtextbox](https://www.wix.com/velo/reference/$w/richtextbox)

1. Place the RichTextBox-element onto your page.
2. Create a Rich-Text-Field in your DB.
3. Use it. 😉

---

<div class="post-metadata">

**Author:** ![simon9978](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/simon9978/32/28481_2.png) [@simon9978](https://forum.wixstudio.com/u/simon9978)\
**Post date:** [June 15, 2021, 10:18am UTC](https://forum.wixstudio.com/t/database-upload-almost-working/40324/8 "2021-06-15T10:18:39Z")

</div>

@russian-dima Thanks…will try this instead. Much better than trying to reach outside Wix.

---

<div class="post-metadata">

**Author:** ![simon9978](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/simon9978/32/28481_2.png) [@simon9978](https://forum.wixstudio.com/u/simon9978)\
**Post date:** [June 15, 2021, 10:19am UTC](https://forum.wixstudio.com/t/database-upload-almost-working/40324/9 "2021-06-15T10:19:56Z")

</div>

@yisrael-wix No worries. I appreciate the time you put into answering my question. I’m going to try using the Wix provided approach instead, per Velo-Ninja below.

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [June 15, 2021, 10:42am UTC](https://forum.wixstudio.com/t/database-upload-almost-working/40324/10 "2021-06-15T10:42:07Z")

</div>

Even if you would go the HTML-Version-way, you would still have to solve more issues, for example…

Take a look onto the following example, especialy the received POST-MESSAGES, after typing in new VALUES (sending value by value).

Pay attention onto the received results in the console.  
[https://russian-dima.wixsite.com/my-site](https://russian-dima.wixsite.com/my-site)

The more lines you add, the bigger grows up your RESULTS.

This behaviour you would also have to DEBUG.  
And surely you would run into other problems, when going they html-version-way.😉

---

<div class="post-metadata">

**Author:** ![simon9978](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/simon9978/32/28481_2.png) [@simon9978](https://forum.wixstudio.com/u/simon9978)\
**Post date:** [June 15, 2021, 11:12am UTC](https://forum.wixstudio.com/t/database-upload-almost-working/40324/11 "2021-06-15T11:12:40Z")

</div>

I note that there is actually a rich text input box in the legacy editor but not in EditorX, which I am using. Seems like a strange step backwards for EditorX to me…frustrating, as I can’t figure out how to drop an input field onto my page just with Velo…I am not that good at this.

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [June 15, 2021, 11:21am UTC](https://forum.wixstudio.com/t/database-upload-almost-working/40324/12 "2021-06-15T11:21:17Z")

</div>

@simon9978 Ohhh, i am not familiar with editor-X. There is really no given RichTextBox in Editor-X ?

Ok, Editor-X is still in beta-phase for me. 😁

If so, than you are probably forced to use the HTML-Version 🤔

---

<div class="post-metadata">

**Author:** ![simon9978](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/simon9978/32/28481_2.png) [@simon9978](https://forum.wixstudio.com/u/simon9978)\
**Post date:** [June 15, 2021, 2:14pm UTC](https://forum.wixstudio.com/t/database-upload-almost-working/40324/13 "2021-06-15T14:14:19Z")

</div>

@russian-dima I think you’re right. I need to debug CKMEdit version.

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [June 15, 2021, 2:21pm UTC](https://forum.wixstudio.com/t/database-upload-almost-working/40324/14 "2021-06-15T14:21:11Z")

</div>

@simon9978  
Then take a look onto the very bottom of this post and start your debuging from there…

---

<div class="post-metadata">

**Author:** ![simon9978](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/simon9978/32/28481_2.png) [@simon9978](https://forum.wixstudio.com/u/simon9978)\
**Post date:** [June 15, 2021, 4:48pm UTC](https://forum.wixstudio.com/t/database-upload-almost-working/40324/15 "2021-06-15T16:48:21Z")

</div>

Hi Gents, I have this working now - with one caveat.

Turns out to have primarily been a missing # in the code on #dataset1 and a field name wrong also…easy fixes. It now uploads the data OK.

However, CKEDITOR has huge margins and the rich text blocks that I am displaying from collections do not. This means that paragraphs look well spaced in CKEDITOR but have no additional spacing (compared to a line feed) when displayed on my page. What I have been doing in the collection editor is adding returns between paragraphs and then it looks fine but I can’t very well expect users to do the same, given that the paragraph spacing looks fine in CKEDITOR.

Does anyone know whether there is a way to fix this in Wix? I can see numerous recommendations of using CKEDITOR in these forums but I can’t see an answer to this problem. The usual recommended solution from CKEDITOR is to modify the CSS but without a way to post a CSS file in Wix, this isn’t a great solution for me. Suree would be nice if there was a rich text editor input block in Editor X, as I briefly thought this morning, as this would then be a non-issue for me.

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [June 15, 2021, 7:08pm UTC](https://forum.wixstudio.com/t/database-upload-almost-working/40324/16 "2021-06-15T19:08:41Z")

</div>

You CAN use CSS in HTML-Components!  
And it is always usefull to give more details about your issues.

You were talking about some …

> This means that paragraphs look well spaced in CKEDITOR but have no additional spacing (compared to a line feed) when displayed on my page  
> Perhaps a screenshot would be useful to understand your isse better.

You are talking about some bugfixes in your code, how do look like your UPDATED\_CODE?

And what about the other mentioned issues on the top of your post?

> This means that paragraphs look well spaced in CKEDITOR but have no additional spacing (compared to a line feed) when displayed on my page

---

<div class="post-metadata">

**Author:** ![simon9978](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/simon9978/32/28481_2.png) [@simon9978](https://forum.wixstudio.com/u/simon9978)\
**Post date:** [June 16, 2021, 9:05am UTC](https://forum.wixstudio.com/t/database-upload-almost-working/40324/17 "2021-06-16T09:05:15Z")

</div>

Hi again. Sorry…I nearly put screenshots in yesterday but tried (and failed) to get the job done with words.

This image shows how text looks in the CKEditor. It adds gaps between paragraphs, as I would generally expect it to do…ie it has biggish

margins.

 ![](https://us1.discourse-cdn.com/wix/original/3X/0/2/02bd827a3c54fc495961aa5e48b55eb2df8864c6.png)

This next image shows how it looks In both the collection rich text editor field once uploaded (in the manage content view) and on the live site itself. Its rendered in paragraph P2 font (font-8) live. The

margins are different though.

 ![](https://us1.discourse-cdn.com/wix/original/3X/2/5/2529291d52d96bfb11bc4211c757719e8a45215f.png)  
So I need to add CSS that will control how CKEditor renders the text it is editing…otherwise, when the user thinks his paragraphs look nicely separated in CKEditor, they will actually look more like one massive paragraph. It looks to me from their site that this is only possible using a .css file.

Any idea how to achieve this?

Alternatively, could you recommend how to perhaps add CSS that would change the way the text is displayed on the live site (ie increase the

margins so that the correct spacing is added…just in that text block? Can that be done in Velo code?

---

<div class="post-metadata">

**Author:** ![simon9978](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/simon9978/32/28481_2.png) [@simon9978](https://forum.wixstudio.com/u/simon9978)\
**Post date:** [June 16, 2021, 12:26pm UTC](https://forum.wixstudio.com/t/database-upload-almost-working/40324/18 "2021-06-16T12:26:40Z")

</div>

This is my final code, which appears to be working. Hoping I can fix the spacing issue now.

```javascript
import wixUsers from 'wix-users';
import wixData from "wix-data";
import wixWindow from 'wix-window';

$w.onReady(function () {
   wixData.query("Members/PrivateMembersData")
 .eq("_id", wixUsers.currentUser.id)
 .find()
 .then((results) => {
         $w('#input2').value = results.items[0].name;
 });

 // add an event handler to receive the message from the HTML element
   $w("#html1").onMessage((event) => {
 // Set the value for the rich text field of the dataset's 
 // current item to be the data in the HTML element
 
     $w("#dataset1").setFieldValues( {
 "story": event.data,
 "source": $w('#input2').value
 } ); 
 // Submit the current item of the dataset
      $w("#dataset1").save();

      wixWindow.openLightbox("SuccessfulPost");
 });
});

export function button1_click(event, $w) {
 // Send a blank message to the HTML element. This tells the HTML 
 // element you want it to send you its contents  
   $w("#html1").postMessage(" ");
}

```