간단한 JavaScript를 사용하여 파일 공유 웹 사이트를 만든 방법

Any Share는 간단하고 가볍고 빠른 파일 공유 서비스입니다. Javascript로 작성되었으며 Firebase 플랫폼을 사용합니다.
친구 및 가족과 안전하게 파일을 공유하기 위해 만든 웹사이트입니다.
이 코드로 나만의 웹사이트를 만들 수 있습니다.

특징


  • 파일 업로드
  • 파일 다운로드
  • 파일 삭제
  • 파일 공유
  • 파일 보기
  • 보안 파일 공유

  • 일하고 있는


  • 모든 공유는 Firebase를 사용하여 파일을 저장합니다. Firebase 저장소를 사용하여 파일을 저장하고 Firebase 실시간 데이터베이스를 사용하여 파일의 메타데이터를 저장합니다.
  • 파일이 업로드되면 Firebase 저장소에 저장되고 파일에 대한 고유 ID가 생성됩니다. 이 ID는 파일에 액세스하는 데 사용됩니다.
  • 파일의 메타데이터가 Firebase 실시간 데이터베이스에 저장됩니다. 이 메타데이터에는 파일에 대한 URL과 파일의 고유 ID가 포함됩니다.
  • 파일을 공유하면 파일의 고유 ID가 공유됩니다. 이 ID는 파일에 액세스하는 데 사용됩니다.
  • 파일 수신자는 파일의 고유 ID를 사용하여 파일에 액세스할 수 있습니다.
  • 수신자가 고유 ID를 사용하여 파일을 수신하면 파일이 Firebase 저장소에서 다운로드되어 수신자에게 표시됩니다.
  • 수신자가 파일을 수신하면 파일이 Firebase 저장소에서 자동으로 삭제됩니다.
  • 이렇게 하면 파일이 안전하게 공유됩니다.

  • 사용하는 방법




  • 방문 Any Share .
  • 파일을 업로드합니다.
  • 파일이 업로드될 때까지 기다리십시오.
  • 파일의 고유 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";
        // After 2 sec make it empty
        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");
            // 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);
    
    
            }
            });
        }
        );
    }
    


  • 생성된 고유 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;
    
    
    }
    


  • Firebase 실시간 데이터베이스에 파일의 메타데이터를 저장하는 코드

  • 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 = "";
    
        }
    


    결론


  • 이 튜토리얼에서는 나만의 File Sharing Web App을 만드는 방법을 설명했습니다.

  • 참조


  • Github Code
  • Firebase Storage
  • Firebase Documentation
  • 좋은 웹페이지 즐겨찾기