Cloudinary にアップロードする方法を解説(Upload Widget, unsigned)

cloudinary

はじめに

Cloudinaryについて、調べたこと、試したことのメモになります
間違っていたり、より良いアプローチがあったり、いろいろと至らない部分も多々あるかと思います

今回は、Upload Widget を使用した署名なしアップロード(unsigned upload)のやり方について書いていきます

Upload Widget を使用しない、jQuery での署名なしアップロードについては以前の記事を参照ください

アップロードの準備

Cloudinary アップロードプリセット

署名なしアップロードをするために、専用のアップロードプリセットを用意する必要があります
プリセットの作成方法については以前の記事と同様になります

Upload Widget でのアップロードでは jQuery は使用しないため、jQuery ライブラリは不要です

Upload Widget の設置

設置サンプル

以下にサンプルコードを記載します

<button id="upload_widget" class="cloudinary-button">Upload files</button>

<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>

<script type="text/javascript">
var widget = cloudinary.createUploadWidget({
    cloudName: 'my-cloud-name',
    uploadPreset: 'my-preset-name' },
    (error, result) => {
        // 成功時やエラー時の処理
    }
);

document.getElementById('upload_widget').addEventListener('click', function() {
    widget.open();
});
</script>

my-cloud-name 、my-preset-name には自身のパラメータを設定してください
問題がなければ下記のようなボタンが表示され、Upload Widget が使えるようになります

ボタンイメージ

おわりに

Upload Widget は設置がとても簡単にできるのが良いですね
また、Upload Widget を使うことで、URL参照でのアップロードや、Dropbox、Facebook、Instagram といったSNSからのアップロードが可能になるのも大きなメリットかと思われます

今回の記事では Upload Widget の導入だけでしたが、公式ガイドで Upload Widget のいろいろなオプションが説明されています

Upload Widget | Cloudinary
Cloudinary's free Upload Widget allows website users to upload files directly to the cloud. Upload from local files, URL, Dropbox, Facebook and more.

コメント

タイトルとURLをコピーしました