Upload Image with Wakanda 2

Question

I have added the following property to the wakanda 2 / angular 4 todo tutorial code: todoPicture: type image

When I like to upload an image to an existing todo item I get the following:

todo.todoPicture.upload(file).then( result =>{ console.log('saved !') })

file is the file from an input todo is an valid entity.

result: [Error] ERROR – TypeError: undefined is not an object (evaluating 'todo.todoPicture.upload') TypeError: undefined is not an object (evaluating 'todo.todoPicture.upload') error View_TodoComponent_1 (TodoComponent.ngfactory.js:13) logError (vendor.bundle.js:14702) (anonymous function) handleError (vendor.bundle.js:2375) (anonymous function) (vendor.bundle.js:10527) (anonymous function) (vendor.bundle.js:20184) onInvokeTask (vendor.bundle.js:5176) runTask (polyfills.bundle.js:2809) invokeTask (polyfills.bundle.js:3116) invokeTask (polyfills.bundle.js:4157) globalZoneAwareCallback (polyfills.bundle.js:4183) [Error] ERROR CONTEXT – DebugContext_ {view: Object, nodeIndex: 9, nodeDef: Object, …} DebugContext_ {view: Object, nodeIndex: 9, nodeDef: Object, elDef: Object, elView: Object, …}DebugContext_ error View_TodoComponent_1 (TodoComponent.ngfactory.js:13) logError (vendor.bundle.js:14702) (anonymous function) handleError (vendor.bundle.js:2380) (anonymous function) (vendor.bundle.js:10527) (anonymous function) (vendor.bundle.js:20184) onInvokeTask (vendor.bundle.js:5176) runTask (polyfills.bundle.js:2809) invokeTask (polyfills.bundle.js:3116) invokeTask (polyfills.bundle.js:4157) globalZoneAwareCallback (polyfills.bundle.js:4183)

When printing todo to the console i can seel all other properties but not todoPicture.

Do i need to initialize the todoPicture property when creating the new Todo item first.

At the moment I just have: ``` let todo = ds['Todo'].create({ label: this.newTodoText, completed: false,

        });
        todo.save().then(() => {
            //alert('saved');
            this.todos.push({
                ID: todo['ID'],
                label: this.newTodoText,
                completed: false,

            });
            this.newTodoText = ""; 
            this.getTodos()
        });

```

PS: instead of downvoting, you rather reply with a solution. That would be much more constructive. Or at least write a comment why you think you need to downvote. That would give me the chance to improve my question.

The todoPicture attribute may be missing from your todo dataclass, please double check if you have it in data model. And if you can access it from server side before accessing from client-side. — Xiang Liu, Apr 12 '18 at 18:52
I added an Image of the Model to make it more clear, thank you for the reply ! I havent tried to access it form the server yet. — daslicht, Apr 13 '18 at 03:34

Xiang Liu · Answer 1 · 2018-04-16T19:07:47.437

Looks like you added the todoPicture image attribute to the tutorial from https://wakanda.github.io/doc/#/tutorial?section=main-todoangular.

Here are a couple of suggestions to debug this:

Please the first test with Backend Image Attribute access to see whether the image attribute is available in your datastore. If so, create a few entities using datastore API and see if you can access them on client-side using find() or query().
I think the image upload() requires an existing entity in the database, meaning the code todo.save() needs to be finished before calling upload() of image attribute.

Please test by calling upload() on an saved entity using find() and see if it works on todoPicture attribute.

If you still have trouble with uploading to todoPicture. Please test with a new solution built from scratch and just have code to upload to an image attribute in the Angular app. Here is an example I built to test upload() on image attribute with one data class and a simple page. Let me know if it works for you.

Upload Image with Wakanda 2

1 Answers1