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

はじめに
アップロードの準備
1. Cloudinary アップロードプリセット
Upload Widget の設置
1. 設置サンプル
おわりに

はじめに

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 が使えるようになります