Customize the buttonwhich copy the link of an asset in the media library?

System Information
  • Strapi Version: 4.0.4
  • Operating System: Windows Server 2019
  • Database: SQLite
  • Node Version: 16.3.1
  • NPM Version: 8.1.3
  • Yarn Version: 1.22.17

How can i customize the copy link of an asset button in a way that i will get the full path to him with my own url?
I have my strapi published under some host header c.mydomain.com and also published the upload folder directly under another host header named f.mydomain.com as i want any asset to be viewable and accessiable by the link: f.mydomain.com/asset_file_name.png (or any other file extention) how can i change the copy linkbutton inorder that it will have this behavior?

Looking forward to help with that.
Thank You.

Hey @idc-dev_idc-dev,

I hope all is well with you!

I tried to look around and figure out a solution for you. I will explain the easiest and most straight forward solution that I could think of.

What we are going to do is to extend the find and findOne controllers of the upload plugin (on the API and admin side), to replace the URL with your host domain. You can store your UPLOAD_URL in a env variable and hard code a default one.

First create the following file:

project/src/extension/upload/strapi-server.js

with the following code (which is compiled from the original upload plugin):

// Utilities and necessary functions for parsing your data
const utils = require('@strapi/utils');
const { sanitize } = utils;
const ACTIONS = {
  read: 'plugin::upload.read',
  readSettings: 'plugin::upload.settings.read',
  create: 'plugin::upload.assets.create',
  update: 'plugin::upload.assets.update',
  download: 'plugin::upload.assets.download',
  copyLink: 'plugin::upload.assets.copy-link',
}; const fileModel = 'plugin::upload.file';

const getService = name => {
  return strapi.plugin('upload').service(name);
};
const sanitizeOutput = (data, ctx) => {
  const schema = strapi.getModel('plugin::upload.file');
  const { auth } = ctx.state;

  return sanitize.contentAPI.output(data, schema, { auth });
};

// Parser function
function prefixUrl(data, url = process.env['UPLOAD_URL'] || 'https://google.com/') {
  var formats = data.formats.thumbnail ? {
    thumbnail: data.formats.thumbnail.url.replace('/', url),
    large: data.formats.large.url.replace('/', url),
    medium: data.formats.medium.url.replace('/', url),
    small: data.formats.small.url.replace('/', url),
  } : data.formats
  return {
    ...data, url: data.url.replace('/', url), formats
  }
}
module.exports = (plugin) => {


  // Client Side Requests
  plugin.controllers['content-api'].find = async ctx => {
    const files = await getService('upload').findMany(ctx.query).then(items => items.map(each => prefixUrl(each)));
    console.log(files)
    ctx.body = await sanitizeOutput(files, ctx)
  }

  plugin.controllers['content-api'].findOne = async ctx => {
    const {
      params: { id },
    } = ctx;

    const file = await getService('upload').findOne(id);

    if (!file) {
      return ctx.notFound('file.notFound');
    }

    ctx.body = await sanitizeOutput(file, ctx).then(item => prefixUrl(item));
  }

  // Admin Side Requests
  plugin.controllers['admin-api'].find = async ctx => {
    const {
      state: { userAbility },
    } = ctx;

    const pm = strapi.admin.services.permission.createPermissionsManager({
      ability: userAbility,
      action: ACTIONS.read,
      model: fileModel,
    });

    if (!pm.isAllowed) {
      return ctx.forbidden();
    }

    const query = pm.addPermissionsQueryTo(ctx.query);

    const { results, pagination } = await getService('upload').findPage(query);

    const sanitizedResults = await pm.sanitizeOutput(results).then(items => items.map(each => prefixUrl(each)));

    return { results: sanitizedResults, pagination };
  }
  plugin.controllers['admin-api'].findOne = async ctx => {
    const {
      state: { userAbility },
      params: { id },
    } = ctx;

    const { pm, file } = await findEntityAndCheckPermissions(
      userAbility,
      ACTIONS.read,
      fileModel,
      id
    );

    ctx.body = await pm.sanitizeOutput(file).then(item => prefixUrl(item));
  }
  return plugin;
};

and following that, your API responses should be modified:

as well as your admin panel URLs:

This is a bit of a unique use case, so please let me know if that helped!

All the best

Hi nextrapi,

