Share template wap upload file lên IPFS | Diễn đàn hỗ trợ tạo lập vSites.net

Hướng dẫn:
1. Template sử dụng code của một thành viên tên @Dai bên Dorew, nên tớ sẽ trích dẫn những đóng góp của thành viên bên đó cũng như nguyên văn tác giả.
2. Code có thể upload lên tới hơn 2GB (cụ thể là 31GB), nhưng khi upload đến khoảng 90MB thì bắt đầu có dấu hiệu đơ, nên đã giới hạn xuống 100MB với điều kiện check. Có thể sửa lại xuống 5MB tại file index.twig:

{% set maxSizeAllow = 1024*1024*100 %}

3. Vì ipfs là công khai, nên file trước khi được upload lên server thì đã được mã hóa trước. Khi muốn tải về, file sẽ được đọc, giải mã, và tải xuống.
4. Với danh sách tập tin:
+ Lưu danh sách vào Shoutbox được chọn là Default
+ Chọn danh sách chat Default là cơ sở dữ liệu cho danh sách tập tin, lấy 10 chat trên mỗi trang sau đó split từ msg:

{% set per = '10' %}
{% set kho_ipfs = get_chat(per) %}

5. Code upload lên IPFS thông qua NFTStorage
+ Truy cập: https://nft.storage/
+ Đăng nhập với Email hoặc Github:

+ Tạo API key

+ Lấy API key "XXXX" đã tạo, sau đó sửa tại index.twig:

{% set nft_api = 'XXXX' %}

6. Truy cập Bảng điều khiển > Tạo lập > Tạo tập tin view-file.twig:

{% import 'functions.twig' as func %}
{% set filename,filesize,passphrase,filecid = api.r.get('name'),api.r.get('size'),api.r.get('passprase'),api.r.get('cid') %}
{% set file_ext = func.checkExtension(filename) %}
 
<div class="phdr">Xem trước tập tin</div>
<div class="menu">
  <center>
    <div style="margin: 5px;" id="dai"></div>
    <div style="padding: 15px; max-width: 500px; visibility: hidden;">
      <img id="ipreview" style="max-width: 100%;" width="400" src="" />
    </div>
    <p>
      <i class="fa fa-{{file_ext}}" aria-hidden="true"></i> {{filename}}<br/>
      <i class="fa fa-clock-o" aria-hidden="true"></i> {{date|date('H:i, d/m/Y')}}
    </p>
    <button style="margin: 5px; padding: 12px 25px; font-size: 16px;" onclick="previewImg('{{filename}}', '{{filecid}}', '{{passphrase}}')"><b><i class="fa fa-play-circle"></i> Preview</b></button>
    <button style="margin: 5px; padding: 12px 25px; font-size: 16px;" onclick="downloadURL('{{filename}}', '{{filecid}}', '{{passphrase}}')"><b><i class="fa fa-download"></i> Download</b></button>
    <br />
  </center>
</div>
 
<script>
  function readfile(n) {
    return new Promise((e, t) => {
      var o = new FileReader;
      o.onload = () => {
        e(o.result)
      }, o.readAsArrayBuffer(n)
    })
  }
 
  async function decryptfile(e, t, o) {
    var n = await readfile(e).catch(function(e) {
        console.error(e)
      }),
      r = new Uint8Array(n),
      e = new TextEncoder("utf-8").encode(o),
      n = r.slice(8, 16),
      e = await window.crypto.subtle.importKey("raw", e, {
        name: "PBKDF2"
      }, !1, ["deriveBits"]).catch(function(e) {
        console.error(e)
      });
    console.log("passphrasekey imported");
    e = await window.crypto.subtle.deriveBits({
      name: "PBKDF2",
      salt: n,
      iterations: 1e4,
      hash: "SHA-256"
    }, e, 384).catch(function(e) {
      console.error(e)
    });
    console.log("pbkdf2bytes derived"), e = new Uint8Array(e), keybytes = e.slice(0, 32), ivbytes = e.slice(32), r = r.slice(16);
    e = await window.crypto.subtle.importKey("raw", keybytes, {
      name: "AES-CBC",
      length: 256
    }, !1, ["decrypt"]).catch(function(e) {
      console.error(e)
    });
    console.log("key imported");
    r = await window.crypto.subtle.decrypt({
      name: "AES-CBC",
      iv: ivbytes
    }, e, r).catch(function(e) {
      console.error(e)
    });
    console.log("ciphertext decrypted"), r = new Uint8Array(r);
    r = new Blob([r], {
      type: "application/download"
    });
    console.log(t), console.log(o);
    const c = document.createElement("a");
    c.href = URL.createObjectURL(r), c.download = t, c.click()
  }
  async function downloadURL(t, e, o) {
    document.getElementById("dai").insertAdjacentHTML("beforeend", '<img src="https://rimgo.vern.cc/1TyFaOM.gif" />'), fetch("https://nftstorage.link/ipfs/" + e).then(e => e.blob()).then(e => {
      decryptfile(e, t, o), document.getElementById("dai").innerHTML = ""
    }).catch(console.error)
  }
 
  async function decryptfileImg(e, t, o) {
    var n = await readfile(e).catch(function(e) {
        console.error(e)
      }),
      c = new Uint8Array(n),
      e = new TextEncoder("utf-8").encode(o),
      n = c.slice(8, 16),
      e = await window.crypto.subtle.importKey("raw", e, {
        name: "PBKDF2"
      }, !1, ["deriveBits"]).catch(function(e) {
        console.error(e)
      });
    console.log("passphrasekey imported");
    e = await window.crypto.subtle.deriveBits({
      name: "PBKDF2",
      salt: n,
      iterations: 1e4,
      hash: "SHA-256"
    }, e, 384).catch(function(e) {
      console.error(e)
    });
    console.log("pbkdf2bytes derived"), e = new Uint8Array(e), keybytes = e.slice(0, 32), ivbytes = e.slice(32), c = c.slice(16);
    e = await window.crypto.subtle.importKey("raw", keybytes, {
      name: "AES-CBC",
      length: 256
    }, !1, ["decrypt"]).catch(function(e) {
      console.error(e)
    });
    console.log("key imported");
    c = await window.crypto.subtle.decrypt({
      name: "AES-CBC",
      iv: ivbytes
    }, e, c).catch(function(e) {
      console.error(e)
    });
    console.log("ciphertext decrypted"), c = new Uint8Array(c);
    c = new Blob([c], {
      type: "application/download"
    });
    console.log(t), console.log(o);
    o = document.getElementById("ipreview"), c = window.URL.createObjectURL(c);
    o.src = c, o.style.visibility = "visible"
  }
  async function previewImg(t, e, o) {
    document.getElementById("dai").insertAdjacentHTML("beforeend", '<img src="https://rimgo.vern.cc/1TyFaOM.gif" />'), fetch("https://nftstorage.link/ipfs/" + e).then(e => e.blob()).then(e => {
      decryptfileImg(e, t, o), document.getElementById("dai").innerHTML = ""
    }).catch(console.error)
  }
</script>

Như vậy là xong rồi, đăng nhập và upload thôi.
----------------------
Download template: taptoe.vsites.net_backup.zip