Cara melewati batasan browser dan melampirkan dua atau lebih file sekaligus: lampiran multi-file

Halo, Habr!



Mari kita selesaikan masalah yang tidak sepele. Bayangkan Anda perlu mengunduh data melalui antarmuka dengan cara yang sederhana, misalnya, klik tombol "Unduh file".



Mari kita gunakan Chrome v.88 default. Tugasnya terdengar seperti ini:

• Buat file sisi klien.
• Unduh semua file yang dihasilkan dengan satu klik.

Bisa apa saja: sekumpulan biner, arsip besar dengan cadangan, galeri gambar, dan sebagainya. Kami akan berbicara secara khusus tentang mekanisme pengunduhan seperti itu, jadi kami akan mengambil pengunduhan teks dan gambar sebagai contoh.

Tentu saja, Anda dapat mengatasi masalah ini hanya dengan mengompresi semua file yang diperlukan ke dalam satu arsip ZIP, lalu mengunduhnya. Ternyata pengguna mengunduh satu file, yang kemudian dia buka sendiri. Misalnya, Anda dapat menggunakan pustaka jszip , yang memungkinkan Anda mengunduh sekumpulan file dengan mengompresnya.



Berikut adalah contoh kecil unduhan terkompresi dari dokumen:

var zip = new JSZip();
zip.file("Hello.txt", "Hello World\n");
var img = zip.folder("images");
img.file("smile.gif", imgData, {base64: true}); zip.generateAsync({type:"blob"}).then(function(content) {
// see FileSaver.js
saveAs(content, "example.zip"); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

"Di mana ketidak-sepele di sini?" - Anda bertanya. Dan Anda akan benar. Dan jika kita berbicara tentang pengunduhan dua, tiga atau sepuluh file secara bersamaan dari situs? Misalnya: ada daftar di pilih, di mana Anda dapat memilih sejumlah file untuk diunduh. Mari perkenalkan kondisi tambahan: pengguna tidak memiliki pengarsip yang terpasang, jadi kami membuang opsi dengan kompresi ke arsip. Bagaimana cara mengatasi masalah ini?



Pertama mari kita siapkan browsernya. Chrome melarang mengunduh multifile secara default. Ini untuk alasan keamanan. Oleh karena itu, fungsi ini harus dibuka kuncinya terlebih dahulu di pengaturan browser:

1. Kami pergi ke pengaturan situs: chrome: // settings / content.
2. Buka Izin tambahan.
3. Pilih Download otomatis.
4. Tambahkan situs yang diperlukan ke kategori Izinkan.

Bagus, sekarang browser Anda menjadi kurang aman dan memungkinkan Anda mendownload banyak file di situs tertentu sekaligus.

Pendekatan # 1 - FileReader

Mari kita lihat pendekatan pertama menggunakan contoh membuat file menggunakan FileReader dan API pembacaan base64. Saya segera perhatikan bahwa FileReader memiliki API yang cukup luas, jadi pilih yang paling Anda sukai: teks, arrayBuffer atau binaryString.

(function () {
  const button = document.getElementById("download_with_reader");
  const content = ["content-1", "content-2", "content-3"];
    const createLink = () => {
    let link = document.createElement('a');
    link.download = 'hello.txt';
    return link;
  }
    const generateBlob = () => {
    for (const [index, value] of content.entries()) {
      const blob = new Blob([value], { type: "text/plain" });
      download(blob, index);
    }
  }
  const download = (blob, index) => {
    const link = createLink();
    let reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onload = function () {
      link.href = reader.result;
      link.download = `content-${index+1}.txt`;
      link.click();
    }
  }
    button.addEventListener("click", generateBlob);
}) ();

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

[kode di Gitlab]

Pendekatan # 2 - createObjectURL

Anda juga dapat menggunakan createObjectURL - ini memungkinkan Anda untuk menyimpan objek File atau Blob.

(function () {
  const button = document.getElementById("download_with_url_object");
  const content = ["content-1", "content-2", "content-3"];
  
  const createLink = () => {
    let link = document.createElement('a');
    link.download = 'hello.txt';
    return link;
  }
  const generateBlob = () => {
    for (const [index, value] of content.entries()) {
      const blob = new Blob([value], { type: "text/plain" });
      download(blob, index);
    }
  }
  const download = (blob, index) => {
    const link = createLink();
    link.href = URL.createObjectURL(blob);
    link.download = `content-${index+1}.txt`;
    link.click();
    URL.revokeObjectURL(link.href);
  }
   button.addEventListener("click", generateBlob);
}) ();

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

[kode di Gitlab]

Pendekatan # 3 - Unduh dari URL

Kedua opsi di atas menghasilkan file sisi klien. Tentu saja, tidak selalu demikian, dari waktu ke waktu kami menerima file dari backend melalui tautan langsung. Ini dapat dilakukan dengan mengunduh dari URL. Chrome membutuhkan latensi, jadi penerapan latensi buatan akan menjadi fitur metode ini.

(function () {
(function () {
  const button = document.getElementById("download_with_request");
  const urls = ["images/image-1.jpg", "images/image-2.jpg", "images/image-3.jpg"];
  
  const delay = () => new Promise(resolve => setTimeout(resolve, 1000));
  
  const downloadWithRequest = async () => {
    for await (const [index, url] of urls.entries()) {
      await delay();
      const link = document.createElement("a");
      link.href = url;
      link.download = `image-${index+1}`;
      link.click();
    }
  }
  
  button.addEventListener("click", downloadWithRequest);
}) ();


      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

[kode di Gitlab]

Total

Berikut adalah tiga cara yang cukup sederhana untuk mengunduh banyak file dari suatu situs secara bersamaan dan melakukannya dengan cepat. Hal utama adalah mengaktifkan izin yang diperlukan untuk situs tertentu, lalu memilih metode yang Anda suka.