diff --git a/frontend/src/upload.js b/frontend/src/upload.js index e86ea819..b27e1a0a 100644 --- a/frontend/src/upload.js +++ b/frontend/src/upload.js @@ -3,18 +3,22 @@ const FileSender = require('./fileSender'); let onChange = event => { const file = event.target.files[0]; - let li = document.createElement('li'); - let name = document.createElement('p'); - name.innerText = file.name; - li.appendChild(name); + let fileList = document.getElementById('uploaded-files'); + let row = document.createElement('tr'); + let name = document.createElement('td'); + let link = document.createElement('td'); + let expiry = document.createElement('td'); - let link = document.createElement('a'); - li.appendChild(link); + let cellText = document.createTextNode(file.name); + + name.appendChild(cellText); let progress = document.createElement('p'); - li.appendChild(progress); - document.getElementById('uploaded_files').appendChild(li); + row.appendChild(name); + row.appendChild(link); + row.appendChild(expiry); + fileList.appendChild(row); const fileSender = new FileSender(file); fileSender.on('progress', percentComplete => { @@ -23,21 +27,23 @@ let onChange = event => { fileSender.upload().then(info => { const url = `${window.location .origin}/download/${info.fileId}/#${info.secretKey}`; + link.innerHTML = url; localStorage.setItem(info.fileId, info.deleteToken); - link.innerText = url; - link.setAttribute('href', url); + let del = document.createElement('td'); let btn = document.createElement('button'); - btn.innerText = 'Delete from server'; + btn.innerHTML = 'x'; + btn.classList.add('delete-btn'); btn.addEventListener('click', () => { FileSender.delete( info.fileId, localStorage.getItem(info.fileId) ).then(() => { - document.getElementById('uploaded_files').removeChild(li); + fileList.removeChild(row); localStorage.removeItem(info.fileId); }); }); - li.appendChild(btn); + del.appendChild(btn); + row.appendChild(del); }); }; diff --git a/public/index.html b/public/index.html index e258c9f1..ace23482 100644 --- a/public/index.html +++ b/public/index.html @@ -3,16 +3,46 @@ Firefox Fileshare - + + -
- -
+
+
+
+ Share your files quickly, privately and securely. +
+
+
+
+ DRAG & DROP +
+
+
+ your file/folder here or +
+
+
+ + +
+
+
+
+
- +
+ + + + + + + +
FileCopy URLExpires inDelete
+
+
- + diff --git a/public/main.css b/public/main.css new file mode 100644 index 00000000..afffea01 --- /dev/null +++ b/public/main.css @@ -0,0 +1,112 @@ +/*** index.html ***/ + +/** page-one **/ +body { + background: url('resources/background.png'); + font-family: 'Fira Sans'; + font-weight: 300; + font-style: normal; + background-size: cover; +} + +.main-window { + border: 1px solid; + width: 606px; + height: 447px; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + background-color: white; + border-radius: 5px; +} + +.title { + font-size: 14px; + width: 50%; + margin: 50px auto ; +} + +.upload-window { + border: 1px dashed; + width: 50%; + margin: 0 auto; + width: 470px; + height: 250px; + border-radius: 5px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +#browse { + float: right; + color: blue; +} + +#browse-text { + float: left; + width: 128px; +} + +#upload-img { + padding-right: 20px; +} + +.upload-window>div:nth-child(2) { + font-size: 26px; +} + +.upload { + font-size: 12px; + width: auto; + overflow: hidden; +} + +.file-upload { + cursor: pointer; +} + +input[type="file"] { + display: none; +} + +form { + width: 45px; + float: right; +} + +/** file-list **/ +th { + font-size: 10px; + color: #737373; + font-weight: normal; + text-align: left; +} + +td { + font-size: 12px; + vertical-align: top; +} + +#uploaded-files { + width: 472px; + margin: 10px auto ; + table-layout: fixed; + overflow-y: scroll; +} + +#file-list { + overflow-y: scroll; + height: 90px; +} + +.delete-btn { + padding: 0; + border: none; + background: none; + cursor: pointer; +} diff --git a/public/resources/background.png b/public/resources/background.png new file mode 100644 index 00000000..634b72a2 Binary files /dev/null and b/public/resources/background.png differ diff --git a/public/resources/upload.svg b/public/resources/upload.svg new file mode 100644 index 00000000..d731adba --- /dev/null +++ b/public/resources/upload.svg @@ -0,0 +1,93 @@ + + + + Group 14 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +