Show uploads preview, add clipboard & download links

app/assets/javascripts/admin.js

@@ -15,3 +15,4 @@
 //= require activestorage
 //= require turbolinks
 //= require tasks
+//= require copy_to_clipboard

app/assets/javascripts/copy_to_clipboard.js

@@ -0,0 +1,32 @@
+function copyToClipboard(text){
+    var textArea = document.createElement("textarea");
+
+    textArea.style.position = 'fixed';
+    textArea.style.top = 0;
+    textArea.style.left = 0;
+    textArea.style.width = '2em';
+    textArea.style.height = '2em';
+    textArea.style.padding = 0;
+    textArea.style.border = 'none';
+    textArea.style.outline = 'none';
+    textArea.style.boxShadow = 'none';
+    textArea.style.background = 'transparent';
+    textArea.value = text;
+
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+
+    try {
+        var successful = document.execCommand('copy');
+        if (successful) {
+            // no-op, would be nice to how some non-intrusive confirmation
+        } else {
+            alert('Copy to clipboard failed');
+        }
+    } catch (err) {
+        alert('Copy to clipboard failed');
+    }
+
+    document.body.removeChild(textArea);
+}

app/views/admin/uploads/index.html.erb

@@ -15,17 +15,31 @@
   <thead class="govuk-table__head">
     <tr class="govuk-table__row">
       <th class="govuk-table__header" scope="col">Filename</th>
-      <th class="govuk-table__header" scope="col">Url</th>
+      <th class="govuk-table__header" scope="col"></th>
+      <th class="govuk-table__header" scope="col"></th>
+      <th class="govuk-table__header" scope="col"></th>
       <th class="govuk-table__header" scope="col"></th>
     </tr>
   </thead>
   <tbody class="govuk-table__body">
     <% @files.each do |file| %>
       <tr class="govuk-table__row">
         <td class="govuk-table__cell"><%= file.key %></td>
-        <td class="govuk-table__cell"><%= link_to 'Link to file', UploadsService.get_url(file) %></td>
+        <td class="govuk-table__cell">
+          <% if file.content_type.include?('video') %>
+            <%= video_tag UploadsService.get_url(file), size: "320x200", :controls => true %>
+          <% elsif file.content_type.include?('image') %>
+            <%= link_to (image_tag UploadsService.get_url(file), size: "320x200"), UploadsService.get_url(file) %>
+          <% end %>
+        </td>
+        <td class="govuk-table__cell"><%= link_to 'Copy link', UploadsService.get_url(file), class: 'copy-to-clipboard', onclick: "copyToClipboard('#{UploadsService.get_url(file)}');return false;" %></td>
+        <td class="govuk-table__cell"><%= link_to 'Download️', UploadsService.get_url(file), download: file.filename %></td>
         <td class="govuk-table__cell"><%= link_to 'Delete', admin_upload_path(file.key), method: :delete, data: { confirm: 'Are you sure you want to delete file: ' + file.key + '?' } %></td>
       </tr>
     <% end %>
   </tbody>
 </table>
+
+<script>
+
+</script>