Feature/custom filename

README.md

@@ -43,6 +43,11 @@ document.body.appendChild(pond.element);
  The functionality will become active after uploading a file.
 
 ## Configuration
+To customize the file name (to the right of the download icon) you can add a metadata to the filepond file object. Example:
+```js
+file.setMetadata('filename', 'test.png')
+```
+
 
 The label of the download icon can be adjusted as follows:
 ```js

dist/filepond-plugin-get-file.esm.js

@@ -16,9 +16,10 @@ const registerDownloadComponent = (
   allowDownloadByUrl
 ) => {
   const info = el.querySelector('.filepond--file-info-main'),
-    downloadIcon = getDownloadIcon(labelButtonDownload);
+    downloadIcon = getDownloadIcon(labelButtonDownload),
+    filenameElement = getFilenameElement(item);
 
-  info.prepend(downloadIcon);
+  info.replaceChildren(downloadIcon, filenameElement);
   downloadIcon.addEventListener('click', () =>
     downloadFile(item, allowDownloadByUrl)
   );
@@ -34,6 +35,22 @@ const getDownloadIcon = (labelButtonDownload) => {
   return icon;
 };
 
+/**
+ * Generates the filename element
+ */
+
+const getFilenameElement = (item) => {
+  const element = document.createElement('span');
+  const filename = item.getMetadata('filename')
+    ? item.getMetadata('filename')
+    : item.filename;
+  element.className = 'filepond--file-name';
+
+  element.title = filename;
+  element.innerHTML = filename;
+  return element;
+};
+
 /**
  * Triggers the actual download of the uploaded file
  */

dist/filepond-plugin-get-file.js

@@ -27,8 +27,9 @@
     allowDownloadByUrl
   ) => {
     const info = el.querySelector('.filepond--file-info-main'),
-      downloadIcon = getDownloadIcon(labelButtonDownload);
-    info.prepend(downloadIcon);
+      downloadIcon = getDownloadIcon(labelButtonDownload),
+      filenameElement = getFilenameElement(item);
+    info.replaceChildren(downloadIcon, filenameElement);
     downloadIcon.addEventListener('click', () =>
       downloadFile(item, allowDownloadByUrl)
     );
@@ -43,6 +44,20 @@
     icon.title = labelButtonDownload;
     return icon;
   };
+  /**
+   * Generates the filename element
+   */
+
+  const getFilenameElement = (item) => {
+    const element = document.createElement('span');
+    const filename = item.getMetadata('filename')
+      ? item.getMetadata('filename')
+      : item.filename;
+    element.className = 'filepond--file-name';
+    element.title = filename;
+    element.innerHTML = filename;
+    return element;
+  };
   /**
    * Triggers the actual download of the uploaded file
    */

src/js/components/download.js

@@ -3,9 +3,10 @@
  */
 export const registerDownloadComponent = (item, el, labelButtonDownload, allowDownloadByUrl) => {
     const info = el.querySelector('.filepond--file-info-main'),
-          downloadIcon = getDownloadIcon(labelButtonDownload);
+          downloadIcon = getDownloadIcon(labelButtonDownload),
+          filenameElement = getFilenameElement(item);
 
-    info.prepend(downloadIcon);
+    info.replaceChildren(downloadIcon, filenameElement);
     downloadIcon.addEventListener("click", () => downloadFile(item, allowDownloadByUrl));
 }
 
@@ -19,6 +20,20 @@ export const getDownloadIcon = (labelButtonDownload) => {
     return icon;
 }
 
+/**
+ * Generates the filename element
+ */
+
+const getFilenameElement = (item) => {
+  const element = document.createElement('span');
+  const filename = item.getMetadata('filename') ? item.getMetadata('filename') : item.filename
+  element.className = 'filepond--file-name';
+
+  element.title = filename;
+  element.innerHTML = filename;
+  return element;
+};
+
 /**
  * Triggers the actual download of the uploaded file
  */