finished email form

index.html

@@ -38,22 +38,22 @@
 
 
  <div class="input-container">
- <input type="text" disabled>
- <img src="./copy-icon.svg" alt="copy to clipboard icon">
+ <input type="text" id="fileURL" readonly>
+ <img src="./copy-icon.svg" id="copyURLBtn" alt="copy to clipboard icon">
  </div>
 
 
  <p class="email-info">Or Send via Email</p>
  <div class="email-container">
- <form>
+ <form id="emailForm">
  <div class="filed">
  <label for="fromEmail">Your email</label>
- <input type="email" autocomplete="email" required name="from email" id="fromEmail">
+ <input type="email" autocomplete="email" required name="from-email" id="fromEmail">
  </div>
 
  <div class="filed">
  <label for="toEmail">Receiver's email</label>
- <input type="email" required autocomplete="receiver" name="to email" id="toEmail">
+ <input type="email" required autocomplete="receiver" name="to-email" id="toEmail">
  </div>
  <div class="send-btn-container">
  <button type="submit">Send</button>

index.js

@@ -8,6 +8,14 @@ const progressContainer = document.querySelector(".progress-container");
 const progressBar = document.querySelector(".progress-bar");
 const status = document.querySelector(".status");
 
+const sharingContainer = document.querySelector(".sharing-container");
+const copyURLBtn = document.querySelector("#copyURLBtn");
+const fileURL = document.querySelector("#fileURL");
+const emailForm = document.querySelector("#emailForm");
+
+const uploadURL = "http:https://localhost:3000/api/files";
+const emailURL = "http:https://localhost:3000/api/files/send";
+
 browseBtn.addEventListener("click", () => {
  fileInput.click();
 });
@@ -21,6 +29,7 @@ dropZone.addEventListener("drop", (e) => {
  }
  dropZone.classList.remove("dragged");
 });
+
 dropZone.addEventListener("dragover", (e) => {
  e.preventDefault();
  dropZone.classList.add("dragged");
@@ -39,6 +48,45 @@ fileInput.addEventListener("change", () => {
  uploadFile();
 });
 
+// sharing container listenrs
+copyURLBtn.addEventListener("click", () => {
+ fileURL.select();
+ document.execCommand("copy");
+});
+
+fileURL.addEventListener("click", () => {
+ fileURL.select();
+});
+
+emailForm.addEventListener("submit", (e) => {
+ e.preventDefault(); // stop submission
+
+ // disable the button
+ emailForm[2].setAttribute("disabled", "true");
+
+ const url = fileURL.value;
+
+ const formData = {
+ uuid: url.split("/").splice(-1, 1)[0],
+ emailTo: emailForm.elements["to-email"].value,
+ emailFrom: emailForm.elements["from-email"].value,
+ };
+ console.log(formData);
+ fetch(emailURL, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(formData),
+ })
+ .then((res) => res.json())
+ .then((data) => {
+ if (data.success) {
+ sharingContainer.style.display = "none"
+ }
+ });
+});
+
 const uploadFile = () => {
  console.log("file added uploading");
 
@@ -54,10 +102,10 @@ const uploadFile = () => {
 
  // listen for upload progress
  xhr.upload.onprogress = function (event) {
+ // find the percentage of uploaded
  let percent = Math.round((100 * event.loaded) / event.total);
  progressPercent.innerText = percent;
- const scaleX = `scaleX(${(percent / 100).toFixed(2)})`;
- console.log((percent / 100).toFixed(2));
+ const scaleX = `scaleX(${percent / 100})`;
  bgProgress.style.transform = scaleX;
  progressBar.style.transform = scaleX;
  };
@@ -74,13 +122,18 @@ const uploadFile = () => {
  }
  };
 
- xhr.open("POST", "http:https://localhost:3000/api/files");
+ xhr.open("POST", uploadURL);
  xhr.send(formData);
 };
 
 const onFileUploadSuccess = (res) => {
  fileInput.value = ""; // reset the input
  status.innerText = "Uploaded";
- const { file } = JSON.parse(res);
- console.log(file);
+
+ progressContainer.style.display = "none";
+
+ const { file: url } = JSON.parse(res);
+ console.log(url);
+ sharingContainer.style.display = "block";
+ fileURL.value = url;
 };