隻使用簡單的 JavaScript 建立檔案共享型網站

• 文作者：​​varshithvhegde​​

特色

• 上傳檔案
• 下載下傳檔案
• 删除檔案
• 分享檔案
• 檢視檔案
• 安全檔案共享

說明

• Any Share 使用 Firebase 來存儲檔案，使用 Firebase 實時資料庫來存儲檔案的中繼資料。
• 上傳檔案時，它會存儲在 Firebase 中，并為該檔案生成一個唯一 ID，此 ID 用于通路檔案。
• 該檔案的中繼資料存儲在 Firebase 實時資料庫中。此中繼資料包括檔案的 url 和檔案的唯一 ID。
• 共享檔案時，共享檔案的唯一 ID。此 ID 用于通路檔案。
• 檔案的接收者可以使用檔案的唯一 ID 通路檔案。
• 當接收方使用唯一 ID 接收到檔案時，檔案會從 Firebase 存儲中下載下傳并顯示給接收方。
• 接收方收到檔案後，會自動從 Firebase 存儲中删除該檔案。
• 這樣檔案就可以安全地共享了。

如何使用

• 通路 ​​anyshare​​。
• 上傳一個檔案。
• 等待檔案上傳。
• 與接收者共享檔案的唯一 ID。
• 接收方可以使用檔案的唯一 ID 通路檔案。
• 接收方收到檔案後，會自動從 Firebase 存儲中删除該檔案。

代碼審查

• Firebase 存儲上傳代碼

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";
    // 2秒後清空
    setTimeout(function(){
        document.getElementById("upload").innerHTML = uploadtext;
    }
    , 2000);
}
}      

• Firebase 存儲下載下傳代碼

function showfile() {
  var uniqueId = document.getElementById("unique").value;
  if (uniqueId == "") {
    alert("Unique Id is empty\n 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");
        // 然後從資料庫中删除圖像
        ref.child(childSnapshot.key).remove();
        // 從存儲中删除檔案
        // 延遲5秒運作
        setTimeout(function() {
          var storageRef = firebase.storage().refFromURL(childData.url);
          storageRef.delete().then(function() {
            ref.child(childSnapshot.key).remove();
            // 檔案删除成功
          }).catch(function(error) {});
        }, 15000);
      }
    });
  });
}      

• 生成的唯一 ID

function createUniquenumber(){
    // 為尚未在資料庫字段編号中的每個圖像建立一個唯一的5位數
    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;
}      

• 在 Firebase 實時資料庫中儲存檔案中繼資料的代碼

function saveMessage(downloadURL) {
    var newMessageRef = messagesRef.push();
    var unique= createUniquenumber();
    // 隐藏接收檔案 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";
    // 使檔案輸入為空
    document.getElementById("file").value = "";

    }      

總結

• 在本教程中，我們解釋了如何建立一個檔案共享型的 Web 應用程式。

參考

• ​​Github 代碼​​
• ​​Firebase 存儲​​
• ​​Firebase 文檔​​