Unsigned uploads, images and videos

by taragano

HTML

<script src="https://res.cloudinary.com/demo/raw/upload/jquery.ui.widget.js"></script>
<script src="https://res.cloudinary.com/demo/raw/upload/jquery.iframe-transport.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.12.1/js/jquery.fileupload.min.js"></script>
<script src="https://res.cloudinary.com/demo/raw/upload/v1459950995/cloudinary-jquery-file-upload.js"></script>
<p id="message">Make sure you update the cloud name (<span>cloud_name</span>) and the upload preset's name (<span>preset_name</span>) for this demo to work.</p>
<input class="cloudinary_fileupload" name="file" type="file" hidden/>
<div class="status"></div>
<div class="progress"></div>
<div class="thumbnails"></div>

CSS

#message {
    font-size: large;
    background-color: rgb(237, 237, 225);
}

span{
    font-weight: bold;
}

JavaScript

var cloud_name = '';
var preset_name = '';

if (cloud_name != '' && preset_name != '') {
	$('#message').remove();
  $('.cloudinary_fileupload').show();
}

$.cloudinary.config({ cloud_name: cloud_name});
		  $(".cloudinary_fileupload") 
		  .unsigned_cloudinary_upload( preset_name, 
		  	{ 
		  		tags: 'multimedia', 
		  		folder: 'multimedia' 
		  	}, 
		  	{ 
			//maxFileSize: 20000000, // 20MB 
			// disableImageResize: true, 
			// imageMaxWidth: 2048, 
			// imageMaxHeight: 1536, 
			//resource_type: "video", 
			// acceptFileTypes: /(\.|\/)(gif|jpe?g|png|bmp|tif?f)$/i, 
			dropZone: "#direct_upload_jquery", 
			start: function (e) { 
				$('.status').text("Starting upload...");
			}, 
			fail: function (e, data) { 
				$('.status').text("Upload failed"); 
			} 
		}) 
		  .on("cloudinaryprogress", function (e, data) { 
		  	var progress = Math.round((data.loaded * 100.0) / data.total); 
		  	$('.progress').text("Uploading... " + progress + "%"); 
		  }) 
		  .on("cloudinarydone", function (e, data) { 
		  	if (data.result.resource_type == "image")
					$('.thumbnails').append($.cloudinary.image(data.result.public_id, 
				    { format: 'jpg', width: 150, height: 100, crop: 'thumb', gravity: 'face' } ))
				else if (data.result.resource_type == "video")
					$('.thumbnails').append($.cloudinary.video(data.result.public_id, 
				    { controls: true } ))
			}).on("cloudinaryfail", function (e, data) { 
				$('.status').text("Upload failed"); data.jqXHR.responseJSON.error.message;
			});