share.js 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. const html = require('choo/html');
  2. export default function uploadComplete(state, emit) {
  3. const file = state.storage.files[state.storage.files.length - 1];
  4. function onclick(e) {
  5. e.preventDefault();
  6. input.select();
  7. document.execCommand('copy');
  8. input.selectionEnd = input.selectionStart;
  9. copyText.textContent = 'Copied!';
  10. setTimeout(function() {
  11. copyText.textContent = 'Copy link';
  12. }, 2000);
  13. }
  14. function uploadFile(event) {
  15. event.preventDefault();
  16. const target = event.target;
  17. const file = target.files[0];
  18. if (file.size === 0) {
  19. return;
  20. }
  21. emit('pushState', '/upload');
  22. emit('addFiles', { files: [file] });
  23. emit('upload', {});
  24. }
  25. const input = html`
  26. <input id="url" value="${file.url}" readonly="true" />
  27. `;
  28. const copyText = html`
  29. <span>Copy link</span>
  30. `;
  31. return html`<body>
  32. <div id="white">
  33. <div class="card">
  34. <div>The card contents will be here.</div>
  35. <div>Expires after: <span class="expires-after">exp</span></div>
  36. ${input}
  37. <div id="copy-link" onclick=${onclick}>
  38. <img id="copy-image" src=${state.getAsset('copy-link.png')} />
  39. ${copyText}
  40. </div>
  41. <label id="label" for="input">
  42. <img src=${state.getAsset('cloud-upload.png')} />
  43. </label>
  44. <input id="input" name="input" type="file" onchange=${uploadFile} />
  45. </div>
  46. </body>`;
  47. }