Company Logo not display within invoice

geoff · November 25, 2020, 8:31pm

Hi @ben,
Copied .env.example setting to .env.

Now log has the following;
[2020-11-25 19:59:10] production.INFO: MNIGn1ymACjbmdvMpxSqBrYGYLT7GTNPxLx88OwnVZzgm3FUyBZaEufbgZCD1Oc2/zfHA0RvoZxP04npYajTbuo8bwvIFg2qrJvS0Ha2t.png
[2020-11-25 19:59:10] production.INFO: 51c8d1d940db05739c4c4b149c4018cf24048529.png
[2020-11-25 19:59:10] production.INFO: the path /storage/MNIGn1ymACjbmdvMpxSqBrYGYLT7GTNPxLx88OwnVZzgm3FUyBZaEufbgZCD1Oc2/zfHA0RvoZxP04npYajTbuo8bwvIFg2qrJvS0Ha2t.png

When I put domain url in front of /storage/…/…png the logo/image displays perfectly just not in the pdf.
Cheers

geoff · November 25, 2020, 9:56pm

Hi @ben and team,

We’ve use v4.5 with white-labelling successfully for over a year with an associated company and have never had a requirement to contact Invoice Ninja.

We only considering implementing with v5 because we received an email stating there was a stable release ready to use.

My experiences to-date are that this version is not stable and is not ready for production use and has a long way to go before it is.

I’ve seen a lot of comments saying bad things but to be honest, I personally like what you guys have done to-date, the item I give a big tick too is customising CSS for invoices, soooooo much better than previous versions.

The use of Material Design & Tailwinds is a great decision. My only criticism is too many frameworks/plugins being used and you’ve dive too much into the technology and forgotten about the basics plus the KISS theory.

From my prospective the 2 must have before any other functionality is white-labelling and invoices with our companies logo, sadly neither of these features are working with v5.

We have strong Java, Python and Javascript skills but very poor PHP and therefore are unable to assist and contribute to your great work.

Also note, that we had about 8 attempt trying to standup a Redhat version of v5 and then gave up, had 2 more goes with Debian 10 and finally got a working environment.

Sorry for long winded message, all the best with the future development of v5 but we are calling it a day as it’s became mission impossible for us.

Cheers
Geoff

hillel · November 26, 2020, 6:33am

Hi,

v5 is currently a “stale release candidate”, if the only serious issues you’re seeing are the logo and white labelling then I think we got the label just right. I’m sure we’ll have those issues resolved for our official stable release.

Can you explain what you mean by “you’ve dive too much into the technology and forgotten about the basics plus the KISS theory”. It’s a vey general statement, it would be helpful if you could provide specifics.

We’re using Flutter to build the admin portal. The tech is still very new and has some compromises on web but (a) it will improve over time and (b) the fact that it enables us to provide web, iOS, Android, Windows, Linux and macOS apps with one codebase in my opinion make it the best choice for our app/team.

Thanks for your feedback!

ben · November 26, 2020, 9:19am

Hey!

First of all, thanks for your time & efforts to try out Invoice Ninja v5. I’d also love to give my opinion on this resolving each reply.

Yes, behaviour is exactly the same for me, no issue using default invoice ninja logo, once you update company details with logo them image does not display but alt tag value does.

Well, the invoices I posted here are not using the “fallback” logo, it’s the real logo that I uploaded. However, it appears that I used the same one as the default, here is a new screenshot:

Also note that my .env is very spartan compared to .env.example and their was no entry for QUEUE_CONNECTION…could this have an impact?
Cheers

This is a bug with the v5 setup that is fixed in the latest code, we should ship a new version within a few days. Nonetheless, it should default to “database”, so you should be good to go.

Thank you for your honest opinion, however some stuff you said, just isn’t true.

In the e-mail, we sent to our subscribers, I believe there’s a note, this is RC/prerelease version, so it’s not “fully” stable.

We used Flutter on the frontend because most people will be learning it nowadays & it is the future for app development for sure, plus it makes our lives easier to maintain, code & deploy new features cross-platform.

