image Core Type not visible

[Marci]

Good evening.

I followed the Blog Post tutorial 6/6: At 11.35 there is a core type "image" which needs to be first made visible.

Within my structr application (version 3.3.0) there is no such possibility. I see the following core tyes:

What is the reason for that?

Best regards,

Marcy

[Kai Schwaiger]

Hi Marcy,

the type should be underneath the “UI Types” tab - can you see it there?

Best,

Kai

--
You received this message because you are subscribed to the Google Groups "structr" group.
To unsubscribe from this group and stop receiving emails from it, send an email to structr+u...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/structr/f9797131-685a-4de2-a81e-e51692378983n%40googlegroups.com.

[Marci]

Hi Kai, yes, there I see the following type: "Image". Is that the one I should use?

Best regards,

Marcy  

[Kai Schwaiger]

Hi Marcy,

yes that’s the type - we did change the sorting of those types.

In the future this will probably be a single list with a search function to make things easier.

Best,

Kai

To view this discussion on the web, visit https://groups.google.com/d/msgid/structr/59bd31e4-b601-4241-b1a5-1db5d4ec4e98n%40googlegroups.com.

[Marci]

Hi Kai, i am almost thru the tutorial. However once I tried uploading an image from my hard-drive, the following error message appears:

***

Error in Upload

FrameworkException(500): Unable to set property BlogPost on entity with ID 4a0fbeca86fb475b952545082a647e46: org.structr.api.UnknownClientException: Property values can only be of primitive types or arrays thereof

***

I created the BlogPost-Type (title and text fields) with the view "blog-post", the same way as mentioned it the tutorial. 

I didn't face any problems when just uploading files to the image-object, however the problem shows up when uploading an image to a related object.

Where is my problem?

Thanks again in advance for your support.

Marcy

[Kai Schwaiger]

Hi Marcy,

that error message is returned when an attempt is made to save a Node to a property.

My guess is that the upload tries to connect the Image to the BlogPost but it is set to a local property, but it should be a remote property.

A couple of questions:

- What property type is the property “BlogPost” on the Image type?

- How does the upload form script look like?

  It should look something like this:

Hope that helps!

Kai

To view this discussion on the web, visit https://groups.google.com/d/msgid/structr/7e833759-d862-4a3d-a186-9fa9357ca534n%40googlegroups.com.

[Marci]

Hi Kai, thanks for your reply. My answers to your question:

-The related property on image-type is called "blogPost"

-The update script looks exactly like yours:

<form action="/structr/upload" method="post" enctype="multipart/form-data">

    <input type="hidden" name="redirectOnSuccess" value="/blog-post/${current.id}">

    <input type="hidden" name="appendUuidOnRedirect" value="false">

    <input type="hidden" name="visibleToPublicUsers" value="true">

<input type="hidden" name="visibleToAuthendicatedUsers" value="true"> 

<input type="hidden" name="blogPost" value="{id:${current.id}}"> 

    <input type="file" name="uploadedFile">

    <input type="submit" value="Upload!">

</form>

I actually corrected some minor stuff , but it still is not working as it should. After having selected any one of the local images on my drive, the error message looks as follows:

***

Error in Upload

FrameworkException(422): Invalid JSON input for key blogPost, expected a JSON collection.

***

The img-source is: /${current.mainImage.name}

Is it a file reference problem, because the browser doesn't transfer the image to the script?

I don't see any difference to your tutorial though. Do you?

Marcy

[Kai Schwaiger]

Hi Marcy,

having a closer look at the error message might give us a clue:

Error in Upload

FrameworkException(422): Invalid JSON input for key blogPost, expected a JSON collection.

That looks to me like the relationship cardinality is not 1:1 but rather * on the side of the Image.

That would be a reason why it expects a “JSON collection” rather than a “JSON object”.

The question is similar for the other problem: What is the cardinality on the side of the type BlogPost.

If it is * then mainImage would be a collection.

This happens at 11:58 in the video: https://youtu.be/BVF0dIJAW7s?t=713

Does that help?

Kai

To view this discussion on the web, visit https://groups.google.com/d/msgid/structr/f1149e61-010a-449c-9fb8-1d21ac15b0ccn%40googlegroups.com.

[Marci]

Good morning Kai

That was actually one of the minor points that I corrected yesterday, so unfortunately that is not the reason. The second point i corrected yesterday was the sourc-url of the image, where I forgot the leading "/" sign... :The only difference that occurred after those changes was a new error message from above.

I have not in detail reproduced the complete toturial from 1/6 to 6/6, because I assume that the only relevant parts for my problems are the blog and the image type, connected over the relation MAIN_IMAGE. Is there something i might have missed from earlier tutorials?

Best regards,

Marcy 

[Kai Schwaiger]

Hi Marcy,

ok, so the relationship looks like the following image?

If the cardinality is  *  then the input element should look like this (note the square brackets to indicate a JSON collection):

<input type="hidden" name="blogPost" value=“[{id:${current.id}}]”>

If an Image can be related to multiple blog posts then I would also suggest changing the name of the remote property on the type "Image" from “blogPost” to “blogPosts”.

Just so that it’s easier to keep track of what the property expects.

I think this is the source of the problem - the other parts of the tutorial should not matter in this case.

