Upload von Bildcovern nicht möglich?

[nassenstein]

Ich habe das Docker Image installiert und alles läuft soweit gut. Auf der Buchübersichtsseite, habe ich jede Menge Katzen. In den Details eines Buches ist nur ein Broken Image. Ein Uploadversuch öffnet zwar ein Dateiauswahlfenster, aber wenn man dort eine Datei auswählt, passiert im UI nichts. /api/images/1 (z.B.) liefert kein Bild zurück.

[jzakotnik]

@nassenstein Ich vermute, das ist etwas mit dem docker volume oder dem Pfad wo die Cover sind. Wenn man ein Bild hochlädt, klappt das im Netzwerk Tab der Developer Tools vom Browser? Wenn ja, ist die Datei irgendwo zu finden auf dem Server?

[nassenstein]

Laut Developer Tools wird das Bild übertragen, aber dann gibt es bei mir ein 404 auf /book/undefined/api/book/cover/1

[bigjaws]

Ich arbeite mit nassenstein zusammen daran.
Coverimages ist ein per compose gemountetes Verzeichnis. UID:GID ist 1000:1000.
Wenn ich mich in den container per shell einlogge kann ich in das verzeichnis schreiben. besitzer der dateien ist dann node.

Auschnitt aus der Compose Datei

volumes:
      - /opt/container-config/openlibry/database:/app/database
      - /opt/container-config/openlibry/coverimages:/app/public/coverimages
    
    environment:
      - NEXT_PUBLIC_API_URL=http://10.21.2.204:3000
      - DATABASE_URL=file:/app/database/dev.db
      - NEXT_PUBLIC_NEXTAUTH_URL=http://10.21.2.204:3000
      - NEXTAUTH_URL=http://10.21.2.204:3000
      - COVERIMAGE_FILESTORAGE_PATH=/app/public/coverimages

[jzakotnik]

Das sieht korrekt aus, auch direkt die Frage nach Problem mit access rights beantwortet 😁

@nassenstein Wann kommt das 404? Wenn die Buchseite gerendert wird? Das undefined ist definitiv verkehrt da, versuche das mal nachzuvollziehen

[jzakotnik]

Weil auf der Detailseite ist bei mir der Link: https://sandbox.openlibry.de/api/images/4261?1

Und auf der Übersichtsseite: https://sandbox.openlibry.de/_next/image?url=%2Fapi%2Fimages%2F4257&w=640&q=75

Habe das aber erst kürzlich vom img auf Image von nextjs geändert (... soll wohl performanter sein), deswegen frage ich mich ob es da irgendwo ein Issue gibt

[bigjaws]

In der Übersichtsseite der Bücher sieht man die Katzen Logos:

In der Buchseite dann selber das hier:

Der Quelltext der Buchseite zeigt als Bild:
<img src="http://10.21.2.204:3000/api/images/1?1" width="200" height="200" alt="cover image" style="border:1px solid #fff;width:auto"/>

Wenn ich auf der Buchseite einen refresh mache sehe ich das katzenbild einmal kurz aufblinken.
Wenn ich http://10.21.2.204:3000/api/images/1?1 im Browser eingebe kommt das Katzenbild...

[jzakotnik]

Gibt es fehler in der developer console? Überlege ob es irgendwas mit CORS oder so ist..

[bigjaws]

[bookid]-bd5a482d5f8bf005.js:1 Delete seconds undefined
1:1 Failed to load resource: the server responded with a status of 404 (Not Found)

[jzakotnik]

gibt es in den volumes denn ein 1.jpg vom upload? Wenn ja, dann war upload ok und wir müssen schauen warum der link nicht geht.. wenn nein, dann ging beim upload was schief.

Normalerweise ist nach dem Upload einfach das Bild statt dem Platzhalter da, sonst passiert nix 😸

[bigjaws]

Wenn man ein cover hochladen möchte:

[bookid]-bd5a482d5f8bf005.js:1 Delete seconds undefined
1:1  Failed to load resource: the server responded with a status of 404 (Not Found)
[bookid]-bd5a482d5f8bf005.js:1  POST http://10.21.2.204:3000/book/undefined/api/book/cover/1 404 (Not Found)
(anonymous) @ [bookid]-bd5a482d5f8bf005.js:1
Promise.then
onInput @ [bookid]-bd5a482d5f8bf005.js:1
uY @ framework-62960696b8137589.js:1
(anonymous) @ framework-62960696b8137589.js:1
tS @ framework-62960696b8137589.js:1
u1 @ framework-62960696b8137589.js:1
s5 @ framework-62960696b8137589.js:1
s8 @ framework-62960696b8137589.js:1
VM131:1 Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

