-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #8 from MAlshaik/main
Added the ability to upload a video and view the video on the webpage
- Loading branch information
Showing
5 changed files
with
246 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| <?php | ||
| $file_name = $_FILES['file']['name']; //getting file name | ||
| $tmp_name = $_FILES['file']['tmp_name']; //getting temp_name of file | ||
| $file_up_name = time().$file_name; //making file name dynamic by adding time before file name | ||
| move_uploaded_file($tmp_name, "uploads/".$file_up_name); //moving file to the specified folder with dynamic name | ||
| ?> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| const form = document.querySelector("form"), | ||
| fileInput = document.querySelector(".file-input"), | ||
| progressArea = document.querySelector(".progress-area"), | ||
| uploadedArea = document.querySelector(".uploaded-area"); | ||
|
|
||
|
|
||
| // form click event | ||
| form.addEventListener("click", () =>{ | ||
| fileInput.click(); | ||
| }); | ||
|
|
||
| fileInput.onchange = ({target})=>{ | ||
| let file = target.files[0]; //getting file [0] this means if user has selected multiple files then get first one only | ||
| if(file){ | ||
| console.log(file); | ||
| let fileName = file.name; //getting file name | ||
| if(fileName.length >= 12){ //if file name length is greater than 12 then split it and add ... | ||
| let splitName = fileName.split('.'); | ||
| fileName = splitName[0].substring(0, 13) + "... ." + splitName[1]; | ||
| } | ||
| uploadFile(fileName); | ||
|
|
||
| var reader = new FileReader(); | ||
|
|
||
| reader.onload = function(e){ | ||
| var src = e.target.result; | ||
| var video = document.getElementById("video"); | ||
| var source = document.getElementById("source") | ||
|
|
||
| source.setAttribute("src", src); | ||
| video.load(); | ||
| } | ||
|
|
||
| reader.readAsDataURL(file) | ||
| } | ||
|
|
||
| } | ||
|
|
||
| // file upload function | ||
| function uploadFile(name){ | ||
| let xhr = new XMLHttpRequest(); //creating new xhr object (AJAX) | ||
| xhr.open("POST", "php/upload.php"); //sending post request to the specified URL | ||
| xhr.upload.addEventListener("progress", ({loaded, total}) =>{ //file uploading progress event | ||
| let fileLoaded = Math.floor((loaded / total) * 100); //getting percentage of loaded file size | ||
| let fileTotal = Math.floor(total / 1000); //gettting total file size in KB from bytes | ||
| let fileSize; | ||
| // if file size is less than 1024 then add only KB else convert this KB into MB | ||
| (fileTotal < 1024) ? fileSize = fileTotal + " KB" : fileSize = (loaded / (1024*1024)).toFixed(2) + " MB"; | ||
| let progressHTML = `<li class="row"> | ||
| <i class="fas fa-file-alt"></i> | ||
| <div class="content"> | ||
| <div class="details"> | ||
| <span class="name">${name} • Uploading</span> | ||
| <span class="percent">${fileLoaded}%</span> | ||
| </div> | ||
| <div class="progress-bar"> | ||
| <div class="progress" style="width: ${fileLoaded}%"></div> | ||
| </div> | ||
| </div> | ||
| </li>`; | ||
| uploadedArea.innerHTML = ""; | ||
| uploadedArea.classList.add("onprogress"); | ||
| progressArea.innerHTML = progressHTML; | ||
| if(loaded == total){ | ||
| progressArea.innerHTML = ""; | ||
| let uploadedHTML = `<li class="row"> | ||
| <div class="content upload"> | ||
| <i class="fas fa-file-alt"></i> | ||
| <div class="details"> | ||
| <span class="name">${name} • Uploaded</span> | ||
| <span class="size">${fileSize}</span> | ||
| </div> | ||
| </div> | ||
| <i class="fas fa-check"></i> | ||
| </li>`; | ||
| uploadedArea.classList.remove("onprogress"); | ||
| uploadedArea.innerHTML = uploadedHTML; | ||
| document.getElementById("wrapper").style.visibility = "hidden"; | ||
|
|
||
| } | ||
| }); | ||
| let data = new FormData(form); //FormData is an object to easily send form data | ||
| xhr.send(data); //sending form data | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters