Suggestion: Icône pour les fichiers qui ne sont pas des images

[charlie404]

Hello @Grafikart ,

Est-il possible d'implémenter une fonction qui retourne des icônes en aperçu pour les fichiers qui ne sont pas des images ?

Une fonction de ce type la :

function getThumbnail(url) {
  const extension = url.split('.').pop().toLowerCase();
  switch(extension) {
    case 'jpg': case 'jpeg': case 'png': case 'gif':
      return url;
    case 'pdf':
      return `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" style="enable-background:new 0 0 496 512;" xml:space="preserve"><rect y="0" style="fill:%23FFFFFF;" width="496" height="512"/><path d="M162.8,394.1h32.1v32.1h-32.1c-23.6,0-42.7-19.2-42.7-42.7V127c0-23.6,19.2-42.7,42.7-42.7h110.5c11.4,0,22.2,4.5,30.3,12.5l60.4,60.4c8,8,12.5,18.9,12.5,30.3v99.9h-32.1v-96.2h-53.4c-11.8,0-21.4-9.6-21.4-21.4v-53.4H162.8c-5.9,0-10.7,4.8-10.7,10.7v256.5C152.1,389.3,156.9,394.1,162.8,394.1z M237.6,319.3H259c20.6,0,37.4,16.8,37.4,37.4c0,20.6-16.8,37.4-37.4,37.4h-10.7v21.4c0,5.9-4.8,10.7-10.7,10.7c-5.9,0-10.7-4.8-10.7-10.7v-32.1V330C226.9,324.1,231.7,319.3,237.6,319.3z M259,372.8c8.9,0,16-7.1,16-16c0-8.9-7.1-16-16-16h-10.7v32.1H259z M323.1,319.3h21.4c17.7,0,32.1,14.4,32.1,32.1v42.7c0,17.7-14.4,32.1-32.1,32.1h-21.4c-5.9,0-10.7-4.8-10.7-10.7V330C312.4,324.1,317.2,319.3,323.1,319.3z M344.5,404.8c5.9,0,10.7-4.8,10.7-10.7v-42.7c0-5.9-4.8-10.7-10.7-10.7h-10.7v64.1H344.5z M397.9,330c0-5.9,4.8-10.7,10.7-10.7h32.1c5.9,0,10.7,4.8,10.7,10.7s-4.8,10.7-10.7,10.7h-21.4v21.4h21.4c5.9,0,10.7,4.8,10.7,10.7c0,5.9-4.8,10.7-10.7,10.7h-21.4v32.1c0,5.9-4.8,10.7-10.7,10.7s-10.7-4.8-10.7-10.7v-42.7V330z"/></svg>`;
    case 'doc': case 'docx':
      return `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" style="enable-background:new 0 0 496 512;" xml:space="preserve"><rect y="0" style="fill:%23FFFFFF;" width="496" height="512"/><path d="M152.1,383.9V128.1c0-5.9,4.8-10.7,10.7-10.7h106.6v53.3c0,11.8,9.5,21.3,21.3,21.3h53.3v191.8c0,5.9-4.8,10.7-10.7,10.7H162.8C156.9,394.5,152.1,389.7,152.1,383.9z M162.8,85.5c-23.5,0-42.6,19.1-42.6,42.6v255.8c0,23.5,19.1,42.6,42.6,42.6h170.5c23.5,0,42.6-19.1,42.6-42.6V188.4c0-11.3-4.5-22.2-12.5-30.2L303.1,98c-8-8-18.8-12.5-30.1-12.5H162.8z M199.4,246.1c-2.5-8.5-11.5-13.3-19.9-10.7s-13.3,11.5-10.7,19.9l32,106.6c2,6.8,8.3,11.4,15.3,11.4s13.3-4.7,15.3-11.4l16.7-55.5l16.7,55.5c2,6.8,8.3,11.4,15.3,11.4s13.3-4.7,15.3-11.4l32-106.6c2.5-8.5-2.3-17.4-10.7-19.9c-8.5-2.5-17.4,2.3-19.9,10.7L280,301.6l-16.7-55.5c-2-6.8-8.3-11.4-15.3-11.4s-13.3,4.7-15.3,11.4L216,301.6L199.4,246.1z"/></svg>`;
      case 'xls': case 'xlsx':
      return `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" style="enable-background:new 0 0 496 512;" xml:space="preserve"><rect y="0" style="fill:%23FFFFFF;" width="496" height="512"/><path d="M152.1,383.9V128.1c0-5.9,4.8-10.7,10.7-10.7h106.6v53.3c0,11.8,9.5,21.3,21.3,21.3h53.3v191.8c0,5.9-4.8,10.7-10.7,10.7H162.8C156.9,394.5,152.1,389.7,152.1,383.9z M162.8,85.5c-23.5,0-42.6,19.1-42.6,42.6v255.8c0,23.5,19.1,42.6,42.6,42.6h170.5c23.5,0,42.6-19.1,42.6-42.6V188.4c0-11.3-4.5-22.2-12.5-30.2L303.1,98c-8-8-18.8-12.5-30.1-12.5H162.8z M223.3,240.9c-5.4-7-15.5-8.2-22.4-2.8s-8.2,15.5-2.8,22.4l29.7,38.1l-29.6,38.2c-5.4,7-4.2,17,2.8,22.4s17,4.2,22.4-2.8l24.6-31.8l24.7,31.7c5.4,7,15.5,8.2,22.4,2.8c7-5.4,8.2-15.5,2.8-22.4l-29.7-38.1l29.6-38.2c5.4-7,4.2-17-2.8-22.4c-7-5.5-17-4.2-22.4,2.8L248,272.6L223.3,240.9L223.3,240.9z"/></svg>`;
    case 'mp3': case 'wav':
      return `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" style="enable-background:new 0 0 496 512;" xml:space="preserve"><rect y="0" style="fill:%23FFFFFF;" width="496" height="512"/><path d="M162.8,394.5h170.5c5.9,0,10.7-4.8,10.7-10.7V192.1h-53.3c-11.8,0-21.3-9.5-21.3-21.3v-53.3H162.8c-5.9,0-10.7,4.8-10.7,10.7v255.8C152.1,389.7,156.9,394.5,162.8,394.5z M120.1,128.1c0-23.5,19.1-42.6,42.6-42.6H273c11.3,0,22.2,4.5,30.2,12.5l60.3,60.3c8,8,12.5,18.8,12.5,30.2v195.5c0,23.5-19.1,42.6-42.6,42.6H162.8c-23.5,0-42.6-19.1-42.6-42.6V128.1z M248,266.7v85.2c0,4.3-2.6,8.2-6.6,9.9s-8.6,0.7-11.6-2.3l-23.5-23.5h-11.6c-5.9,0-10.7-4.8-10.7-10.7v-32c0-5.9,4.8-10.7,10.7-10.7h11.6l23.5-23.5c3.1-3.1,7.7-3.9,11.6-2.3C245.3,258.4,248,262.3,248,266.7L248,266.7z M305.1,264c7.7,13.3,12.1,28.8,12.1,45.3s-4.4,32-12.1,45.3c-4.4,7.7-14.2,10.3-21.8,5.9c-7.7-4.4-10.3-14.2-5.9-21.8c5-8.6,7.9-18.6,7.9-29.3s-2.9-20.7-7.9-29.3c-4.4-7.7-1.8-17.4,5.9-21.8S300.7,256.3,305.1,264z"/></svg>`;
    case 'mp4': case 'avi':
      return `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" style="enable-background:new 0 0 496 512;" xml:space="preserve"><rect y="0" style="fill:%23FFFFFF;" width="496" height="512"/><path d="M333.2,394.5c5.9,0,10.7-4.8,10.7-10.7V192.1h-53.3c-11.8,0-21.3-9.5-21.3-21.3v-53.3H162.8c-5.9,0-10.7,4.8-10.7,10.7v255.8c0,5.9,4.8,10.7,10.7,10.7H333.2z M120.1,128.1c0-23.5,19.1-42.6,42.6-42.6H273c11.3,0,22.2,4.5,30.2,12.5l60.3,60.3c8,8,12.5,18.8,12.5,30.2v195.5c0,23.5-19.1,42.6-42.6,42.6H162.8c-23.5,0-42.6-19.1-42.6-42.6V128.1z M173.4,277.3c0-11.8,9.5-21.3,21.3-21.3h63.9c11.8,0,21.3,9.5,21.3,21.3V288l29.9-19.9c1.3-0.9,2.9-1.4,4.5-1.4c4.5,0,8.2,3.7,8.2,8.2v68.9c0,4.5-3.7,8.2-8.2,8.2c-1.6,0-3.2-0.5-4.5-1.4L280,330.6v10.7c0,11.8-9.5,21.3-21.3,21.3h-63.9c-11.8,0-21.3-9.5-21.3-21.3V277.3z"/></svg>`;
    default:
      return `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" style="enable-background:new 0 0 496 512;" xml:space="preserve"><rect y="0" style="fill:%23FFFFFF;" width="496" height="512"/><path d="M333.2,394.5c5.9,0,10.7-4.8,10.7-10.7V192.1h-53.3c-11.8,0-21.3-9.5-21.3-21.3v-53.3H162.8c-5.9,0-10.7,4.8-10.7,10.7v255.8c0,5.9,4.8,10.7,10.7,10.7H333.2z M120.1,128.1c0-23.5,19.1-42.6,42.6-42.6H273c11.3,0,22.2,4.5,30.2,12.5l60.3,60.3c8,8,12.5,18.8,12.5,30.2v195.5c0,23.5-19.1,42.6-42.6,42.6H162.8c-23.5,0-42.6-19.1-42.6-42.6V128.1z"/></svg>`;
  }
}

Que l'on appellerais à ce moment là : attr(img, "src", getThumbnail(img_src_value));

Pour ce type de résultat :