My only criticism is too many frameworks/plugins being used and you’ve dive too much into the technology and forgotten about the basics plus the KISS theory.

Well, we did everything to make the lives of our community developers & our lives easier. That said, we went with standard Laravel Blade in the client portal, using the latest Livewire trend to write simple HTML that will be reactive, instead of heavy React, Vue, or some other frontend framework. In 2020, this is the most simple form of developing apps in the ocean of state management libraries, millions of Javascript tools to reimplement what we already have there.

Also note, that we had about 8 attempt trying to standup a Redhat version of v5 and then gave up, had 2 more goes with Debian 10 and finally got a working environment.

I agree that server configuring could be hard, that’s unfortunately how it is, but Invoice Ninja is just a PHP app using LAMP stack like thousands of others. We don’t require anything special, so you can possibly make use of some 3rd party tools like Laravel Forge, Ploi.io, or DigitalOcean services for autoinstallation & autoconfiguration of the server. If you opt-in for installing & configuring the server yourself, even then you’re not on your own, cause you can ask here or on Slack for help & we will assist you - which is, let’s be honest WAY over the scope of Invoice NInja application development.

Thanks once again for the honest opinion & hope to see you again here!

geoff · November 26, 2020, 10:48am

Hi @hillel,

I am so sorry that my comments have offended you and the team, it was never the intention to be negative nor offensive. I also get that many people have spent many hours developing the v5 masterpiece!

I honestly thought my comments were full of positives, again I love all the great new v5 features and you guys are on a real winner.

Our clients would most likely have appreciate the mobile first functionality to view invoices and process payment via mobile phones, but we would never dream of using a mobile phone to administer the backend of Invoice Ninja.

I get that v5 has been rewritten from the ground up to have one piece of code regardless of the platform.

And the new features to custom design invoices are fantastic and brilliant compared to previous versions.

Again, sorry my comments has offended everyone.

Cheers
Geoff

geoff · November 26, 2020, 11:10am

Hi @ben,

It’s great that you have resolved the company logo and white-labelling issues.

We are well aware on the endless new frameworks being release every second week. And agree with you regarding React, Vue, Angular & Svelte and lets not forget JQuery which is full of bloat.
We are focusing our efforts now and for the future on Machine Learning with Python. Sorry but I know nothing about Flutter.

Again I am so sorry if my comments offended you and the team.

Cheers
Geoff

ben · November 26, 2020, 3:41pm

Hey @geoff,

Absolutely not! You can’t even imagine how much we appreciate the time & effort you dedicated to helping us! We’re excited for the next time you try v5!

moberley · December 19, 2020, 7:42pm

I have been testing Invoice Ninja v5 and the problem I experienced might not be related but the symptom was the same.

I installed version 5.0.35 from the v5-develop branch on GitHub and I also had broken images on the generated PDFs. If I did not set a company logo, the default Invoice Ninja logo did appear correctly however the “Created by Invoice Ninja” logo at the bottom did not.

Logging the HTML I noticed that the default Invoice Ninja logo was loaded directly from https://www.invoiceninja.com/ whereas the “Created by Invoice Ninja” was on the local server.

My testing setup was installed locally on a computer running Linux Mint 20 using the instructions here on this forum provided for installing on Ubuntu 20.04 (Install Invoice Ninja v5 on Ubuntu 20.04). In particular, I used a self signed certificate because my setup is only accessible internally.

Since the images from the public server loaded and the images served locally did not I thought maybe the issue was the self-signed certificate. After some exploration I figured out that I could add the “ignoreHttpsErrors()” option for Browsershot which allowed the generated PDFs to load the images from the local server.

Here is the diff that I made:

diff --git a/app/Utils/Traits/Pdf/PdfMaker.php b/app/Utils/Traits/Pdf/PdfMaker.php
index 6c656b1a7..e0033faa0 100644
--- a/app/Utils/Traits/Pdf/PdfMaker.php
+++ b/app/Utils/Traits/Pdf/PdfMaker.php
@@ -51,6 +51,7 @@ trait PdfMaker
                 ->deviceScaleFactor(1)
                 ->waitUntilNetworkIdle(true)
                 ->noSandbox()