First of all many thanks for your fast reply and help with my requirement.
Secondly I tried your provided code on a clean installation of strapi and it looks like it works.
But when I tried it today on my exisitng installation of strapi it didn’t worked and the Media Library was not working at all.

I’m attaching here in the url the network log from chrom strapiio-chrome-network.har

Looking forward to your reply and help

Thank You.

Here is the is the output of the cmd / terminal window:

Your environment has been set up for using Node.js 16.13.1 (x64) and npm.

C:\Windows\System32>cd\

C:\>d:

D:\>cd sites\strapio

D:\Sites\strapio>yarn develop
yarn run v1.22.17
$ strapi develop

 Project information

┌────────────────────┬──────────────────────────────────────────────────┐
│ Time               │ Sun Jan 23 2022 11:34:15 GMT+0200 (שעון ישראל (… │
│ Launched in        │ 7007 ms                                          │
│ Environment        │ development                                      │
│ Process PID        │ 17736                                            │
│ Version            │ 4.0.5 (node v16.13.1)                            │
│ Edition            │ Community                                        │
└────────────────────┴──────────────────────────────────────────────────┘

 Actions available

Welcome back!
To manage your project 🚀, go to the administration panel at:
http://localhost:1337/admin

To access the server ⚡️, go to:
http://localhost:1337

[2022-01-23 11:35:21.539] http: GET /admin/ (30 ms) 200
[2022-01-23 11:35:21.574] http: GET /admin/runtime~main.59f64f0b.js (11 ms) 200
[2022-01-23 11:35:21.575] http: GET /admin/main.61df8333.js (3 ms) 200
[2022-01-23 11:35:22.972] http: GET /admin/project-type (2 ms) 200
[2022-01-23 11:35:22.984] http: GET /admin/6882.aeb32fe4.chunk.js (3 ms) 200
[2022-01-23 11:35:22.985] http: GET /admin/8768.24671788.chunk.js (3 ms) 200
[2022-01-23 11:35:22.987] http: GET /admin/2790.08fe515a.chunk.js (4 ms) 200
[2022-01-23 11:35:23.037] http: GET /admin/fontawesome-css.ea62fda7.chunk.js (1 ms) 200
[2022-01-23 11:35:23.042] http: GET /admin/en-json.804b6049.chunk.js (3 ms) 200
[2022-01-23 11:35:23.043] http: GET /admin/he-json.25ee30c0.chunk.js (3 ms) 200
[2022-01-23 11:35:23.061] http: GET /admin/fontawesome-css-all.5628623f.chunk.js (1 ms) 200
[2022-01-23 11:35:23.075] http: GET /admin/content-type-builder-translation-en-json.519d4c53.chunk.js (7 ms) 200
[2022-01-23 11:35:23.077] http: GET /admin/email-translation-en-json.f16fbd64.chunk.js (5 ms) 200
[2022-01-23 11:35:23.090] http: GET /admin/upload-translation-en-json.65425f97.chunk.js (5 ms) 200
[2022-01-23 11:35:23.091] http: GET /admin/upload-translation-he-json.73a23787.chunk.js (4 ms) 200
[2022-01-23 11:35:23.092] http: GET /admin/documentation-translation-en-json.3d230634.chunk.js (4 ms) 200
[2022-01-23 11:35:23.101] http: GET /admin/i18n-translation-en-json.e0fe926a.chunk.js (2 ms) 200
[2022-01-23 11:35:23.105] http: GET /admin/fontawesome-js.d506e26e.chunk.js (1 ms) 200
[2022-01-23 11:35:23.106] http: GET /admin/users-permissions-translation-en-json.1b5fc64f.chunk.js (3 ms) 200
[2022-01-23 11:35:23.198] http: GET /admin/init (4 ms) 200
[2022-01-23 11:35:23.239] http: GET /admin/cropper-css.d94c6827.chunk.js (2 ms) 200
[2022-01-23 11:35:23.782] http: GET /admin/fde9b1ad0670d29a2516.png (1 ms) 200
[2022-01-23 11:35:38.533] http: POST /admin/login (188 ms) 200
[2022-01-23 11:35:38.550] http: GET /admin/7814.a901a130.chunk.js (1 ms) 200
[2022-01-23 11:35:38.572] http: GET /admin/3950.b4078929.chunk.js (2 ms) 200
[2022-01-23 11:35:38.573] http: GET /admin/Admin-authenticatedApp.060e0459.chunk.js (2 ms) 200
[2022-01-23 11:35:38.696] http: GET /admin/information (36 ms) 200
[2022-01-23 11:35:38.732] http: GET /admin/users/me/permissions (70 ms) 200
[2022-01-23 11:35:38.752] http: GET /i18n/locales (34 ms) 200
[2022-01-23 11:35:38.780] http: GET /admin/5395.826457ca.chunk.js (3 ms) 200
[2022-01-23 11:35:38.782] http: GET /admin/1512.e55d373e.chunk.js (4 ms) 200
[2022-01-23 11:35:38.783] http: GET /admin/Admin_homePage.5b244fb7.chunk.js (2 ms) 200
[2022-01-23 11:35:38.793] http: GET /admin/15026a3d58aeb2828134.png (1 ms) 200
[2022-01-23 11:35:38.846] http: GET /content-manager/components (27 ms) 200
[2022-01-23 11:35:38.861] http: GET /content-manager/content-types (37 ms) 200
[2022-01-23 11:35:38.885] http: GET /admin/2a9e9ef5c4c775bb7c7b.png (1 ms) 200
[2022-01-23 11:35:44.703] http: GET /admin/3852.e51a3916.chunk.js (1 ms) 200
[2022-01-23 11:35:44.715] http: GET /admin/9182.d9e722c9.chunk.js (1 ms) 200
[2022-01-23 11:35:44.729] http: GET /admin/7169.12ea0072.chunk.js (1 ms) 200
[2022-01-23 11:35:44.741] http: GET /admin/9372.8158e36c.chunk.js (1 ms) 200
[2022-01-23 11:35:44.758] http: GET /admin/Admin_settingsPage.a342ef4d.chunk.js (1 ms) 200
[2022-01-23 11:35:50.935] http: GET /admin/upload.78208c4b.chunk.js (1 ms) 200
[2022-01-23 11:35:51.028] http: GET /upload/files?sort=updatedAt:DESC&page=1&pageSize=10 (32 ms) 200
[2022-01-23 11:35:51.075] http: GET /uploads/thumbnail_teachers_Pic_Default_fd959c7836.jpg?width=162&height=162 (5 ms) 200
[2022-01-23 11:35:51.076] http: GET /uploads/thumbnail_tay_chi_6c9716e949.jpg?width=1108&height=399 (5 ms) 200
[2022-01-23 11:35:51.077] http: GET /uploads/thumbnail_Office365_banner_eng_ed2cb0f457.jpg?width=1550&height=530 (4 ms) 200
[2022-01-23 11:35:51.079] http: GET /uploads/thumbnail_new_year2016_f648df3507.jpg?width=1550&height=530 (6 ms) 200
[2022-01-23 11:35:51.085] http: GET /uploads/thumbnail_study_how_to_6a5df19bf0.jpg?width=1550&height=530 (4 ms) 200
[2022-01-23 11:35:51.089] http: GET /uploads/thumbnail_mindfulness_122656a021.jpg?width=1550&height=640 (6 ms) 200
[2022-01-23 11:35:51.090] http: GET /uploads/thumbnail_counsling_62d5be4ca7.jpg?width=1550&height=530 (6 ms) 200
[2022-01-23 11:35:51.091] http: GET /uploads/thumbnail_argov_91771df7e8.jpg?width=1550&height=530 (4 ms) 200
[2022-01-23 11:35:51.094] http: GET /uploads/thumbnail_onlineteaching_b9b7961abc.png?width=1650&height=521 (1 ms) 200
[2022-01-23 11:35:51.097] http: GET /uploads/thumbnail_Office365_banner_heb_10ff062547.jpg?width=1550&height=530 (1 ms) 200
[2022-01-23 11:35:57.657] http: GET /uploads/thumbnail_mindfulness_122656a021.jpg?updated_at=2022-01-11T12:51:43.823Z (1 ms) 200

D:\Sites\strapio>yarn build
yarn run v1.22.17
$ strapi build
Building your admin UI with development configuration ...

√ Webpack
  Compiled successfully in 1.08m

Admin UI built successfully
Done in 97.62s.

D:\Sites\strapio>yarn develop
yarn run v1.22.17
$ strapi develop

   ╭──────────────────────────────────────────────────────────────────────────────╮
   │                                                                              │
   │              A new version of Strapi is available 4.0.4 → 4.0.5              │
   │   Check out the new releases at: https://github.com/strapi/strapi/releases   │
   │                                                                              │
   ╰──────────────────────────────────────────────────────────────────────────────╯


 Project information

┌────────────────────┬──────────────────────────────────────────────────┐
│ Time               │ Sun Jan 23 2022 15:28:13 GMT+0200 (שעון ישראל (… │
│ Launched in        │ 8300 ms                                          │
│ Environment        │ development                                      │
│ Process PID        │ 26432                                            │
│ Version            │ 4.0.4 (node v16.13.1)                            │
│ Edition            │ Community                                        │
└────────────────────┴──────────────────────────────────────────────────┘

 Actions available

Welcome back!
To manage your project 🚀, go to the administration panel at:
http://localhost:1337/admin

To access the server ⚡️, go to:
http://localhost:1337

[2022-01-23 15:34:46.765] http: GET /admin/ (31 ms) 200
[2022-01-23 15:34:46.824] http: GET /admin/runtime~main.2509b235.js (11 ms) 200
[2022-01-23 15:34:46.825] http: GET /admin/main.829964b7.js (2 ms) 200
[2022-01-23 15:34:47.125] http: GET /admin/project-type (2 ms) 200
[2022-01-23 15:34:47.142] http: GET /admin/6863.40497e89.chunk.js (4 ms) 200
[2022-01-23 15:34:47.143] http: GET /admin/8830.691bb187.chunk.js (4 ms) 200
[2022-01-23 15:34:47.144] http: GET /admin/2790.0078f277.chunk.js (4 ms) 200
[2022-01-23 15:34:47.192] http: GET /admin/fontawesome-css.ea62fda7.chunk.js (1 ms) 200
[2022-01-23 15:34:47.200] http: GET /admin/en-json.804b6049.chunk.js (2 ms) 200
[2022-01-23 15:34:47.201] http: GET /admin/he-json.25ee30c0.chunk.js (3 ms) 200
[2022-01-23 15:34:47.219] http: GET /admin/fontawesome-css-all.d2b3b28d.chunk.js (1 ms) 200
[2022-01-23 15:34:47.228] http: GET /admin/content-type-builder-translation-en-json.519d4c53.chunk.js (6 ms) 200
[2022-01-23 15:34:47.230] http: GET /admin/email-translation-en-json.f16fbd64.chunk.js (4 ms) 200
[2022-01-23 15:34:47.240] http: GET /admin/upload-translation-en-json.65425f97.chunk.js (2 ms) 200
[2022-01-23 15:34:47.243] http: GET /admin/upload-translation-he-json.73a23787.chunk.js (2 ms) 200
[2022-01-23 15:34:47.247] http: GET /admin/documentation-translation-en-json.3d230634.chunk.js (2 ms) 200
[2022-01-23 15:34:47.251] http: GET /admin/i18n-translation-en-json.e0fe926a.chunk.js (1 ms) 200
[2022-01-23 15:34:47.255] http: GET /admin/users-permissions-translation-en-json.1b5fc64f.chunk.js (1 ms) 200
[2022-01-23 15:34:47.258] http: GET /admin/fontawesome-js.d506e26e.chunk.js (1 ms) 200
[2022-01-23 15:34:47.303] http: GET /admin/init (3 ms) 200
[2022-01-23 15:34:47.349] http: GET /admin/cropper-css.d94c6827.chunk.js (1 ms) 200
[2022-01-23 15:34:47.883] http: GET /admin/fde9b1ad0670d29a2516.png (1 ms) 200
[2022-01-23 15:34:52.652] http: POST /admin/login (188 ms) 200
[2022-01-23 15:34:52.677] http: GET /admin/7814.a901a130.chunk.js (10 ms) 200
[2022-01-23 15:34:52.677] http: GET /admin/6250.ecd93e51.chunk.js (5 ms) 200
[2022-01-23 15:34:52.683] http: GET /admin/Admin-authenticatedApp.1f121f02.chunk.js (8 ms) 200
[2022-01-23 15:34:52.799] http: GET /admin/information (35 ms) 200
[2022-01-23 15:34:52.831] http: GET /admin/users/me/permissions (64 ms) 200
[2022-01-23 15:34:52.851] http: GET /i18n/locales (31 ms) 200
[2022-01-23 15:34:52.883] http: GET /admin/8862.8706f1b9.chunk.js (5 ms) 200
[2022-01-23 15:34:52.884] http: GET /admin/985.cd45222a.chunk.js (5 ms) 200
[2022-01-23 15:34:52.885] http: GET /admin/Admin_homePage.1fa125c8.chunk.js (4 ms) 200
[2022-01-23 15:34:52.886] http: GET /admin/15026a3d58aeb2828134.png (4 ms) 200
[2022-01-23 15:34:52.941] http: GET /content-manager/components (26 ms) 200
[2022-01-23 15:34:52.956] http: GET /content-manager/content-types (37 ms) 200
[2022-01-23 15:34:52.982] http: GET /admin/2a9e9ef5c4c775bb7c7b.png (1 ms) 200
[2022-01-23 15:35:09.138] http: GET /admin/upload.e28945dd.chunk.js (2 ms) 200
[2022-01-23 15:35:09.228] error: Cannot read properties of null (reading 'thumbnail')
TypeError: Cannot read properties of null (reading 'thumbnail')
    at prefixUrl (D:\Sites\strapio\src\extensions\upload\strapi-server.js:25:30)
    at D:\Sites\strapio\src\extensions\upload\strapi-server.js:79:95
    at Array.map (<anonymous>)
    at D:\Sites\strapio\src\extensions\upload\strapi-server.js:79:83
    at async Object.plugin.controllers.admin-api.find (D:\Sites\strapio\src\extensions\upload\strapi-server.js:79:30)
    at async returnBodyMiddleware (D:\Sites\strapio\node_modules\@strapi\strapi\lib\services\server\compose-endpoint.js:52:18)
    at async policiesMiddleware (D:\Sites\strapio\node_modules\@strapi\strapi\lib\services\server\policy.js:24:5)
    at async serve (D:\Sites\strapio\node_modules\koa-static\index.js:59:5)
    at async returnBodyMiddleware (D:\Sites\strapio\node_modules\@strapi\strapi\lib\services\server\compose-endpoint.js:52:18)
    at async policiesMiddleware (D:\Sites\strapio\node_modules\@strapi\strapi\lib\services\server\policy.js:24:5)
    at async D:\Sites\strapio\node_modules\@strapi\strapi\lib\middlewares\body.js:24:7
    at async D:\Sites\strapio\node_modules\@strapi\strapi\lib\middlewares\logger.js:22:5
    at async D:\Sites\strapio\node_modules\@strapi\strapi\lib\middlewares\powered-by.js:16:5
    at async cors (D:\Sites\strapio\node_modules\@koa\cors\index.js:56:32)
    at async D:\Sites\strapio\node_modules\@strapi\strapi\lib\middlewares\errors.js:13:7
    at async session (D:\Sites\strapio\node_modules\koa-session\index.js:41:7)
[2022-01-23 15:35:10.269] error: Cannot read properties of null (reading 'thumbnail')
TypeError: Cannot read properties of null (reading 'thumbnail')
    at prefixUrl (D:\Sites\strapio\src\extensions\upload\strapi-server.js:25:30)
    at D:\Sites\strapio\src\extensions\upload\strapi-server.js:79:95
    at Array.map (<anonymous>)
    at D:\Sites\strapio\src\extensions\upload\strapi-server.js:79:83
    at async Object.plugin.controllers.admin-api.find (D:\Sites\strapio\src\extensions\upload\strapi-server.js:79:30)
    at async returnBodyMiddleware (D:\Sites\strapio\node_modules\@strapi\strapi\lib\services\server\compose-endpoint.js:52:18)
    at async policiesMiddleware (D:\Sites\strapio\node_modules\@strapi\strapi\lib\services\server\policy.js:24:5)
    at async serve (D:\Sites\strapio\node_modules\koa-static\index.js:59:5)
    at async returnBodyMiddleware (D:\Sites\strapio\node_modules\@strapi\strapi\lib\services\server\compose-endpoint.js:52:18)
    at async policiesMiddleware (D:\Sites\strapio\node_modules\@strapi\strapi\lib\services\server\policy.js:24:5)
    at async D:\Sites\strapio\node_modules\@strapi\strapi\lib\middlewares\body.js:24:7
    at async D:\Sites\strapio\node_modules\@strapi\strapi\lib\middlewares\logger.js:22:5
    at async D:\Sites\strapio\node_modules\@strapi\strapi\lib\middlewares\powered-by.js:16:5
    at async cors (D:\Sites\strapio\node_modules\@koa\cors\index.js:56:32)
    at async D:\Sites\strapio\node_modules\@strapi\strapi\lib\middlewares\errors.js:13:7
    at async session (D:\Sites\strapio\node_modules\koa-session\index.js:41:7)
[2022-01-23 15:35:12.299] error: Cannot read properties of null (reading 'thumbnail')
TypeError: Cannot read properties of null (reading 'thumbnail')
    at prefixUrl (D:\Sites\strapio\src\extensions\upload\strapi-server.js:25:30)
    at D:\Sites\strapio\src\extensions\upload\strapi-server.js:79:95
    at Array.map (<anonymous>)
    at D:\Sites\strapio\src\extensions\upload\strapi-server.js:79:83
    at async Object.plugin.controllers.admin-api.find (D:\Sites\strapio\src\extensions\upload\strapi-server.js:79:30)
    at async returnBodyMiddleware (D:\Sites\strapio\node_modules\@strapi\strapi\lib\services\server\compose-endpoint.js:52:18)
    at async policiesMiddleware (D:\Sites\strapio\node_modules\@strapi\strapi\lib\services\server\policy.js:24:5)
    at async serve (D:\Sites\strapio\node_modules\koa-static\index.js:59:5)
    at async returnBodyMiddleware (D:\Sites\strapio\node_modules\@strapi\strapi\lib\services\server\compose-endpoint.js:52:18)
    at async policiesMiddleware (D:\Sites\strapio\node_modules\@strapi\strapi\lib\services\server\policy.js:24:5)
    at async D:\Sites\strapio\node_modules\@strapi\strapi\lib\middlewares\body.js:24:7
    at async D:\Sites\strapio\node_modules\@strapi\strapi\lib\middlewares\logger.js:22:5
    at async D:\Sites\strapio\node_modules\@strapi\strapi\lib\middlewares\powered-by.js:16:5
    at async cors (D:\Sites\strapio\node_modules\@koa\cors\index.js:56:32)
    at async D:\Sites\strapio\node_modules\@strapi\strapi\lib\middlewares\errors.js:13:7
    at async session (D:\Sites\strapio\node_modules\koa-session\index.js:41:7)
[2022-01-23 15:35:16.326] error: Cannot read properties of null (reading 'thumbnail')
TypeError: Cannot read properties of null (reading 'thumbnail')
    at prefixUrl (D:\Sites\strapio\src\extensions\upload\strapi-server.js:25:30)
    at D:\Sites\strapio\src\extensions\upload\strapi-server.js:79:95
    at Array.map (<anonymous>)
    at D:\Sites\strapio\src\extensions\upload\strapi-server.js:79:83
    at async Object.plugin.controllers.admin-api.find (D:\Sites\strapio\src\extensions\upload\strapi-server.js:79:30)
    at async returnBodyMiddleware (D:\Sites\strapio\node_modules\@strapi\strapi\lib\services\server\compose-endpoint.js:52:18)
    at async policiesMiddleware (D:\Sites\strapio\node_modules\@strapi\strapi\lib\services\server\policy.js:24:5)
    at async serve (D:\Sites\strapio\node_modules\koa-static\index.js:59:5)
    at async returnBodyMiddleware (D:\Sites\strapio\node_modules\@strapi\strapi\lib\services\server\compose-endpoint.js:52:18)
    at async policiesMiddleware (D:\Sites\strapio\node_modules\@strapi\strapi\lib\services\server\policy.js:24:5)
    at async D:\Sites\strapio\node_modules\@strapi\strapi\lib\middlewares\body.js:24:7
    at async D:\Sites\strapio\node_modules\@strapi\strapi\lib\middlewares\logger.js:22:5
    at async D:\Sites\strapio\node_modules\@strapi\strapi\lib\middlewares\powered-by.js:16:5
    at async cors (D:\Sites\strapio\node_modules\@koa\cors\index.js:56:32)
    at async D:\Sites\strapio\node_modules\@strapi\strapi\lib\middlewares\errors.js:13:7
    at async session (D:\Sites\strapio\node_modules\koa-session\index.js:41:7)

@nextrapi is there a way only to customize the CopyLinkButton component located at:\node_modules@strapi\plugin-upload\admin\src\components\CopyLinkButton\index.js) instead?

something like that?

import React from 'react';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import { IconButton } from '@strapi/design-system/IconButton';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { useNotification } from '@strapi/helper-plugin';
import LinkIcon from '@strapi/icons/Link';
import getTrad from '../../utils/getTrad';

export const CopyLinkButton = ({ url }) => {
  const publicUrl = process.env['UPLOAD_URL'] || 'https://google.com/';
  const assetUrl = url.replace('/upload/', publicUrl); 
  const toggleNotification = useNotification();
  const { formatMessage } = useIntl();

  return (
    <CopyToClipboard
      text={assetUrl}
      onCopy={() => {
        toggleNotification({
          type: 'success',
          message: {
            id: 'notification.link-copied',
            defaultMessage: 'Link copied into the clipboard',
          },
        });
      }}
    >
      <IconButton
        label={formatMessage({
          id: getTrad('control-card.copy-link'),
          defaultMessage: 'Copy link',
        })}
        icon={<LinkIcon />}
      />
    </CopyToClipboard>
  );
};

CopyLinkButton.propTypes = {
  url: PropTypes.string.isRequired,
};

if yes how do i rebuild my strapi to use it?

sorry in advance if I’m asking some novice/nube questions.

Looking forward to your reply.
Thank you.

Hi @idc-dev_idc-dev,
Unfortunately you can not edit the front-end portion of the admin panel that way anymore in v4.

If you would like to implement this change in the UI, instead of the API, then you would have to create a custom plugin, and replace the media library component.

Could you change the function in the code that you have. I believe it should fix the problem.

// Parser function
function prefixUrl(data, url = process.env['UPLOAD_URL'] || 'https://google.com/') {
  var formats = data && data.formats && data.formats.thumbnail ? {
    thumbnail: data.formats.thumbnail.url.replace('/', url),
    large: data.formats.large.url.replace('/', url),
    medium: data.formats.medium.url.replace('/', url),
    small: data.formats.small.url.replace('/', url),
  } : data.formats
  return {
    ...data, url: data.url.replace('/', url), formats
  }
}

Hi @nextrapi ,i tried it again but still not working.

2022-01-24_08h44_21

Here again a link for the updated chrome network log: localhost.har

and those are errors i receive in cmd console/terminal window:

[2022-01-24 08:43:29.905] http: GET /upload/files?sort=updatedAt:DESC&page=1&pageSize=10 (17 ms) 200
[2022-01-24 08:43:39.977] error: Cannot read properties of undefined (reading 'url')
TypeError: Cannot read properties of undefined (reading 'url')
    at prefixUrl (D:\Sites\strapi.io\src\extensions\upload\strapi-server.js:27:31)
    at D:\Sites\strapi.io\src\extensions\upload\strapi-server.js:79:95
    at Array.map (<anonymous>)
    at D:\Sites\strapi.io\src\extensions\upload\strapi-server.js:79:83
    at async Object.plugin.controllers.admin-api.find (D:\Sites\strapi.io\src\extensions\upload\strapi-server.js:79:30)
    at async returnBodyMiddleware (D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\services\server\compose-endpoint.js:52:18)
    at async policiesMiddleware (D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\services\server\policy.js:24:5)
    at async serve (D:\Sites\strapi.io\node_modules\koa-static\index.js:59:5)
    at async returnBodyMiddleware (D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\services\server\compose-endpoint.js:52:18)
    at async policiesMiddleware (D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\services\server\policy.js:24:5)
    at async D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\middlewares\body.js:24:7
    at async D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\middlewares\logger.js:22:5
    at async D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\middlewares\powered-by.js:16:5
    at async cors (D:\Sites\strapi.io\node_modules\@koa\cors\index.js:56:32)
    at async D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\middlewares\errors.js:13:7
    at async session (D:\Sites\strapi.io\node_modules\koa-session\index.js:41:7)
[2022-01-24 08:43:41.007] error: Cannot read properties of undefined (reading 'url')
TypeError: Cannot read properties of undefined (reading 'url')
    at prefixUrl (D:\Sites\strapi.io\src\extensions\upload\strapi-server.js:27:31)
    at D:\Sites\strapi.io\src\extensions\upload\strapi-server.js:79:95
    at Array.map (<anonymous>)
    at D:\Sites\strapi.io\src\extensions\upload\strapi-server.js:79:83
    at async Object.plugin.controllers.admin-api.find (D:\Sites\strapi.io\src\extensions\upload\strapi-server.js:79:30)
    at async returnBodyMiddleware (D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\services\server\compose-endpoint.js:52:18)
    at async policiesMiddleware (D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\services\server\policy.js:24:5)
    at async serve (D:\Sites\strapi.io\node_modules\koa-static\index.js:59:5)
    at async returnBodyMiddleware (D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\services\server\compose-endpoint.js:52:18)
    at async policiesMiddleware (D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\services\server\policy.js:24:5)
    at async D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\middlewares\body.js:24:7
    at async D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\middlewares\logger.js:22:5
    at async D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\middlewares\powered-by.js:16:5
    at async cors (D:\Sites\strapi.io\node_modules\@koa\cors\index.js:56:32)
    at async D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\middlewares\errors.js:13:7
    at async session (D:\Sites\strapi.io\node_modules\koa-session\index.js:41:7)
[2022-01-24 08:43:43.034] error: Cannot read properties of undefined (reading 'url')
TypeError: Cannot read properties of undefined (reading 'url')
    at prefixUrl (D:\Sites\strapi.io\src\extensions\upload\strapi-server.js:27:31)
    at D:\Sites\strapi.io\src\extensions\upload\strapi-server.js:79:95
    at Array.map (<anonymous>)
    at D:\Sites\strapi.io\src\extensions\upload\strapi-server.js:79:83
    at async Object.plugin.controllers.admin-api.find (D:\Sites\strapi.io\src\extensions\upload\strapi-server.js:79:30)
    at async returnBodyMiddleware (D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\services\server\compose-endpoint.js:52:18)
    at async policiesMiddleware (D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\services\server\policy.js:24:5)
    at async serve (D:\Sites\strapi.io\node_modules\koa-static\index.js:59:5)
    at async returnBodyMiddleware (D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\services\server\compose-endpoint.js:52:18)
    at async policiesMiddleware (D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\services\server\policy.js:24:5)
    at async D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\middlewares\body.js:24:7
    at async D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\middlewares\logger.js:22:5
    at async D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\middlewares\powered-by.js:16:5
    at async cors (D:\Sites\strapi.io\node_modules\@koa\cors\index.js:56:32)
    at async D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\middlewares\errors.js:13:7
    at async session (D:\Sites\strapi.io\node_modules\koa-session\index.js:41:7)
[2022-01-24 08:43:47.069] error: Cannot read properties of undefined (reading 'url')
TypeError: Cannot read properties of undefined (reading 'url')
    at prefixUrl (D:\Sites\strapi.io\src\extensions\upload\strapi-server.js:27:31)
    at D:\Sites\strapi.io\src\extensions\upload\strapi-server.js:79:95
    at Array.map (<anonymous>)
    at D:\Sites\strapi.io\src\extensions\upload\strapi-server.js:79:83
    at async Object.plugin.controllers.admin-api.find (D:\Sites\strapi.io\src\extensions\upload\strapi-server.js:79:30)
    at async returnBodyMiddleware (D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\services\server\compose-endpoint.js:52:18)
    at async policiesMiddleware (D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\services\server\policy.js:24:5)
    at async serve (D:\Sites\strapi.io\node_modules\koa-static\index.js:59:5)
    at async returnBodyMiddleware (D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\services\server\compose-endpoint.js:52:18)
    at async policiesMiddleware (D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\services\server\policy.js:24:5)
    at async D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\middlewares\body.js:24:7
    at async D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\middlewares\logger.js:22:5
    at async D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\middlewares\powered-by.js:16:5
    at async cors (D:\Sites\strapi.io\node_modules\@koa\cors\index.js:56:32)
    at async D:\Sites\strapi.io\node_modules\@strapi\strapi\lib\middlewares\errors.js:13:7
    at async session (D:\Sites\strapi.io\node_modules\koa-session\index.js:41:7)

Looking forward to your help and reply.
Thank You.