Does this help?

Kai

To view this discussion on the web, visit https://groups.google.com/d/msgid/structr/1fc29512-5ce9-4fa8-87ae-cebcdfbebaa4n%40googlegroups.com.

[Marci]

Good morning Kay, thanks for the hint, yes that helped and finally the image is properly connected to the BlogPost. I realise that my setting seems somehow different to the one in the tutorial:

-The cardinality is still 1:1 on my side (and not *, that was only at the beginning), but only the string for multiples (as you suggested above) makes it work.

-The other issue is with the image-src to be shown in the browser: In the tutorial it is solved with a relative path. On my side, that doesn't work. So it seems i should reference the image with absolute paths, however it is not yet clear to me, which image (i.e. thumbnails) should be chosen, because there are different formats of thumbnails available in the file system. Which version of the thumbnail should be chosen, if not automatically chosen by structr?

Best regards

Marcy

[Kai Schwaiger]

Hi Marcy,

In the tutorial the absolute path for the image is used (note the “/“ before the scripting expression):

You could also use “${current.mainImage.path}”. This will use the complete path of the image.

Or (depending on your own needs) one of the thumbnail images tnMid / tnSmall (or define your own).

Regarding the visibility issue:

- Can you see the resulting image when you are logged in as admin?

- Can you see the resulting image when you are not logged in (for example in a private browser window)?

- Is the blog post actually linked to an image / can you see the Image linked to the BlogPost in the “Data” section of structr?

Maybe a couple of screenshots of the definition and the HTML output might help diagnose that problem further.

Best regards,

Kai

To view this discussion on the web, visit https://groups.google.com/d/msgid/structr/0ba660e3-1ccb-4842-bc41-30dd2a94651cn%40googlegroups.com.

[Marci]

Hi Kai

Yes I am doing all the tests in admin mode, so there is no restriction in visibility.

Yes, the BlogPost type shows the linked image properly under the mainImage remote property.

I then tested the upload function with more than one images, and this works too (after I extended the cardinality to * again - You remember the expression without those brackets [] didnt work with me). Here is an example path for an image of what I meant with "absolute" path, which works with me:

src = https://192.168.113.58:8083/upload/${current.mainImage.name}

(At my side, its not enough to start the url just with the "/"-Sign.)

What I found too is, that I can sequentially add more images to one blog-post one by one. But if I select more than one image at once (from my windows file explorer) and then try to upload them all at the same time, it only relates one image to the blog post (although all the images seem to be uploaded to the image type). Here is the function:

<form action="/structr/upload" method="post" enctype="multipart/form-data">

    <input type="hidden" name="redirectOnSuccess" value="/blog-post/${current.id}">

    <input type="hidden" name="appendUuidOnRedirect" value="false">

    <input type="hidden" name="visibleToPublicUsers" value="true">

<input type="hidden" name="visibleToAuthendicatedUsers" value="true">

<input type="hidden" name="blogPost" value="[{id:${current.id}}]">

    <input type="file" name="uploadedFile" multiple>

    <input type="submit" value="Upload!">

</form>

Most of my questions though are cleared now, thanks for your very helpful advise again.
Marcy

[Kai Schwaiger]

Hi Marcy,

That is a bit strange. What I understand is that this works: “src = https://192.168.113.58:8083/upload/${current.mainImage.name}”.

What is the name of the image? Is it something that occurs more than once?

If the path of the image is left out then structr (if not configured differently) uses the name to look up the file. If structr finds multiple hits for that name, it uses the first. Maybe that is not the file? Maybe even a page?

The configuration is done via structr.conf. By default this will be the following. I guess you have not changed it, right?

htmlservlet.resolveproperties = AbstractNode.name

One very easy solution to the problem would be using the “path” property instead of “name”.

Entering “${current.mainImage.path}” without anything else should print the complete path. (All files have the “path” property which contains the full path of the file)

Regarding the multi-upload: The form in the tutorial only covers single file upload and is a regular web technology and not a structr feature.

For multi-file upload you could use the JavaScript Library DropZone (https://www.dropzonejs.com/).

Hope that helps,

Kai

To view this discussion on the web, visit https://groups.google.com/d/msgid/structr/d45aebd0-dce1-4c2b-9b31-02930165d985n%40googlegroups.com.

[Marci]

Hi Kai

I haven't changed the htmlservlet.resolveproperties. SInce i have been working with structr, i am using absolute paths for images, which means that i set the HTML-<img>-Tag always in the following way: Domain-name + Path-Name, i.e.:

https://192.168.113.58:8083/upload/${current.mainImage.name}  

I also checked the path-property as you suggested, but it only shows the images when i add the hard-coded domain name in front of the path.

Here is an example of the blog-home test-page what my browser renders in such a case:

<div>
<br><a href="https://192.168.113.58:8083/blog-post/66c25e485fb742b7beef599cf4317d2d">66c25e485fb742b7beef599cf4317d2d</a>
<br><img width="100" src="https://192.168.113.58:8083/upload/16085544768731582443092731532089.jpg">
</div>  

Maybe its time to get another fresh install done with a later version. Currently i am testing with v. 3.3.0.

Thanks for the hint with the multi upload. So far the 1 by 1 upload is perfect for me :)

Best regards,
Marcy