[jzakotnik]

Ok dann ging der upload schon schief... ich schau mal wie diese URL überhaupt zustande kommen kann.

[bigjaws]

Ja, auf dem Volume liegt keine Datei.
Also es wird weder das default Katzenbild gezeigt. Noch wird irgendwas hochgeladen

[jzakotnik]

Könnt ihr die logs vom Server einmal anschauen mit docker logs <container> ? Eigentlich sollte der upload geloggt werden:

const filename = file.filepath.split("/").pop();
        const fileType = filename!.split(".").pop();

        console.log("File to be processed", filename, fileType);
        file.filepath =
          process.env.COVERIMAGE_FILESTORAGE_PATH! +
          "/" +
          req.query.id +
          "." +
          "jpg";

[jzakotnik]

Sieht so aus als ob die id von dem Buch nicht mitkommt weil da undefined steht.

Aber der Rest der Daten vom Buch ist ja da, wenn ich das richtig sehe?

[bigjaws]

Ja, die anderen infos werden gespeichert und angezeigt.

[bigjaws]

Die Logs zeigen leider nichts beim Upload.

Falls relevant:
Die Software läuft als container auf einem Server mit Flatcar Linux.
Habe das als compose per portainer stack konfiguriert:

services:
  openlibry:
    container_name: openlibry
    hostname: openlibry
    image: jzakotnik/openlibry:latest
    
    volumes:
      - /opt/container-config/openlibry/database:/app/database
      - /opt/container-config/openlibry/coverimages:/app/public/coverimages
    
    environment:
      - NEXT_PUBLIC_API_URL=http://10.21.2.204:3000
      - DATABASE_URL=file:/app/database/dev.db
      - NEXT_PUBLIC_NEXTAUTH_URL=http://10.21.2.204:3000
      - NEXTAUTH_URL=http://10.21.2.204:3000
      - COVERIMAGE_FILESTORAGE_PATH=/app/public/coverimages
      - usw....

[bigjaws]

Habe noch einmal live container logs geguckt.

Wenn man die Buchseite öffnet ist das der letzte Eintrag:

prisma:query SELECT 1
prisma:query SELECT `main`.`Book`.`id`, `main`.`Book`.`createdAt`, `main`.`Book`.`updatedAt`, `main`.`Book`.`rentalStatus`, `main`.`Book`.`rentedDate`, `main`.`Book`.`dueDate`, `main`.`Book`.`renewalCount`, `main`.`Book`.`title`, `main`.`Book`.`subtitle`, `main`.`Book`.`author`, `main`.`Book`.`topics`, `main`.`Book`.`imageLink`, `main`.`Book`.`isbn`, `main`.`Book`.`editionDescription`, `main`.`Book`.`publisherLocation`, `main`.`Book`.`pages`, `main`.`Book`.`summary`, `main`.`Book`.`minPlayers`, `main`.`Book`.`publisherName`, `main`.`Book`.`otherPhysicalAttributes`, `main`.`Book`.`supplierComment`, `main`.`Book`.`publisherDate`, `main`.`Book`.`physicalSize`, `main`.`Book`.`minAge`, `main`.`Book`.`maxAge`, `main`.`Book`.`additionalMaterial`, `main`.`Book`.`price`, `main`.`Book`.`externalLinks`, `main`.`Book`.`userId` FROM `main`.`Book` WHERE (`main`.`Book`.`id` = ? AND 1=1) LIMIT ? OFFSET ?
searchEngine_build: 0.006ms
Antolin items API [] 0

Wenn man auf den Upload button klickt kommt das auswahlfenster für die Dateien. Wenn man eine Datei auswählt und auf OK klickt schließt sich das Fenster aber in den Logs passiert gar nichts.
Identisches Verhalten bei Windows und Linux.

[jzakotnik]

Ich versuche das grade mal nachzuvollziehen - der Fehler ist ja schon, dass da ein undefined in der URL steht wo ja eigentlich die ID vom Buch normalerweise steht. Aber ist bisher noch nie passiert, deshalb schon recht spannend...

[jzakotnik]

Blöde Frage aber aus dem docker compose habt ihr das env_file flag rausgenommen, richtig? Also die env Variablen werden da nicht doppelt reingeladen?

[jzakotnik]

