Image preview/editor does not show image

changed the description

Thanks for the report @ingorandolf!

May I ask you to share some browser console logs during the image upload operation? Additionally you have have some relevant logs from Steering at the same time.

Sure, here is the browser log when an image gets loaded into the preview:

ReferenceError: SharedArrayBuffer is not defined vips.worker.hash-3916a6f5.js:5:8380
    Vips http://auravm.local/vips.worker.hash-3916a6f5.js:5
    <anonymous> http://auravm.local/vips.worker.hash-3916a6f5.js:28

And these are the related lines from docker compose logs:

nginx-1            | 10.20.0.10 - - [29/Nov/2024:09:42:38 +0100] "GET /steering/api/v1/licenses/? HTTP/1.1" 200 1600 "http://auravm.local/shows/1/episodes/19/details" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:132.0) Gecko/20100101 Firefox/132.0"
nginx-1            | 10.20.0.10 - - [29/Nov/2024:09:42:38 +0100] "GET /steering/api/v1/licenses/3/ HTTP/1.1" 200 219 "http://auravm.local/shows/1/episodes/19/details" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:132.0) Gecko/20100101 Firefox/132.0"

Uploading a new image (clicking "Use this image" in empty preview) results in these logs:

nginx-1            | 10.20.0.10 - - [29/Nov/2024:09:43:49 +0100] "POST /steering/api/v1/images/ HTTP/1.1" 201 206 "http://auravm.local/shows/1/episodes/19/details" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:132.0) Gecko/20100101 Firefox/132.0"
nginx-1            | 172.20.0.1 - - [29/Nov/2024:09:43:50 +0100] "GET /openid/userinfo HTTP/1.1" 200 168 "-" "Go-http-client/1.1"
nginx-1            | 10.20.0.10 - - [29/Nov/2024:09:43:50 +0100] "PATCH /steering/api/v1/notes/19/ HTTP/1.1" 200 300 "http://auravm.local/shows/1/episodes/19/details" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:132.0) Gecko/20100101 Firefox/132.0"
nginx-1            | 10.20.0.10 - - [29/Nov/2024:09:43:50 +0100] "GET /site_media/images/ice_copy.jpg HTTP/1.1" 200 428563 "http://auravm.local/shows/1/episodes/19/details" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:132.0) Gecko/20100101 Firefox/132.0"

And this is the browser error when clicking "Use this image" after choosing an image uploaded earlier:

http://auravm.local/steering/api/v1/images/2/
[HTTP/1.1 404 Not Found 115ms]

	
PUT
	http://auravm.local/steering/api/v1/images/2/
Status
404
Not Found
VersionHTTP/1.1
Transferred277 B (46 B size)
Referrer Policystrict-origin-when-cross-origin
Request PriorityHighest
DNS ResolutionSystem

    	
    Allow
    	GET, PUT, PATCH, DELETE, HEAD, OPTIONS
    Connection
    	keep-alive
    Content-Type
    	application/json
    Date
    	Fri, 29 Nov 2024 08:50:27 GMT
    Server
    	nginx
    Transfer-Encoding
    	chunked
    Vary
    	Accept, origin
    	
    Accept
    	*/*
    Accept-Encoding
    	gzip, deflate
    Accept-Language
    	en-US,en;q=0.5
    Authorization
    	Bearer 6ba943d730a540f9a9f8dd8f2b4199db
    Connection
    	keep-alive
    Content-Length
    	684
    Content-Type
    	multipart/form-data; boundary=---------------------------10499057694071219622871906180
    Cookie
    	csrftoken=1ym8tBedcBye1mDZHKJcUZRRrJCFoiar; sessionid=uirb88stb1xat9c71qbb18kfi1m64ffu
    Host
    	auravm.local
    Origin
    	http://auravm.local
    Priority
    	u=0
    Referer
    	http://auravm.local/shows/1/episodes/19/details
    User-Agent
    	Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:132.0) Gecko/20100101 Firefox/132.0

With aura logs:

steering           | WARNING:django.request:Not Found: /api/v1/images/2/
nginx-1            | 10.20.0.10 - - [29/Nov/2024:09:50:27 +0100] "PUT /steering/api/v1/images/2/ HTTP/1.1" 404 62 "http://auravm.local/shows/1/episodes/19/details" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:132.0) Gecko/20100101 Firefox/132.0"

Wunderbar! thx:)

added bug label

changed milestone to %1.0-alpha6 — Wondrous Whale

added P2 label

Due to the error message SharedArrayBuffer is not defined I'm assuming the root is in Dashboard. Therefore I'm assigning @kmohrf for now.

assigned to @kmohrf

The use of the image editor requires AURA to run on something browsers call a secure context (loosely: requires https://). This is because the image library we use for editing images operates in a web worker using the SharedArrayBuffer browser API, which is only available in these secure contexts. This is a restriction that was made after the spectre CPU bugs surfaced.

Usually localhost is also a secure context, but you’re using the aura.local hostname, which is not included. Chromium-based browsers like Chrome, Edge, and Vivaldi allow you to set exemptions by adding the origin (in your case http://aura.local) to the list under the Insecure origins treated as secure setting in chrome://flags for debugging purposes. But obviously, this doesn’t scale.

UI-wise we could deactivate these features if SharedArrayBuffer is not defined in the current browser environment, or at least display a warning.

UI-wise we could deactivate these features if SharedArrayBuffer is not defined in the current browser environment, or at least display a warning.

yes, please.

Thanks for your explanation! I set the security exception in chrome and now it works.

I experience quite long loading times if an image gets loaded (a couple of seconds). The browser console tells me: [vips.worker] loading Vips. Is this to be expected? Is this related to the machine aura is running on or is it related to the network?

Vips is a originally a C-library and comes as a rather bulky 6MB WASM-library, so loading speed may depend on the speed of the network connection. Therefore it’s only loaded if the user is actually editing an image. Locally, it should be quick to load. It should also be quick to load, if the user ever opened the image editor before because we set a proper cache header for assets.

All image operations are performed in the browser so that will actually depend on the processing power of the client.

It might be helpful if you post the log output that starts with [vips.worker] (including timestamps) because then I can say more about what is actually taking long.

I see. It seems Vips is gets loaded every time I open the editor. Here are some logs from opening the editor three times without reloading the page:

It’s okay for these to show up multiple times in the network view. They are imported every time a worker is spawned for image editing (we can’t do that on the main UI thread because we would freeze up the entire UI while editing images). The important part is that these files are properly cached so they are not downloaded every time a worker is spawned. The requests will still show up in the network panel but should have very short response times, because the browser figures out that it should use the cached version (because the server told it so in the Cache-Control response header for the resource – you can even see that in your screenshot).

I’ve tested this with Firefox and Chromium on dashboard.aura.radio and it looks good for me:

If you still see these files downloaded every time you open the image editor, please check if you may have set the Disable cache flag in the network panel. It’s very helpful during debugging but will obviously override the default caching behavior of your browser if activated. It should however not affect the browser’s behavior if you don’t have the dev tools open.

added Cycle [1/25] label

added To Do label

added moveable label

mentioned in commit dfd6a184

closed

removed To Do label

removed moveable label

Image preview/editor does not show image

Steps to Reproduce

Expected Result

Actual Result

Environment

Designs

Child items ...

Activity