"Drive'a Kaydet" düğmesini ekleyin

"Drive'a kaydet" düğmesi, kullanıcıların web sitenizden Drive'a dosya kaydetmesine olanak tanır. Örneğin, web sitenizde kullanıcıların indirebileceği birkaç kullanım kılavuzu (PDF) olduğunu varsayalım. "Drive'a kaydet" düğmesi, kullanıcıların kılavuzları Drive'ım klasörlerine kaydetmesine olanak tanıyacak şekilde her kılavuzun yanına yerleştirilebilir.

Kullanıcı düğmeyi tıkladığında dosya, veri kaynağından indirilir ve veriler alınırken Google Drive'a yüklenir. İndirme işlemi kullanıcının tarayıcısı bağlamında yapıldığından bu işlem, kullanıcının mevcut tarayıcı oturumunu kullanarak dosyaları kaydetme işleminin kimliğini doğrulamasına olanak tanır.

Desteklenen tarayıcılar

"Drive'a kaydet" düğmesi bu tarayıcıları destekler.

"Drive'a kaydet" düğmesini bir sayfaya ekleme

"Drive'a kaydet" düğmesinin bir örneğini oluşturmak için web sayfanıza aşağıdaki komut dosyasını ekleyin:

<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>

Burada:

  • class, standart bir HTML etiketi kullanıyorsanız g-savetodrive olarak ayarlanması gereken zorunlu bir parametredir.

  • data-src, kaydedilecek dosyanın URL'sini içeren zorunlu bir parametredir.

    • URL'ler mutlak veya göreli olabilir.
    • data-src URL'si, düğmenin barındırıldığı alanla aynı alan adından, alt alan adından ve protokolden yayınlanabilir. Sayfa ile veri kaynağı arasında eşleşen protokoller kullanmanız gerekir.
    • Veri URI'leri ve file:// URL'leri desteklenmez.
    • Tarayıcının aynı kaynak politikası nedeniyle bu URL, yerleştirildiği sayfayla aynı alandan sunulmalı veya merkezler arası kaynak paylaşımı (CORS) kullanılarak erişilebilir olmalıdır. Düğme ve kaynak farklı alan adlarındaysa Farklı alan adlarında düğme ve kaynak kullanma başlıklı makaleyi inceleyin.(#domain).
    • Aynı sayfa hem http hem de https tarafından sunulduğunda dosyayı sunmak için kaynağı, barındırma sayfasına nasıl erişildiğine bağlı olarak uygun protokolü kullanan data-src="//example.com/files/file.pdf" gibi bir protokol olmadan belirtin.

  • data-filename, dosyayı kaydetmek için kullanılan adı içeren zorunlu bir parametredir.

  • data-sitename, dosyayı sağlayan web sitesinin adını içeren zorunlu bir parametredir.

Bu özellikleri herhangi bir HTML öğesine yerleştirebilirsiniz. Ancak en yaygın kullanılan öğeler div, span veya button'dir. Tarayıcı, "Drive'a kaydet" JavaScript'i öğeyi yeniden oluşturmadan önce öğeyi oluşturduğundan, bu öğelerin her biri sayfa yüklenirken biraz farklı şekilde gösterilir.

Bu komut dosyası HTTPS protokolü kullanılarak yüklenmelidir ve sayfanın herhangi bir noktasından kısıtlama olmadan eklenebilir. Daha iyi performans için komut dosyasını eşzamansız olarak da yükleyebilirsiniz.

Bir sayfada birden fazla düğme kullanma

Aynı sayfaya birden fazla "Drive'a kaydet" düğmesi yerleştirebilirsiniz. Örneğin, uzun bir sayfanın üst ve alt kısmında birer düğme olabilir.

data-src ve data-filename parametreleri birden fazla düğme için aynıysa bir düğmeden kaydetme işlemi, benzer tüm düğmelerin aynı ilerleme bilgilerini göstermesine neden olur. Birden fazla farklı düğme tıklanırsa bunlar sırayla kaydedilir.

Farklı alanlardaki düğmeleri ve kaynakları yönetme

"Drive'a kaydet" düğmeniz veri kaynağından ayrı bir sayfadaysa dosyayı kaydetme isteği, kaynağa erişmek için kaynaklar arası kaynak paylaşımını (CORS) kullanmalıdır. CORS, bir alandaki web uygulamasının farklı bir alandaki sunucudaki kaynaklara erişmesine olanak tanıyan bir mekanizmadır.

Örneğin, http://example.com/page.html adresindeki bir sayfaya "Drive'a kaydet" düğmesi yerleştirilirse ve veri kaynağı data-src="https://otherserver.com/files/file.pdf" olarak belirtilirse tarayıcı kaynağa erişmek için CORS'u kullanamadığı sürece düğme PDF'ye erişemez.

data-src URL'si başka bir alandan sunulabilir ancak HTTP sunucusundan gelen yanıtların HTTP OPTION isteklerini desteklemesi ve aşağıdaki özel HTTP üst bilgilerini içermesi gerekir:

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

Access-Control-Allow-Origin, herhangi bir alandan CORS'a izin vermek için * değerine sahip olabilir veya alternatif olarak http://example.com/page.html gibi CORS aracılığıyla kaynağa erişimi olan alanları belirtebilir. İçeriğinizi barındıracak bir sunucunuz yoksa Google App Engine'i kullanabilirsiniz.

Daha fazla bilgi için "Drive'a kaydet" düğmenizi sunan kaynaktan CORS'un nasıl etkinleştirileceğiyle ilgili sunucu dokümanlarına bakın. Sunucunuzu CORS için etkinleştirme hakkında daha fazla bilgi edinmek için Sunucuma CORS desteği eklemek istiyorum başlıklı makaleyi inceleyin.

JavaScript API

"Drive'a kaydet" düğmesi JavaScript'i, gapi.savetodrive ad alanının altında iki düğme oluşturma işlevi tanımlar. Otomatik oluşturmayı devre dışı bırakırsanız parsetags değerini explicit olarak ayarlayarak bu işlevlerden birini çağırmanız gerekir.

Yöntem Açıklama
gapi.savetodrive.render(
container,
parameters
)		 Belirtilen kapsayıcıyı "Drive'a kaydet" düğmesi widget'ı olarak oluşturur.
kapsayıcı
"Drive'a kaydet" düğmesi olarak oluşturulacak kapsayıcı. Kapsayıcının kimliğini (dize) veya DOM öğesinin kendisini belirtin.
parametreler
"Drive'a kaydet" etiket özelliklerini data- ön ekleri olmadan anahtar=değer çiftleri olarak içeren bir nesne. Örneğin, {"src": "//example.com/path/to/myfile.pdf", "filename": "My Statement.pdf", "sitename": "My Company Name"}.
gapi.savetodrive.go(
opt_container
)		 Belirtilen kapsayıcıdaki tüm "Drive'a kaydet" etiketlerini ve sınıflarını oluşturur. Bu işlev yalnızca parsetags explicit olarak ayarlanmışsa kullanılmalıdır. Bu ayarı performans nedeniyle yapabilirsiniz.
opt_container
Oluşturulacak "Drive'a kaydet" düğmesi etiketlerini içeren kapsayıcı. Kapsayıcının kimliğini (dize) veya DOM öğesini belirtin. opt_container parametresi atlanırsa sayfadaki tüm "Drive'a kaydet" etiketleri oluşturulur.

Belirli bir yüklemeyle "Drive'a kaydet" JavaScript örneği

<!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>

Belirli bir şekilde oluşturma içeren örnek "Drive'a kaydet" JavaScript'i

    <!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>

"Drive'a kaydet" düğmesini yerelleştirme

Web sayfanız belirli bir dili destekliyorsa window.___gcfg.lang değişkenini bu dile ayarlayın. Ayarlanmazsa kullanıcının Google Drive dili kullanılır.

Kullanılabilir dil kodu değerleri için desteklenen dil kodlarının listesine bakın.

    <!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>

Sorun giderme

data-src URL'nizi indirirken XHR hatası alırsanız kaynağın gerçekten var olduğunu ve CORS sorunu yaşamadığınızı doğrulayın.

Büyük dosyalar 2 MB'a kısaltılıyorsa sunucunuz Content-Range özelliğini göstermiyordur. Bu da büyük olasılıkla bir CORS sorunudur.