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

cloudinary

はじめに

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

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

PHPを使用したアップロードについては以下を参照ください

署名なしアップロード(unsigned upload)とは

Cloudinaryへのアップロードは自身で行うのが基本です
メディアライブラリはログインしなければ使えませんし、Upload APIを使ったアップロードでも、API KeyやAPI Secretといったパラメータが必要になります

署名なしアップロードは、Cloudinaryへのログインや、APIパラメータを必要としないアップロード方法となり、誰でもアップロードすることが可能です

誰でもアップロードが可能な方法であるため、使い方によっては便利である反面、悪用されたりしないよう注意が必要です

署名なしアップロードの準備

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

署名なしアップロードをするために、専用のアップロードプリセットを用意する必要があります
コンソールのアップロード設定から、アップロードプリセットを作成します

前述の通り、悪用を防ぐためにアップロードしたファイルを公開する必要がなければ、Editリンクから、”Delivery type” を “private” に設定したり、画像アップロードのみ許容するならば、”Allowed formats”に画像拡張子のみを設定したりしておきましょう

jQuery ライブラリ

署名なしアップロードをするために、以下のjQueryの各種ライブラリが必要です

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.iframe-transport.js"></script>
<script type="text/javascript" src="jquery.fileupload.js"></script>
<script type="text/javascript" src="jquery.cloudinary.js"></script>

私は以下のCDNから参照しました

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.iframe-transport/1.0.1/jquery.iframe-transport.min.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/10.30.1/js/jquery.fileupload.min.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/cloudinary-jquery-file-upload/2.9.0/cloudinary-jquery-file-upload.min.js' type='text/javascript'></script>

アップロードボタン(<input type=”file”>)の作成

html

ファイル選択ボタンを置く場所に、div タグを用意します

<div id="upload"></div>

javascript

用意された関数($.cloudinary.unsigned_upload_tag)を使い、inputタグを作成します
“my-preset-name” には前項で作成したプリセット名を設定します

$('#upload').append($.cloudinary.unsigned_upload_tag(
    "my-preset-name",
    { cloud_name: 'my-cloud-name' }
));

作成されたボタンでファイルを選択すると、アップロードが始まります
選択と同時にアップロードしてしまう仕様のようです

アップロード中やアップロード後の処理

アップロード中やアップロード後に何かしらの処理をしたい場合には、bind することで任意の処理を行うことが出来ます

$('#upload').bind('cloudinaryprogress', function(e, data) {
    // アップロード中の処理
});
$('#upload').bind('cloudinarydone', function(e, data) {
    // アップロード後の処理
});

おわりに

署名なしアップロードは実装も容易なので、使い所さえ間違えなければ、なかなか便利な機能だと思います

コメント

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