"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ç talimat kılavuzunun (PDF) listelendiğini varsayalım. "Drive'a kaydet" düğmesi her kılavuzun yanına yerleştirilebilir. Böylece kullanıcılar kılavuzları Drive'ım bölümüne kaydedebilir.

Kullanıcı düğmeyi tıkladığında dosya, veri kaynağından indirilir ve veriler alındıkça 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 dosya 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, alt alan ve protokolden sunulabilir. 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ı alan adından sunulmalı veya merkezler arası kaynak paylaşımı (CORS) kullanılarak erişilebilir olmalıdır. Düğme ve kaynak farklı alanlardaysa Farklı alanlardaki düğmeleri ve kaynakları işleme(#domain) bölümüne bakın.
    • Aynı sayfa hem http hem de https tarafından sunulduğunda dosyayı sunmak için kaynağı protokol olmadan belirtin (ör. data-src="//example.com/files/file.pdf"). Bu, barındırma sayfasına nasıl erişildiğine bağlı olarak uygun protokolü kullanır.

  • data-filename, kayıt dosyası 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 sık kullanılan öğeler div, span veya button'dir. "Drive'a Kaydet" JavaScript'i öğeyi yeniden oluşturmadan önce tarayıcı öğeyi oluşturduğundan, sayfa yüklenirken bu öğelerin her biri biraz farklı şekilde görüntülenir.

Bu komut dosyası HTTPS protokolü kullanılarak yüklenmelidir ve sayfanın herhangi bir yerinden kısıtlama olmadan dahil edilebilir. Performansı artırmak 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 hem üst hem de alt kısmında bir düğme olabilir.

Birden fazla düğme için data-src ve data-filename parametreleri 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ı işleme

"Drive'a kaydet" düğmeniz veri kaynağından ayrı bir sayfadaysa dosyayı kaydetme isteği, kaynağa erişmek için Çapraz Kaynak Paylaşımı (CORS) kullanmalıdır. CORS, bir alan adındaki web uygulamasının farklı bir alan adındaki sunucudan 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ştirilmişse ve veri kaynağı data-src="https://otherserver.com/files/file.pdf" olarak belirtilmişse 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 alan adından sunulabilir ancak HTTP sunucusundan gelen yanıtların HTTP OPTION isteklerini desteklemesi ve aşağıdaki özel HTTP üstbilgilerini 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'ye izin vermek için * değerine sahip olabilir veya alternatif olarak, CORS aracılığıyla kaynağa erişimi olan alanları (ör. http://example.com/page.html) 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'yi nasıl etkinleştireceğinizle ilgili sunucu belgelerinize bakın. Sunucunuzu CORS için etkinleştirme hakkında daha fazla bilgi edinmek istiyorsanız Sunucuma CORS desteği eklemek istiyorum başlıklı makaleyi inceleyin.

JavaScript API

"Drive'a Kaydet" düğmesi JavaScript'i, gapi.savetodrive ad alanı 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
data- ön ekleri olmadan, "Drive'a kaydet" etiket özelliklerini 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. Performansla ilgili nedenlerle bu ayarı kullanabilirsiniz.
opt_container
Oluşturulacak "Drive'a Kaydet" düğmesi etiketlerini içeren kapsayıcı. Kapsayıcının kimliğini (dize) veya DOM öğesinin kendisini belirtin. opt_container parametresi atlanırsa sayfadaki tüm "Drive'a Kaydet" etiketleri oluşturulur.

Açık yükleme içeren örnek "Drive'a kaydet" JavaScript'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>

Açık oluşturma ile ö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ı 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 mevcut 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'i göstermiyor olabilir. Bu durum muhtemelen bir CORS sorunudur.