Media Library crashes with an error message while loading one or more images

[pgsfredda]

Bug report

Required System information

• Strapi Version: 4.13.7
• Operating System: Ubuntu 20.04.6 LTS
• Database: mySQL 8.0.34 (using mysql2 as driver)
• Node Version: 18.18.0
• NPM Version: 9.8.1
• Yarn Version: none
• Dev language: typescript

Describe the bug

When I try to load one or more images (size: 5kb) Strapi Admin get an error message:
Woops! Something went wrong. Please, try again.

Steps to reproduce the behavior

1. Go to Media Library
2. Click on Add new assets
3. Browsing files or dragging the image (max image size used is 5kb)
4. See error Woops! Something went wrong. Please, try again.
5. The error reported in the console is:

No error messages on server log.

Additional context

The production strapi configuration is under the sub path /strapi

My config/server.ts:

export default ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  url: env('STRAPI_URL', '/strapi'),
  app: {
    keys: env.array('APP_KEYS'),
  },
  webhooks: {
    populateRelations: env.bool('WEBHOOKS_POPULATE_RELATIONS', false),
  },
});

My config/admin.ts:

export default ({ env }) => ({
  url: env('STRAPI_ADMIN_URL', '/strapi/admin'),
  auth: {
    secret: env('ADMIN_JWT_SECRET'),
  },
  apiToken: {
    salt: env('API_TOKEN_SALT'),
  },
  transfer: {
    token: {
      salt: env('TRANSFER_TOKEN_SALT'),
    },
  },
});

No api prefix configured in config/admin.ts.

Any other configuration do not work with my apache proxy configuration (HTTP 404 Not found error message emitted by strapi).

Admin build command:
NODE_ENV=production STRAPI_URL=/strapi STRAPI_ADMIN_URL=/strapi/admin npm run build

My apache proxy config:

<IfModule mod_ssl.c>
<VirtualHost *:443>
        ServerName mydomain
        ServerAlias mydomain
        ServerAdmin myemail
        DocumentRoot /var/www/mydomain/html

        <Directory /var/www/mydomain/html>
            Options Indexes FollowSymLinks
            AllowOverride All
            Require all granted
        </Directory>

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined

        <IfModule mod_dir.c>
            DirectoryIndex index.php index.pl index.cgi index.html index.xhtml index.htm
        </IfModule>

	ProxyPreserveHost On
  	ProxyRequests Off
	ProxyPass /strapi http://localhost:1337
	ProxyPassReverse /strapi http://localhost:1337
</VirtualHost>
</IfModule>

When I make the same test on local machine, without server url field definition, strapi admin works fine.

Can someone help me? Thank you in advance

[pgsfredda]

UPDATE

I made some tests with the file appendSearchParamsToUrl.js adding some rows to modify the url and window.strapi.backendURL parameters.
The solution is not good because the problem is the composition of those parameters elsewhere but with this change I can use media now.

I'm waiting for a correct patch. This is a blocking issue.
Thank you

Temporary patch for appendSearchParamsToUrl.js

/**
 * Append the given search params to the given URL.
 *
 * @param {String} url The URL string to append the search params to
 * @param {Object} params The object of search params to append to the URL
 * @returns {String} A string representing the URL with the search params appended
 */
const appendSearchParamsToUrl = ({ url, params }) => {
  if (url === undefined || typeof params !== 'object') {
    return url;
  }

  var blob = url.split(':')[0] === 'blob'? 'blob:': '';
  if(blob) url = url.replace('blob:', '');
  url = url.replace(window.origin, '').replace(window.strapi.backendURL, '');
  if(!window.strapi.backendURL.startsWith(window.origin)) window.strapi.backendURL = window.origin + window.strapi.backendURL;
  if(!url.startsWith(window.strapi.backendURL)) url = blob + window.strapi.backendURL + url;
  
  console.log('*** STRAPI *** append', {url, params, origin: window.origin, backendURL: window.strapi.backendURL});
  const urlObj = new URL(url, window.strapi.backendURL);

  Object.entries(params).forEach(([key, value]) => {
    if (value !== undefined) {
      urlObj.searchParams.append(key, value);
    }
  });

  return urlObj.toString();
};

export { appendSearchParamsToUrl };

[Boegie19]

@joshuaellis Mind doing the labels for this one on Monday since I don't know what you have already done with this?

[DonikaV]

Hey, i am on 4.14.2 and have the same issue. How can I fix it?

[DonikaV]

appendSearchParamsToUrl

Hey, sorry, where i can insert this file?

[pgsfredda]

Hi.
If you have the same issue with media library you can try to put the file here:
.../node_modules/@strapi/plugin-upload/admin/src

But I'm facing again the problem also with this mini mini patches with the last release of strapi 4.12.2.

The problem starts elsewhere.

@joshuaellis, thank you for your work: strapi is really a great product. But if you use the Media library the severityis not only medium. It is impossible the use of the Media library at the moment.

Thank you

[Boegie19]

@pgsfredda For you as it would be a critical. but since strapi needs to look at the bigger scale and only 2 people are confirmed having this issue. upgrading it to a high would mean it would be a much bigger group of users impact.

still this is how I see it from the strapi community side and I can't talk for strapi.

[segovia]

@Boegie19 I also confirm to have this issue but my ticket was closed in favor of this one, even though I opened mine earlier. In any case, I consider this issue as severe. The documentation says relative path urls are allowed but this bug disables a crucial part of the application. Together with the fact that the fix should be very small, I really can't see why this is not fixed sooner rather than later.

[joshuaellis]

@pgsfredda @segovia if either of you think the issue is more important for yourselves then we accept PRs. However, @Boegie19 is correct – our internal escalation policies don't regard this as higher than medium. In fact, in reality it should be marked as low because the workaround is to use an absolute URL which is what we recommend anyway.