1) Верстаете кнопку
2) Верстаете красивенький popup
3) Вешаете событие на кнопку, чтобы он открывал данный popup
4) При открывании poup получать все файлы с сервера через ajax и выводить их в этот-же popup(Превью, текст)
4) Или при построении страницы заполнять popup
5) При клике на файл, через js скачивать его

WbICHA правильно написал:

Какая разница между парковкой и автомобилем

Ваш вопрос примерно так и выглядит, но давайте я вам объясню. Хотя я не очень и силен в объяснениях.

Promise - это данные, возвращаемые асинхронной функцией. Т.е данные от этой функции могут прийти когда угодно. Простой пример это fetch запрос на сервер:

fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
  .then(response => response.json())
  .then(() => alert('Я скажу привет 2'));

alert('Я скажу привет 1')

fetch - это функция возвращающая промис, then будет выполнен после получения ответа с сервера. И собственно код после fetch будет выполнен сразу. Но можно обойтись без then, и писать данный код как синхронный с async/await:

async function helloWorld () {
  let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
  let response = await fetch(url); // Останавливаем выполнение кода пока promise не будет выполнен

  let commits = await response.json();

  alert(commits[0].author.login);
}

При встречи awat мы останавливаем выполнение кода, и ждем возврата от promise, после код продолжает выполняться.