File paths break on selecting an already uploaded file (Windows)

[jvanoostrom]

When selecting an already uploaded file through the admin panel (eg. a header image) the path slashes reverse (from / to \), resulting in a 404 when rendering the image. This occurs on XAMPP for Windows.

Details

Question	Answer
Relevant Bolt Version	master
Install type	Composer install
BC Break	N/A
PHP version	7.4
Web server	Built-in, symfony
For UX/UI issues	N/A

Reproduction

On Windows, first upload a file. All looks well (/ slashes everywhere, image gets rendered). Now create a new page or edit the existing page and select an existing file. The slashes reverse to \ and the image does not get rendered (404).

Bug summary

When selecting an already uploaded file through the admin panel (eg. a header image) the path slashes reverse (from / to \), resulting in a 404 when rendering the image. This occurs on XAMPP for Windows.

Specifics

Example file name:
/files/entries/1920-737-8.jpg

changes to

/files/entries/920-737-8.jpg

Steps to reproduce

On Windows, first upload a file. All looks well (/ slashes everywhere, image gets rendered). Now create a new page or edit the existing page and select an existing file. The slashes reverse to \ and the image does not get rendered (404).

Expected result

The selected image gets rendered properly

Actual result

Due to the slashes reversing, the image rendering results in a 404 error.

[jvanoostrom]

A temporary fix is to use the twig filter replace, to replace the errorneous \ with /, eg:
{{ record.image|replace({'\\': '/'}) }}

(Thanks to @bobdenotter)

[I-Valchev]

Hi @jvanoostrom , thanks for the detailed issue description! My colleague @nestordedios and I looked into this, but we cannot replicate the issue just yet..

Can you show some screenshots and/or a video of what exactly breaks?

In terms of a fix, while resolving it in twig can solve it, it seems more appropriate to fix the issue earlier where the link is generated. I'm not yet sure where that would be, since we didn't reproduce it yet. I'm happy to provide more pointers, though, when we have more information about it!

[jvanoostrom]

Hi @I-Valchev,

For some reason, Bolt reverses the slashes from / to \, and I have a feeling it has something to do with the Windows filesystem. I've attached a small video that shows what happens when you upload an image, but then replace that image by an already uploaded image. It then refers to a path with \ rather than /. Upon rendering an image with a \ in it's path, the background-url CSS attribute becomes:

And Chrome throws a 404:

Referring to the following link:
https://localhost:8000/files/pages%E2%80%A1%02%C3%9Aniel-klein-rf7lVmfwupU-unsplash.jpg

Video:
https://user-images.githubusercontent.com/8863965/108979724-3bc17d00-768b-11eb-8ca6-829e96a29dcb.mp4

[I-Valchev]

Hi @jvanoostrom , thanks for the info! Now we could reproduce and find a solution for it! See the linked PR above, the PR will be merged in and shipped with the 4.1.14 release.