Tambahkan tombol "Simpan ke Drive"

Tombol "Simpan ke Drive" memungkinkan pengguna menyimpan file ke Drive dari situs Anda. Misalnya, anggaplah situs Anda mencantumkan beberapa manual petunjuk (PDF) yang dapat didownload pengguna. Tombol "Simpan ke Drive" dapat ditempatkan di samping setiap panduan, sehingga pengguna dapat menyimpan panduan ke Drive Saya mereka.

Saat pengguna mengklik tombol, file akan didownload dari sumber data dan diupload ke Google Drive saat data diterima. Karena download dilakukan dalam konteks browser pengguna, proses ini memungkinkan pengguna mengautentikasi tindakan untuk menyimpan file menggunakan sesi browser yang telah dibuat.

Browser yang didukung

Tombol "Simpan ke Drive" mendukung browser ini.

Menambahkan tombol "Simpan ke Drive" ke halaman

Untuk membuat instance tombol "Simpan ke Drive", tambahkan skrip berikut ke halaman web Anda:

<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-savetodrive"
   data-src="//example.com/path/to/myfile.pdf"
   data-filename="My Statement.pdf"
   data-sitename="My Company Name">
</div>

Dengan:

  • class adalah parameter wajib yang harus disetel ke g-savetodrive jika Anda menggunakan tag HTML standar.

  • data-src adalah parameter wajib yang berisi URL file yang akan disimpan.

    • URL dapat berupa absolut atau relatif.
    • URL data-src dapat ditayangkan dari domain, subdomain, dan protokol yang sama dengan domain tempat tombol dihosting. Anda harus menggunakan protokol yang cocok antara halaman dan sumber data.
    • URI data dan URL file:// tidak didukung.
    • Karena kebijakan asal yang sama di browser, URL ini harus ditayangkan dari domain yang sama dengan halaman tempat URL tersebut ditempatkan, atau dapat diakses menggunakan Cross Origin Resource Sharing (CORS). Jika tombol dan resource berada di domain yang berbeda, lihat Menangani tombol dan resource di domain yang berbeda.(#domain).
    • Untuk menayangkan file saat halaman yang sama ditayangkan oleh http dan https, tentukan resource tanpa protokol seperti data-src="//example.com/files/file.pdf", yang menggunakan protokol yang sesuai berdasarkan cara halaman hosting diakses.

  • data-filename adalah parameter wajib yang berisi nama yang digunakan untuk file penyimpanan.

  • data-sitename adalah parameter wajib yang berisi nama situs web yang menyediakan file.

Anda dapat menempatkan atribut ini pada elemen HTML apa pun. Namun, elemen yang paling umum digunakan adalah div, span, atau button. Setiap elemen ini ditampilkan sedikit berbeda saat halaman dimuat karena browser merender elemen sebelum JavaScript "Simpan ke Drive" merender ulang elemen.

Skrip ini harus dimuat menggunakan protokol HTTPS dan dapat disertakan dari titik mana pun di halaman tanpa batasan. Anda juga dapat memuat skrip secara asinkron untuk meningkatkan performa.

Menggunakan beberapa tombol di halaman

Anda dapat menempatkan beberapa tombol "Simpan ke Drive" di halaman yang sama. Misalnya, Anda mungkin memiliki tombol di bagian atas dan bawah halaman yang panjang.

Jika parameter data-src dan data-filename sama untuk beberapa tombol, penyimpanan dari satu tombol akan menyebabkan semua tombol serupa menampilkan informasi progres yang sama. Jika beberapa tombol berbeda diklik, tombol tersebut akan disimpan secara berurutan.

Menangani tombol dan resource di domain yang berbeda

Jika tombol "Simpan ke Drive" Anda berada di halaman terpisah dari sumber data, permintaan untuk menyimpan file harus menggunakan Cross Origin Resource Sharing (CORS) untuk mengakses resource. CORS adalah mekanisme yang memungkinkan aplikasi web di satu domain mengakses resource dari server di domain lain.

Misalnya, jika tombol "Simpan ke Drive" ditempatkan di halaman di http://example.com/page.html, dan sumber data ditentukan sebagai data-src="https://otherserver.com/files/file.pdf", tombol akan gagal mengakses PDF kecuali browser dapat menggunakan CORS untuk mengakses resource.

URL data-src dapat ditayangkan dari domain lain, tetapi respons dari server HTTP harus mendukung permintaan HTTP OPTION dan mencakup header HTTP khusus berikut:

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Range
Access-Control-Expose-Headers: Cache-Control, Content-Encoding, Content-Range

Access-Control-Allow-Origin dapat memiliki nilai * untuk mengizinkan CORS dari domain mana pun atau dapat menentukan domain yang memiliki akses ke resource melalui CORS, seperti http://example.com/page.html. Jika Anda tidak memiliki server untuk menghosting konten, pertimbangkan untuk menggunakan Google App Engine.

Untuk mengetahui informasi selengkapnya, lihat dokumentasi server Anda tentang cara mengaktifkan CORS dari origin yang menayangkan tombol "Simpan ke Drive" Anda. Untuk mengetahui informasi selengkapnya tentang cara mengaktifkan server Anda untuk CORS, lihat Saya ingin menambahkan dukungan CORS ke server saya.

JavaScript API

JavaScript tombol "Simpan ke Drive" menentukan dua fungsi rendering tombol di namespace gapi.savetodrive. Jika menonaktifkan rendering otomatis, Anda harus memanggil salah satu fungsi ini dengan menyetel parsetags ke explicit.

Metode Deskripsi
gapi.savetodrive.render(
container,
parameters
)		 Merender container yang ditentukan sebagai widget tombol "Simpan ke Drive".
container
Penampung untuk dirender sebagai tombol "Simpan ke Drive". Tentukan ID penampung (string) atau elemen DOM itu sendiri.
parameter
Objek yang berisi atribut tag "Simpan ke Drive" sebagai pasangan nilai kunci, tanpa awalan data-. Contoh, {"src": "//example.com/path/to/myfile.pdf", "filename": "My Statement.pdf", "sitename": "My Company Name"}.
gapi.savetodrive.go(
opt_container
)		 Merender semua tag dan class "Simpan ke Drive" dalam penampung yang ditentukan. Fungsi ini hanya boleh digunakan jika parsetags disetel ke explicit, yang mungkin Anda lakukan karena alasan performa.
opt_container
Penampung yang berisi tag tombol "Simpan ke Drive" untuk dirender. Tentukan ID penampung (string) atau elemen DOM itu sendiri. Jika parameter opt_container tidak disertakan, semua tag "Simpan ke Drive" di halaman akan dirender.

Contoh JavaScript "Simpan ke Drive" dengan pemuatan eksplisit

<!DOCTYPE html>
    <html>
      <head>
        <title>Save to Drive Demo: Explicit Load</title>
        <link rel="canonical" href="http://www.example.com">
        <script src="https://apis.google.com/js/platform.js" async defer>
          {parsetags: 'explicit'}
        </script>
      </head>
      <body>
        <div id="container">
          <div class="g-savetodrive"
             data-src="//example.com/path/to/myfile.pdf"
             data-filename="My Statement.pdf"
             data-sitename="My Company Name">
          <div>
        </div>
        <script type="text/javascript">
          gapi.savetodrive.go('container');
        </script>
      </body>
    </html>

Contoh JavaScript "Simpan ke Drive" dengan rendering eksplisit

    <!DOCTYPE html>
    <html>
      <head>
        <title>Save to Drive Demo: Explicit Render</title>
        <link rel="canonical" href="http://www.example.com">
        <script>
          window.___gcfg = {
            parsetags: 'explicit'
          };
        </script>
        <script src="https://apis.google.com/js/platform.js" async defer></script>
      </head>
      <body>
        <a href="javascript:void(0)" id="render-link">Render the Save to Drive button</a>
        <div id="savetodrive-div"></div>
        <script>
          function renderSaveToDrive() {
            gapi.savetodrive.render('savetodrive-div', {
              src: '//example.com/path/to/myfile.pdf',
              filename: 'My Statement.pdf',
              sitename: 'My Company Name'
            });
          }
          document.getElementById('render-link').addEventListener('click', renderSaveToDrive);
        </script>
      </body>
    </html>

Melokalkan tombol "Simpan ke Drive"

Jika halaman web Anda mendukung bahasa tertentu, tetapkan variabel window.___gcfg.lang ke bahasa tersebut. Jika tidak disetel, bahasa Google Drive pengguna akan digunakan.

Untuk nilai kode bahasa yang tersedia, lihat daftar kode bahasa yang didukung.

    <!DOCTYPE html>
    <html>
      <head>
        <title>Save to Drive Demo: Async Load with Language</title>
        <link rel="canonical" href="http://www.example.com">
      </head>
      <body>
        <div class="g-savetodrive"
             data-src="//example.com/path/to/myfile.pdf"
             data-filename="My Statement.pdf"
             data-sitename="My Company Name">
        </div>

        <script type="text/javascript">
          window.___gcfg = {
            lang: 'en-US'
          };
        </script>
        <script src = 'https://apis.google.com/js/platform.js' async defer></script>

      </body>
    </html>

Pemecahan masalah

Jika Anda mendapatkan error XHR saat mendownload URL data-src, verifikasi bahwa resource tersebut benar-benar ada, dan Anda tidak mengalami masalah CORS.

Jika file besar dipangkas menjadi 2 MB, kemungkinan server Anda tidak mengekspos Content-Range, kemungkinan masalah CORS.