Failed setting items: TypeError: Cannot read property 'length' of undefined

Ask the community
,
1

Hi,

I am having an error as: Failed setting items: TypeError: Cannot read property ‘length’ of undefined
when I apply the following code:

import wixData from 'wix-data';

export function uploadButton1_change(event) {
 if($w("#uploadButton1").value.length > 0) {
    $w("#uploadButton1").value[0].name};
    $w("#uploadButton1").startUpload()
      .then( (uploadedFile) => {
           wixData.insert("User-GeneratedContent", uploadedFile).then(() => {
                    $w("#dataset1").refresh();

            })
      })
}

Please help me out to solve the issue!

Thank you

2

Hello andrew choi ,
Well first at all, w hy you do not explain and clarify your situation (issue) and give us some facts about your problem?

For example: (the facts are…)

  1. I have a data-collection …
  2. which has a DATA-reference (column), named “upLoadFile”
  3. I also have a dataset on stage, called “dataset1”, which is connected to my data-collec tion.
  4. And least but not last, i have an UPLOAD-BUTTON, called “uploadButton1”.
  5. Ohhh, i forgot to say that the name of my data-collection is “User-GeneratedContent” in which i want to save some upload-stuff.

Ok, now i can imagine what you want to do, perhaps now i can help you…

Take a look at this post i have found…
https://andreaskviby.wixsite.com/classifieds/new-ad

3

Thank you for the help! Ill check it out.

I will make sure to post with further details :slight_smile:

4

Please note that Andreas Kviby has not been connected with Wix for a good while now, so please don’t try to message him through the forum as you will not get any reply from him either through here or on any of his Wix Show videos on YouTube.

However, there are YouTube videos and guides that you can still access from him like the Classified Ads example, along with his Wix Show YouTube videos which you can see here - Wix Show YouTube

5

Thank you for letting me know :blush:

6

Thank you for the demo-example. It just made my day!

It is exactly I was trying to achieve, and everything works fine except the following part:

The Image I uploaded will be uploaded and displayed on #gallery as shown below when I upload an image, but It is not delectable once uploaded.

Is there a way to delete the uploaded images?

I added the code below for reference.

Thank you for the help!
:grin:

2527×1011 88.9 KB

// For full API documentation, including code examples, visit http://wix.to/94BuAAs

let uploadedImageSizeLimit = 15000000;
let databaseNumberOfImages = 10;

$w.onReady(function () {
 //TODO: write your page related code here...

});

export function uploadButton_change(event, $w) {
 
 if ($w("#gallery").items.length > 0) {
 
 if ($w("#gallery").items[0].title === "noImageUploadedImage") {
 let items = $w("#gallery").items;
            items.splice($w("#gallery").items[0], 1);
            $w("#gallery").items = items;
        }
    }
    $w("#gallery").show();

 let selectedFile = $w("#uploadButton").value;
 let selectedFileSize = selectedFile[0].size;
    console.log(selectedFileSize);

 if (selectedFileSize < uploadedImageSizeLimit) {
        $w("#uploadButton").buttonLabel = "Uploading...";
        $w("#uploadButton").startUpload()
            .then((uploadedFile) => {
 let uploadfileurl = uploadedFile.url;
                console.log(uploadfileurl);
 let items = $w("#gallery").items;
                items.push({
 "src": uploadfileurl,
 "description": "",
 "title": ""
                });
                $w("#gallery").items = items;
                $w("#uploadButton").reset();
                $w("#uploadButton").buttonLabel = "Upload more";
 if (items.length > databaseNumberOfImages) {
                    $w("#uploadButton").hide();
                } else {
                    $w("#submitButton").enable();
                    $w("#dataset1").setFieldValue("Gallery", items);
                }
            })
            .catch((uploadError) => {
                console.log(uploadError);
                $w("#uploadButton").reset();
                $w("#uploadButton").buttonLabel = "Upload";
 
            });
    } else {
        $w("#uploadButton").reset();
    }
 
}

export function submitButton_click(event) {
 let nrOfImages = $w("#gallery").items.length;
 if (nrOfImages > 0) {
        $w("#dataset1").save()
        .then((saved) => {
            console.log(saved);
        })
    }
}