+               ->ignoreHttpsErrors()
                 ->pdf();
     }
 }

hillel · December 20, 2020, 11:37am

Thanks for sharing your solution!

@david & @ben should we consider making this a .env option?

david · December 20, 2020, 11:11pm

i think we can merge that as is.

cdahinten · February 5, 2021, 5:57pm

Hello @david, Hello @ben,

I recently discovered the same issue as (at)geoff with the latest v5.1.1-C41.
The PDF/Logo tests on a Raspberry PI with Ubuntu 20.04.2 LTS Server NGINX worked fine when using the this nginx config given here serving only unencrypted port 80: https://invoiceninja.github.io/docs/self-host/

When setting up a snakeoil-self-certificated server the Logos disappear in the PDF.

I use ungoogled-chromiun from opensuse-repositories which is at version 84 and tested different flags:

sudo nano /etc/chromium.d/default-flags

Invoice Ninja Snapppdf-Settings

export CHROMIUM_FLAGS="$CHROMIUM_FLAGS --allow-file-access-from-files"
export CHROMIUM_FLAGS="$CHROMIUM_FLAGS --allow-http-background-page"
export CHROMIUM_FLAGS="$CHROMIUM_FLAGS --allow-http-screen-capture"
export CHROMIUM_FLAGS="$CHROMIUM_FLAGS --allow-insecure-localhost"
export CHROMIUM_FLAGS="$CHROMIUM_FLAGS --allow-external-pages"
export CHROMIUM_FLAGS="$CHROMIUM_FLAGS --disable-namespace-sandbox"
export CHROMIUM_FLAGS="$CHROMIUM_FLAGS --disable-setuid-sandbox"
export CHROMIUM_FLAGS="$CHROMIUM_FLAGS --disable-web-security"
export CHROMIUM_FLAGS="$CHROMIUM_FLAGS --dns-log-details"
export CHROMIUM_FLAGS="$CHROMIUM_FLAGS --enable-crash-reporter"
export CHROMIUM_FLAGS="$CHROMIUM_FLAGS --host=https://invoicninja.local"
export CHROMIUM_FLAGS="$CHROMIUM_FLAGS --ignore-urlfetcher-cert-requests"
export CHROMIUM_FLAGS="$CHROMIUM_FLAGS --unsafely-treat-insecure-origin-as-secure=http://invoiceninja.local"
export CHROMIUM_FLAGS="$CHROMIUM_FLAGS --disable-machine-cert-request"
export CHROMIUM_FLAGS="$CHROMIUM_FLAGS --ignore-urlfetcher-cert-requests"
export CHROMIUM_FLAGS="$CHROMIUM_FLAGS --user-data-dir=/srv/chromium"
export CHROMIUM_FLAGS="$CHROMIUM_FLAGS --enable-experimental-cookie-features"
export CHROMIUM_FLAGS="$CHROMIUM_FLAGS --enable-logging=stderr --v=1"
export CHROMIUM_FLAGS="$CHROMIUM_FLAGS --no-sandbox"
export CHROMIUM_FLAGS="$CHROMIUM_FLAGS --log-level=1"

Switching the domain from invoiceninja.local to invoiceninja.test did not change anything.

It seems, that the Logos don’t get passed to the headless chromium due to certification-restrictions within chromium called from snappdf. I can also call my company-logo via the url at /storage/…/….png.

The snap-chromium I did not manage to get it work, as I am not familiar with snap interfaces e.g.

Do you have any idea, how to get the logos in the PDF displayed? I plan to have a local Raspberry PI installation without public access and but at least self-encrypted HTTPS.

I really appreciate your great work on this useful piece of software! Thank You!

david · February 5, 2021, 10:25pm

hi @cdahinten the issue will most likely be deep within chromium, i’ve seen similar issues pop up with self signed ssl’s and also local domains that are not .test being denied completely by chromium.

cdahinten · February 6, 2021, 8:25am

