Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 5, 2022 04:11 am GMT

How I Created a File Sharing Website using Simple JavaScript

Any Share is a simple, lightweight, and fast file sharing service. It is written in Javascript and uses the Firebase platform.

Website I created for secure file sharing with friends and family.

You can Create your own website with this code.

Features

  • Upload files
  • Download files
  • Delete files
  • Share files
  • View files
  • Secure file sharing

Working

  • Any Share uses Firebase to store files. It uses Firebase Storage to store files and Firebase Realtime Database to store metadata of files.
  • When a file is uploaded, it is stored in Firebase Storage and a unique ID is generated for the file. This ID is used to access the file.
  • The metadata of the file is stored in Firebase Realtime Database. This metadata includes the url to the file and the unique ID of the file.
  • When a file is shared, the unique ID of the file is shared. This ID is used to access the file.
  • Receiver of the file can access the file using the unique ID of the file.
  • When the file is received by the receiver using the unique ID, the file is downloaded from Firebase Storage and displayed to the receiver.
  • Once the file is received by the receiver, the file is automatically deleted from Firebase Storage.
  • This way the file is shared securely.

How to use

  • Visit Any Share.
  • Upload a file.
  • Wait for the file to be uploaded.
  • Share the unique ID of the file with the receiver.
  • Receiver can access the file using the unique ID of the file.
  • Once the file is received by the receiver, the file is automatically deleted from Firebase Storage.

Code Review

  • Code for Firebase storage uploading
function uploadFile() {    if(document.getElementById("file").value != ""){    var uploadtext = document.getElementById("upload").innerHTML;  document.getElementById("upload").innerHTML = "Uploading...";  var file = document.getElementById("file").files[0];  var storageRef = firebase.storage().ref("images/" + file.name);  var uploadTask = storageRef.put(file);  uploadTask.on('state_changed', function (snapshot) {    var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;    console.log('Upload is ' + progress + '% done');  }, function (error) {    console.log(error.message);    document.getElementById("upload").innerHTML = "Upload Failed";  }, function () {    uploadTask.snapshot.ref.getDownloadURL().then(function (downloadURL) {      console.log('File available at', downloadURL);      saveMessage(downloadURL);    });  });}else{    var uploadtext = document.getElementById("upload").innerHTML;    document.getElementById("upload").innerHTML = "Please select a file";    // After 2 sec make it empty    setTimeout(function(){        document.getElementById("upload").innerHTML = uploadtext;    }    , 2000);}}
  • Code for Firebase storage downloading
function showfile(){var uniqueId= document.getElementById("unique").value;    if(uniqueId==""){        alert("Unique Id is empty
 Please enter a Unique Id");        return;    }    var ref = firebase.database().ref("image");    var flag = 0;    ref.on("value", function(snapshot) {        snapshot.forEach(function(childSnapshot) {        var childData = childSnapshot.val();        if (childData.number == uniqueId){        flag = 1;        window.open(childData.url, "_blank");        // AFter this delete the image from the database        ref.child(childSnapshot.key).remove();        // Remove file from storage        //Run this with 5sec delay        setTimeout(function(){        var storageRef = firebase.storage().refFromURL(childData.url);        storageRef.delete().then(function() {             ref.child(childSnapshot.key).remove();        // File deleted successfully        }).catch(function(error) {        });        }, 15000);        }        });    }    );}
  • Generated unique ID
function createUniquenumber(){    // Create a unique 5 digit number for each image which is not in the database field number yet    var number = Math.floor(10000 + Math.random() * 90000);    var ref = firebase.database().ref("image");    ref.on("value", function(snapshot) {        snapshot.forEach(function(childSnapshot) {        var childData = childSnapshot.val();        if (childData.number == number){            createUniquenumber();        }        });    });    return number;}
  • Code for saving metadata of file in Firebase Realtime Database
function saveMessage(downloadURL) {    var newMessageRef = messagesRef.push();    var unique= createUniquenumber();    // Hidding recive file div    var x = document.getElementById("downloadiv");    x.style.display = "none";    var showUnique = document.getElementById("ShowUniqueID");    var shU=document.getElementById("showunique");    shU.value=unique;    showUnique.style.display = "block";    newMessageRef.set({        url: downloadURL,        number: unique    });    document.getElementById("upload").innerHTML = "Upload Successful";    //Make file input empty    document.getElementById("file").value = "";    }

Conclusion

  • In this tutorial I have explained how I created my own File Sharing Web App.

References


Original Link: https://dev.to/varshithvhegde/how-i-created-a-file-sharing-website-using-simple-javascript-355g

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To