Im docker compose setup geht der Cover http call nach http://localhost:3000/api/book/cover/1.. Ich versuche es mal mit einer IP.

[jzakotnik]

Habt ihr den Rest vom docker compose noch (falls nix sensitives drin steht?)

[bigjaws]

Eigentlich soll das hinter einem Reverse Proxy hängen. Wir hatten da in den URLs auch schon die Domain drin, damit gab es dasselbe Problem. Um ein Proxy Problem auszuschließen habe ich jetzt einfach alles auf IP basis im lokalen Netz zum testen.

Hier die komplette compose:

services:
  openlibry:
    container_name: openlibry
    hostname: openlibry
    image: jzakotnik/openlibry:latest
    
    volumes:
      - /opt/container-config/openlibry/database:/app/database
      - /opt/container-config/openlibry/coverimages:/app/public/coverimages
    
    environment:
      - NEXT_PUBLIC_API_URL=http://10.21.2.204:3000
      - DATABASE_URL=file:/app/database/dev.db
      - NEXT_PUBLIC_NEXTAUTH_URL=http://10.21.2.204:3000
      - NEXTAUTH_URL=http://10.21.2.204:3000
      - NEXTAUTH_SECRET=geheim
      - AUTH_ENABLED=false
      - COVERIMAGE_FILESTORAGE_PATH=/app/public/coverimages
      - LOGIN_SESSION_TIMEOUT=3600
      - MAX_MIGRATION_SIZE=250mb
      - SECURITY_HEADERS=insecure
      - DELETE_SAFETY_SECONDS=5
      - RENTAL_SORT_BOOKS="title_asc"
      - BARCODE_MINCODELENGTH=3
      - NEXT_PUBLIC_BACKUP_BUTTON_SWITCH=1
      - SCHOOL_NAME="Realschule xxx"
      - LOGO_LABEL="schullogo.jpg"
      - EXTENSION_DURATION_DAYS=22
      - NUMBER_BOOKS_OVERVIEW=20
      - NUMBER_BOOKS_MAX=10000
      - REMINDER_TEMPLATE_DOC="mahnung-template.docx"
      - REMINDER_RESPONSIBLE_NAME="Schulbücherei"
      - REMINDER_RESPONSIBLE_EMAIL="[email protected]"
      - REMINDER_RENEWAL_COUNT=5
      - BOOKLABEL_MARGIN_LEFT=3
      - BOOKLABEL_MARGIN_TOP=2
      - BOOKLABEL_LABEL_WIDTH=7.0
      - BOOKLABEL_LABEL_HEIGHT=3.2
      - BOOKLABEL_ROWSONPAGE=5
      - BOOKLABEL_COLUMNSONPAGE=2
      - BOOKLABEL_PRINT_LABEL_FRAME=false
      - BOOKLABEL_LABEL_SPACING_HORIZONTAL=1.7
      - BOOKLABEL_LABEL_SPACING_VERTICAL=2.2
      - BOOKLABEL_MARGIN_IN_LABEL=0.05
      - BOOKLABEL_AUTHORLINE=["Book.author",9,"center"]
      - BOOKLABEL_AUTHOR_SPACING="1.8"
      - BOOKLABEL_MAX_AUTHORLINE_LENGTH="38"
      - BOOKLABEL_LINE_ABOVE=["Book.title",10,"left"]
      - BOOKLABEL_LINE_ABOVE_USE_MAX_SPACE=true
      - BOOKLABEL_LINE_BELOW_1=["firstTopic",10,"left"]
      - BOOKLABEL_LINE_BELOW_1_LENGTH="32"
      - BOOKLABEL_LINE_BELOW_2=["RSHW",10,"left"]
      - BOOKLABEL_LOGO=schullogo_buchlabel.png
      - BOOKLABEL_BARCODE_WIDTH="3cm"
      - BOOKLABEL_BARCODE_HEIGHT="1.6cm"
      - BOOKLABEL_BARCODE_VERSION="code128"
      - BOOKLABEL_BARCODE_PLACEHOLDER="barcode"
      - USERID_LABEL_IMAGE=userlabeltemplate.jpg
      - USERLABEL_WIDTH="42vw"
      - USERLABEL_PER_PAGE=6
      - USERLABEL_SEPARATE_COLORBAR=[250,70,"lightgreen"]
      - USERLABEL_LINE_1=["User.firstName User.lastName","75%","3%","35vw","2pt","black",14]
      - USERLABEL_LINE_2=["RSHW","83%","3%","35vw","2pt","black",10] 
      - USERLABEL_LINE_3=["User.schoolGrade","90%","3%","35vw","2pt","black",12]
      - USERLABEL_BARCODE=["80%","63%","3cm","1.6cm","code128"]

    cpus: 2.0      # maximal 2 Kerne (≈ 50% von 4)
    mem_limit: 512m
    restart: unless-stopped
    networks:
      MVL:
        ipv4_address: 10.21.2.204

networks:
    MVL:
        external: true

[bigjaws]

Wenn ich irgendwo localhost statt IP oder Domain rein machen muss, sag bescheid.
Ist eine apache reverse proxy. Soll von außen über die Domain (https) erreicht werden können. Innen dann als macvlan docker container mit eigener IP.

[jzakotnik]

Nein, eigentlich sollte das alles funktionieren. In Prod Installationen ist auch immer ein nginx reverse proxy davor.
Danke für das Feedback und das Troubleshooting erstmal, bin gespannt ob irgendwo ein Bug drin ist.

[jzakotnik]

Also es gibt noch einen container wo der reverse proxy läuft, richtig? Und der kommt ins gleiche Netzwerk?

[bigjaws]

Proxmox cluster in einem DMZ vlan hinter einem OPNsense router.

• Ubuntu VM mit Apache als Webserver und reverse Proxy für Docker Container
• Flatcar VM als Docker host

Die beiden VMs in dem selbe vlan. https Portforwarding vom Router auf den Ubuntu Server.

[jzakotnik]

Good news everyone, ich kann das Problem reproduzieren mit dem docker compose und port 3000 exposed, also kann es nicht am Proxy liegen

[bigjaws]

Was löst es aus? Also was musstest Du machen, dass es auch bei Dir auftritt?

[jzakotnik]

Habe das gleiche docker compose aber ohne das network und dafür mit exposed port

  ports:
      - "3000:3000"

[bigjaws]

OK, und damit tritt es auch auf?
Nur am Rande. Ich nutze die compose datei als Stack mit Portainer. Ich glaube technisch nutzt Portainer selber gar kein docker-compose sondern übersetzt das in direkte Docker API Befehle.
Wobei das eigentlich keinen Unterschied machen sollte....

[jzakotnik]

Move to issue #250

[jzakotnik]

@bigjaws @nassenstein Habe das in das entsprechende Issue verschoben. Ihr wart die ersten die das image aus dockerhub verwendet haben, sonst haben das Leute immer selbst gebaut und es ist nicht aufgefallen. Deshalb sind die env Variablen vermutlich falsch verbaut im Image. Ich fixe das in #250

[jzakotnik]

Könnt ihr den Bild-Upload mit dem aktuellen latest image nochmal versuchen? Hier geht es jetzt... Ansonsten gern in #250 weiter kommentieren. Es gibt noch paar andere Stellen im Code mit dem gleichen Problem, das dürfte aber nicht lang dauern es zu fixen.

[bigjaws]

Hier geht es auch!!
Vielen Dank für den super schnellen Fix!

[jzakotnik]

@bigjaws @nassenstein Wartet bis #253 gemerged ist, das dürfte noch an anderen Stellen haken. Danke für die Entdeckung des völlig unnötigen Fehlers!

[jzakotnik]

Der Branch ist jetzt vollständig, theoretisch müsste alles gehen aber teste jetzt mal ein wenig..

[jzakotnik]

Das Image mit den ganzen Fixes ist hier verfügbar. Könnt ihr das Docker File entsprechend ändern und ausprobieren? Bei mir schien alles ok

image: jzakotnik/openlibry:test-250

[jzakotnik]

Oh no, ich hatte nur das image von arm64 vom mac gepusht. Es sollte jetzt auch ein linux/amd64 verfügbar sein wo dieser Fehler nicht passiert.

[bigjaws]

Ja, das neue image hat gestartet. Mein Mitarbeiter wird das testen und feedback geben.

[jzakotnik]

Viel Erfolg! Nur aus Neugier, um welche Schule/Institution gehts? Haben wir schon ge-emailt?

[nassenstein]

Wir wollen das System an einer Realschule in Nordrhein Westfalen einsetzen.

[jzakotnik]

Viel Erfolg! Wir haben auch einen kleinen Signal Chat für die Techies und Features, falls ihr da rein wollt, gebt Bescheid 💯
So oder so danke dass ihr den Fehler gefunden habt, das war vor DockerHub nicht aufgefallen..