Hi @david, do you think there could be an option in the company-logo-dialogue to have the choice between importing a logo or give a logo-URL from outside (e.g. https-homepage, social-media-profile)?

cdahinten · February 6, 2021, 2:49pm

Hello @david, maybe you can help me investigate the problem a bit further: When creating a new company the Invoice Ninja logo (I guess this one from public/images/logo.png) shows up correctly in the PDF until it gets replaced by a custom logo. The created-by-invoiceninja.jpg does not show off in the PDF in any case. Could it be a mime/type issue in ngnix or maybee a filename-size issue – or path mismatch in the snappdf query. As I am not a developer nor admin I have limited skills in fixing that out. I’d believe in an chromium issue if the public/images/logo.png would not show off in a fresh company.

Are there any logs, which I could look up. laravel.log does indicate normal operation.
nginx/access.log shows:

192.168.0.85 - - [05/Feb/2021:18:13:11 +0100] “GET /storage/Xk5RspJX2vCuMFWLquqyPkS3BUPOakcHVNuslN8tftKZobDZzeqK11aB0ZzAlovG/KLFzjjEoqo5CqHQ1HjcvMi3MJ53VJYKEvS7z7zz4.png HTTP/1.1” 200 21243 “-” “Mozilla/5.0 (X11; Linux aarch64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/84.0.4147.135 Safari/537.36”
192.168.0.85 - - [05/Feb/2021:18:13:11 +0100] “GET /images/created-by-invoiceninja-new.png HTTP/1.1” 200 25088 “-” “Mozilla/5.0 (X11; Linux aarch64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/84.0.4147.135 Safari/537.36”
192.168.0.101 - - [05/Feb/2021:18:13:14 +0100] “GET /client/invoice/fSaPsNI9IrqazSSpNkurQ5kblUPheLme7ZDegbY1kTOehBNwsbrwZ4Gm8jci0mSt/download_pdf HTTP/1.1” 200 245874 “http://invoiceninja/” “Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:85.0) Gecko/20100101 Firefox/85.0”

Seems OK to me, what do you think?

david · February 6, 2021, 8:10pm

can you access the logo directly in a browser using the following URL

https://your.url.com/public/storage/Xk5RspJX2vCuMFWLquqyPkS3BUPOakcHVNuslN8tftKZobDZzeqK11aB0ZzAlovG/KLFzjjEoqo5CqHQ1HjcvMi3MJ53VJYKEvS7z7zz4.png

The most likely reason it is not displaying on your PDF, is that your server cannot resolve the URL

ben · February 8, 2021, 10:18am

Hey there, sorry to interrupt, have you tried adding --ignore-certificate-errors in the launch options?

cdahinten · February 8, 2021, 4:05pm

Hello @ben, Hello @david,

coincidentally I was right about to post this solution you recommended:

– Set general-flags for ungoogled-chromium from opensuse repositories (version 84+)
sudo nano /etc/chromium.d/default-flags

– Add e.g. at the end:

Invoice Ninja Localhost-Setup Snapppdf-Settings

export CHROMIUM_FLAGS="$CHROMIUM_FLAGS --ignore-certificate-errors"

This would be nice to have added in the Ubuntu/Centos installation guides.

This also prevents my setup to run on a .test domain. I consider, that .internal, .intranet or .home are more trustworthy, self-explanatory and convenient!

Thank you for your support! I will evaluate the app and I am sure that even license key operation will work now succesful, due to the fact that the “Invoice Nina created with …” badge was not loaded too.

Another PDF related question: Are these variables set in my .env operational?

SNAPPDF_EXECUTABLE_PATH=/usr/bin/chromium
SNAPPDF_SKIP_DOWNLOAD=true

I have set them, but at the recent updates snappdf pulled a new version of chromium. My test installation does not access my local chromium. I symlinked chromium into the vendor/snappdf which is more of a “hack” than a good solution. Do you have an idea, why?

ben · February 8, 2021, 4:48pm

Thanks for the awesome feedback!

It’d be awesome if you can pull request or just suggest your changes on the package repository here: https://github.com/beganovich/snappdf

SNAPPDF_EXECUTABLE_PATH=/usr/bin/chromium
SNAPPDF_SKIP_DOWNLOAD=true

Variables should be exported globally (just like CHROMIUM_FLAGS) for now, but I plan to add them into Invoice Ninja.

lolo6tm · June 7, 2021, 12:06pm

Just for info, i had the same issue concerning the missing logo in quotes and invoices with my docker + nginx reverse proxy setup. The exposed nginx port is 80 (no ssl cert on docker)
The problem was coming from the /etc/hosts file in invoiceninja-app container.
Reading the docker setup doc : “Note for people running the container locally on their PC”, i understood i needed to add an extra host entry so the app container could resolve the APP_URL using the LAN IP of the reverse proxy.
That was wrong for my setup, changing the LAN IP to the docker network IP of my proxy did the trick.

To be more clear : in /etc/hosts of invoiceninja-app container

Not working setup (no logo in quotes and invoices)
<REVERSE PROXY LAN IP> <APP_URL>
192.168.1.33 invoice.my.domain

Working setup
<REVERSE PROXY DOCKER IP> <APP_URL>
178.18.0.2 invoice.my.domain

To check, login to your invoice-app container and verify that it can ping your APP_URL.
sudo docker exec -it --user root invoiceninja-app sh
ping invoice.my.domain

MisterNo · September 19, 2021, 4:37pm

hello lolo6tm,
can you please tell me what is your 178.18.0.2 ip address?

I’ve been battling this for 48 hours and cant get logo to be displayed.

the IP of my host, hosting docker is 192.168.11.5
APP_URL=http://in5.test:8003

both myhost and app container can ping the host name, please see below

/var/www/app # ping in5.test
PING in5.test (192.168.11.5): 56 data bytes
64 bytes from 192.168.11.5: seq=0 ttl=64 time=0.056 ms
64 bytes from 192.168.11.5: seq=1 ttl=64 time=0.074 ms
64 bytes from 192.168.11.5: seq=2 ttl=64 time=0.076 ms

any idea how to fix this?
I am running the latest code using docker compose.

when i try to access i get the page can not be displayed
http://192.168.11.5/public/storage/ugy1dpuul97nawajvfwkgzvqviojxr3dpj6cuhsanm7omikklx6cekoyywp3eskf/vFT1JIdc0eizEUhTSi0jfobeAiEF5r9UfWskmYcK.png

but i see my logos uploaded

~/dockerfiles/docker/app/public/storage/ugy1dpuul97nawajvfwkgzvqviojxr3dpj6cuhsanm7omikklx6cekoyywp3eskf$ ls -ltrh
total 216K
-rw-rw-r-- 1 1500 1500 15K Sep 19 07:27 Aq5WGLLOiEF14Sk5OicE4tQLTwprqADTFuA9K6ws.png
-rw-rw-r-- 1 1500 1500 15K Sep 19 07:28 gy3jra97p6g2AzBRrdFInTehVj7dpmYkBVh6jI0y.png
-rw-rw-r-- 1 1500 1500 15K Sep 19 07:44 pt60zdiKAEEjqsqhHA10MfS1Y8hLV1U9Pa7SCQG6.png
-rw-rw-r-- 1 1500 1500 5.0K Sep 19 08:07 ZJKWLADbAkspfkB1ii9TSrY9aADRxjn0CprrRk7Q.png
drwxrwxr-x 4 1500 1500 4.0K Sep 19 08:08 jxRcxVgHPKHP0mLr1x8YVYBlEOmydCqctXoojM0a
-rw-rw-r-- 1 1500 1500 50K Sep 19 08:12 vFT1JIdc0eizEUhTSi0jfobeAiEF5r9UfWskmYcK.png
-rw-rw-r-- 1 1500 1500 50K Sep 19 09:00 TFbOahDq3Pp9B9RMbPyyFjhkdOeAaZoghjp3clzt.png
-rw-rw-r-- 1 1500 1500 50K Sep 19 09:21 QnXZ42Aiv80OPfRjuU5ifOf5YQJTg8Ls0dqZPm7x.png