diff --git a/samples/basic/basic.js b/samples/basic/basic.js index 439fd651..b18c73e2 100644 --- a/samples/basic/basic.js +++ b/samples/basic/basic.js @@ -1,116 +1,171 @@ -require('dotenv').load(); +require('dotenv').config(); var fs = require('fs'); var cloudinary = require('cloudinary').v2; var uploads = {}; -// set your env variable CLOUDINARY_URL or set the following configuration -/* cloudinary.config({ - cloud_name: '', - api_key: '', - api_secret: '' -}); */ +/* +Set your environment variable CLOUDINARY_URL or set the following configuration + cloudinary.config({ + cloud_name: '', + api_key: '', + api_secret: '' +}); +*/ console.log("** ** ** ** ** ** ** ** ** Uploads ** ** ** ** ** ** ** ** ** **"); // File upload -cloudinary.uploader.upload('pizza.jpg', { tags: 'basic_sample' }, function (err, image) { +cloudinary.uploader.upload('pizza.jpg', { tags: 'basic_sample' }) +.then((image) => { console.log(); console.log("** File Upload"); - if (err) { console.warn(err); } console.log("* public_id for the uploaded image is generated by Cloudinary's service."); console.log("* " + image.public_id); console.log("* " + image.url); - waitForAllUploads("pizza", err, image); + waitForAllUploads("pizza", image); +}) +.catch((err) => { + console.warn(err); }); // Stream upload -var upload_stream = cloudinary.uploader.upload_stream({ tags: 'basic_sample' }, function (err, image) { - console.log(); - console.log("** Stream Upload"); - if (err) { console.warn(err); } - console.log("* Same image, uploaded via stream"); - console.log("* " + image.public_id); - console.log("* " + image.url); - waitForAllUploads("pizza3", err, image); -}); -fs.createReadStream('pizza.jpg').pipe(upload_stream); +async function uploadStreamWithPromise(filePath, uploadOptions) { + try { + const byteArrayBuffer = fs.readFileSync(filePath); + + const uploadResult = await new Promise((resolve, reject) => { + const stream = cloudinary.uploader.upload_stream(uploadOptions, (err, result) => { + if (err) { + return reject(err); + } + resolve(result); + }); + stream.end(byteArrayBuffer); + }); + + console.log(); + console.log("** Stream Upload"); + console.log("* public_id for the uploaded image is: " + uploadResult.public_id); + console.log("* URL: " + uploadResult.url); + + waitForAllUploads("pizza3", uploadResult); + + } catch (error) { + console.error("Error during stream upload: ", error); + } +} +uploadStreamWithPromise('pizza.jpg', { tags: 'basic_sample' }); -// File upload (example for promise api) -cloudinary.uploader.upload('pizza.jpg', { tags: 'basic_sample' }) - .then(function (image) { + + +// File upload (example for async/await) +(async () => { + try { + const image = await cloudinary.uploader.upload('pizza.jpg', { tags: 'basic_sample' }); console.log(); - console.log("** File Upload (Promise)"); + console.log("** File Upload (Async/Await)"); console.log("* public_id for the uploaded image is generated by Cloudinary's service."); console.log("* " + image.public_id); console.log("* " + image.url); - }) - .catch(function (err) { - console.log(); - console.log("** File Upload (Promise)"); - if (err) { console.warn(err); } - }); + } catch (err) { + console.error("Error in File Upload (Async/Await): ", err); + } +})(); -// Public Id -cloudinary.uploader.upload('pizza.jpg', { tags: 'basic_sample', public_id: 'my_favorite_pizza' }, function (err, image) { +// Files can also be uploaded with a specified Public id +cloudinary.uploader.upload('pizza.jpg', { tags: 'basic_sample', public_id: 'my_favorite_pizza' }) +.then((image) => { console.log(); console.log("** Public Id"); - if (err) { console.warn(err); } console.log("* Same image, uploaded with a custom public_id"); console.log("* " + image.public_id); console.log("* " + image.url); - waitForAllUploads("pizza2", err, image); + waitForAllUploads("pizza2", image); +}) +.catch((err) => { + console.warn(err); }); -// Eager Transformations: -// Applied as soon as the file is uploaded, instead of lazily applying them when accessed by your site's visitors. +/* Eager Transformations: + Applied as soon as the file is uploaded, instead of lazily applying them when accessed by your site's visitors. +*/ var eager_options = { width: 200, height: 150, crop: 'scale', format: 'jpg' }; -cloudinary.uploader.upload("lake.jpg", { tags: "basic_sample", public_id: "blue_lake", eager: eager_options }, function (err, image) { - // "eager" parameter accepts a hash (or just a single item). You can pass - // named transformations or transformation parameters as we do here. + +cloudinary.uploader.upload("lake.jpg", { tags: "basic_sample", public_id: "blue_lake", eager: eager_options }) +/* +"eager" parameter accepts a hash (or just a single item). You can pass +named transformations or transformation parameters as we do here. +*/ +.then((image) => { + console.log(); console.log("** Eager Transformations"); - if (err) { console.warn(err); } console.log("* " + image.public_id); console.log("* " + image.eager[0].url); - waitForAllUploads("lake", err, image); + waitForAllUploads("lake", image); +}) +.catch((err) => { + console.warn(err); }); -// Remote URL: -// In the two following examples, the file is fetched from a remote URL and stored in Cloudinary. -// This allows you to apply transformations and take advantage of Cloudinary's CDN layer. -cloudinary.uploader.upload('http://res.cloudinary.com/demo/image/upload/couple.jpg', { tags: "basic_sample" }, function (err, image) { +/* +Remote URL: +In the two following examples, the file is fetched from a remote URL and stored in Cloudinary. +This allows you to apply transformations and take advantage of Cloudinary's CDN layer. +*/ +cloudinary.uploader.upload('http://res.cloudinary.com/demo/image/upload/couple.jpg', { tags: "basic_sample" }) +.then((image) => { console.log(); console.log("** Remote Url"); - if (err) { console.warn(err); } console.log("* " + image.public_id); console.log("* " + image.url); - waitForAllUploads("couple", err, image); + waitForAllUploads("couple", image); +}) +.catch((err) => { + console.warn(err); }); -// Here, the transformation is applied to the uploaded image BEFORE storing it on the cloud. -// The original uploaded image is discarded. -cloudinary.uploader.upload('http://res.cloudinary.com/demo/image/upload/couple.jpg', - { "tags": "basic_sample", "width": 500, "height": 500, "crop": "fit", "effect": "saturation:-70" }, - function (err, image) { +/* +Here, the transformation is applied to the uploaded image BEFORE storing it on the cloud. +The original uploaded image is discarded. +This is being done using async/await to demonstrate its functionality with Remote URLs +*/ +(async () => { + try { + const image = await cloudinary.uploader.upload( + 'http://res.cloudinary.com/demo/image/upload/couple.jpg', + { + tags: "basic_sample", + width: 500, + height: 500, + crop: "fit", + effect: "saturation:-70" + } + ); + console.log(); - console.log("** Remote Url"); - if (err) { console.warn(err); } + console.log("** Remote Url using Async/Await"); console.log("* " + image.public_id); console.log("* " + image.url); - waitForAllUploads("couple2", err, image); - }); + waitForAllUploads("couple2", image); + + } catch (err) { + console.warn(err); + } +})(); + -function waitForAllUploads(id, err, image) { +function waitForAllUploads(id, image) { uploads[id] = image; var ids = Object.keys(uploads); if (ids.length === 6) { @@ -141,6 +196,18 @@ function performTransformations() { console.log("> Fill 200x150, round corners, apply the sepia effect"); console.log("> " + cloudinary.url(uploads.couple2.public_id, { width: 200, height: 150, crop: "fill", gravity: "face", radius: 10, effect: "sepia", format: "jpg" })); + console.log(); + console.log("> Optimisation of image quality and file format to minimize file size and maintain required quality level"); + console.log("> " + cloudinary.url(uploads.lake.public_id, {transformation: [ {width: 500, crop: "scale"}, {quality: "auto", fetch_format: "auto"} + ]})); + + console.log(); + console.log("> Returning images that fit the size and device pixel ratio(dpr) of a user's device"); + console.log("> " + cloudinary.url(uploads.lake.public_id, {transformation: [ + { dpr: "auto", responsive: true, width: "auto", crop: "scale" }, + { effect: "art:daguerre", border: "3px_solid_rgb:00390b", radius: 20 } + ]})); + console.log(); console.log("> That's it. You can now open the URLs above in a browser"); console.log("> and check out the generated images."); diff --git a/samples/basic/package.json b/samples/basic/package.json index 545a9f5e..b911c64e 100644 --- a/samples/basic/package.json +++ b/samples/basic/package.json @@ -1,14 +1,15 @@ { "name": "basic", "version": "0.0.0", - "description": "basic node sample of cloudinary npm", + "description": "Basic node sample of Cloudinary npm", "main": "basic.js", "dependencies": { - "cloudinary": "^1.3.0", - "dotenv": "1.x" + "cloudinary": "^2.5.1", + "dotenv": "16.x" }, "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "test": "echo \"Error: no test specified\" && exit 1", + "start": "node basic.js" }, "author": "", "license": "ISC" diff --git a/samples/photo_album/config/schema.js b/samples/photo_album/config/schema.js index fe1709e4..17d3d2f9 100644 --- a/samples/photo_album/config/schema.js +++ b/samples/photo_album/config/schema.js @@ -1,8 +1,8 @@ -var Schema = require('jugglingdb').Schema; +const Schema = require('jugglingdb').Schema; -var schema = new Schema('memory'); +const schema = new Schema('memory'); // Uncomment if you want to use mongodb adapter -// var schema = new Schema('mongodb'); +// const schema = new Schema('mongodb'); // Define models schema.define('Photo', { diff --git a/samples/photo_album/controllers/photos_controller.js b/samples/photo_album/controllers/photos_controller.js index 376eabcf..ce58460f 100644 --- a/samples/photo_album/controllers/photos_controller.js +++ b/samples/photo_album/controllers/photos_controller.js @@ -1,11 +1,12 @@ -var cloudinary = require('cloudinary').v2; -var crypto = require('crypto'); -var multipart = require('connect-multiparty'); -var schema = require('../config/schema'); +const cloudinary = require('cloudinary').v2; +const crypto = require('crypto'); +const multer = require('multer'); +const schema = require('../config/schema'); -var Photo = schema.models.Photo; +const Photo = schema.models.Photo; -var multipartMiddleware = multipart(); +const storage = multer.memoryStorage(); +const upload = multer({ storage: storage }); function index(req, res) { Photo.all().then(function (photos) { @@ -15,11 +16,11 @@ function index(req, res) { function add_through_server(req, res) { // Create a new photo model and set it's default title - var photo = new Photo(); - Photo.count().then(function (amount) { + let photo = new Photo(); + Photo.count().then((amount) => { photo.title = "My Photo #" + (amount + 1); }) - .finally(function () { + .finally(() => { res.render('photos/add', { photo: photo }); @@ -33,40 +34,42 @@ function create_through_server(req, res) { // and then saved to the database. // file was not uploaded redirecting to upload - if (req.files.image.ws.bytesWritten === 0) { + if (!req.file) { res.redirect('/photos/add'); return; } - var photo = new Photo(req.body); - // Get temp file path - var imageFile = req.files.image.path; + let photo = new Photo(req.body); + // Get buffer from multer + const imageBuffer = req.file.buffer; // Upload file to Cloudinary - cloudinary.uploader.upload(imageFile, { tags: 'express_sample' }) - .then(function (image) { - console.log('** file uploaded to Cloudinary service'); - console.dir(image); - photo.image = image; - // Save photo with image metadata - return photo.save(); - }) - .then(function () { + cloudinary.uploader.upload_stream({ tags: 'express_sample' }, function (error, result) { + if (error) { + console.error('** file upload to Cloudinary failed'); + console.error(error); + res.redirect('/photos/add'); + return; + } + console.log('** file uploaded to Cloudinary service'); + console.dir(result); + photo.image = result; + // Save photo with image metadata + photo.save().then( () => { console.log('** photo saved'); - }) - .finally(function () { res.render('photos/create_through_server', { photo: photo, upload: photo.image }); }); + }).end(imageBuffer); } function add_direct(req, res) { // Configuring cloudinary_cors direct upload to support old IE versions - var cloudinary_cors = "http://" + req.headers.host + "/cloudinary_cors.html"; + const cloudinary_cors = "http://" + req.headers.host + "/cloudinary_cors.html"; // Create a new photo model and set it's default title - var photo = new Photo(); - Photo.count().then(function (amount) { + let photo = new Photo(); + Photo.count().then((amount) => { photo.title = "My Photo #" + (amount + 1) + " (direct)"; }) - .finally(function () { + .finally(() => { res.render('photos/add_direct', { photo: photo, cloudinary_cors: cloudinary_cors @@ -76,30 +79,29 @@ function add_direct(req, res) { function add_direct_unsigned(req, res) { // Configuring cloudinary_cors direct upload to support old IE versions - var cloudinary_cors = "http://" + req.headers.host + "/cloudinary_cors.html"; + const cloudinary_cors = "http://" + req.headers.host + "/cloudinary_cors.html"; // Set a unique unsigned upload preset name (for demo purposes only). - // In 'real life' scenario the preset name will be meaningful and will be set - // via online console or API not related to the actual upload - var sha1 = crypto.createHash('sha1'); + // In 'real life' scenario the preset name will be meaningful and will be set via online console or API not related to the actual upload + let sha1 = crypto.createHash('sha1'); sha1.update(cloudinary.config('api_key') + cloudinary.config('api_secret')); - var preset_name = "sample_" + sha1.digest('hex'); + let preset_name = "sample_" + sha1.digest('hex'); // Create a new photo model and set it's default title - var photo = new Photo(); - Photo.count().then(function (amount) { + let photo = new Photo(); + Photo.count().then((amount) => { photo.title = "My Photo #" + (amount + 1) + " (direct unsigned)"; }) - .then(function () { + .then(() => { return cloudinary.api.upload_preset(preset_name); }) - .then(function (preset) { + .then((preset) => { if (!preset.settings.return_delete_token) { return cloudinary.api.update_upload_preset(preset_name, { return_delete_token: true }); } return undefined; }) - .catch(function (err) { + .catch((err) => { // Creating an upload preset is done here only for demo purposes. // Usually it is created outside the upload flow via api or // online console (https://cloudinary.com/console/settings/upload) @@ -110,7 +112,7 @@ function add_direct_unsigned(req, res) { return_delete_token: true }); }) - .finally(function (preset) { + .finally((preset) => { res.render('photos/add_direct_unsigned', { photo: photo, @@ -123,8 +125,8 @@ function add_direct_unsigned(req, res) { function create_direct(req, res) { // In direct mode, the image is uploaded to Cloudinary by the browser, // and upload metadata is available in JavaScript (see add_direct.ejs). - var result = {}; - var photo = new Photo(req.body); + let result = {}; + let photo = new Photo(req.body); result.photo = photo; // image was not uploaded, returning to edit form if (!req.body.image_id) { @@ -135,20 +137,20 @@ function create_direct(req, res) { } return; } - var image = new cloudinary.PreloadedFile(req.body.image_id); + let image = new cloudinary.PreloadedFile(req.body.image_id); // check that image resolved from image_id is valid if (image.is_valid()) { photo.image = image.toJSON(); console.dir(photo.image); } - photo.save().then(function () { + photo.save().then(() => { console.log('** photo saved'); }) - .catch(function (err) { + .catch((err) => { result.error = err; console.log('** error while uploading file'); console.dir(err); - }).finally(function () { + }).finally(() => { res.render('photos/create_direct', { photo: photo, upload: photo.image }); }); } @@ -160,7 +162,7 @@ module.exports.wire = function (app) { // upload to server example app.get('/photos/add', add_through_server); - app.post('/photos', multipartMiddleware, create_through_server); + app.post('/photos', upload.single('image'), create_through_server); // direct photo upload examples app.get('/photos/add_direct', add_direct); diff --git a/samples/photo_album/env.sample b/samples/photo_album/env.sample index dbecf244..c4255665 100644 --- a/samples/photo_album/env.sample +++ b/samples/photo_album/env.sample @@ -1,3 +1,4 @@ PORT=9000 CLOUDINARY_URL=cloudinary://xxxx -# rename this file to .env + +# Rename this file to .env and add your Cloudinary URL diff --git a/samples/photo_album/package.json b/samples/photo_album/package.json index 3c2aec03..86e21e37 100644 --- a/samples/photo_album/package.json +++ b/samples/photo_album/package.json @@ -4,25 +4,25 @@ "description": "Cloudinary Express demo", "main": "server.js", "scripts": { - "debug": "./node_modules/.bin/supervisor -e 'js|ejs|node' server.js" + "dev": "nodemon -e 'js,ejs' server.js" }, "author": "", "license": "ISC", "dependencies": { - "body-parser": "^1.5.2", - "cloudinary": "^1.3.0", - "connect-multiparty": "^1.1.0", - "cloudinary-jquery-file-upload": "^2.0.1", - "dotenv": "^0.4.0", - "ejs": "^3.1.6", + "@cloudinary/url-gen": "^1.21.0", + "cloudinary": "^2.5.1", + "cloudinary-jquery-file-upload": "^2.13.1", + "dotenv": "^16.4.5", + "ejs": "^3.1.10", "ejs-locals": "^1.0.2", - "express": "^4.7.2", - "jugglingdb": "^1.0.1", - "jugglingdb-mongodb": "^0.1.1", - "method-override": "^2.1.2" + "express": "^4.21.1", + "jugglingdb": "^2.0.1", + "jugglingdb-mongodb": "^0.2.0", + "method-override": "^3.0.0", + "multer": "^1.4.5-lts.1" }, "devDependencies": { - "supervisor": "^0.6.0" + "nodemon": "^3.1.7" }, "overrides": { "jugglingdb-mongodb": { diff --git a/samples/photo_album/public/cloudinary_cors.html b/samples/photo_album/public/cloudinary_cors.html index 61e48e5b..255ea61b 100644 --- a/samples/photo_album/public/cloudinary_cors.html +++ b/samples/photo_album/public/cloudinary_cors.html @@ -22,7 +22,199 @@ NOT CONTROL. */ -var JSON;if(!JSON){JSON={}}(function(){function str(a,b){var c,d,e,f,g=gap,h,i=b[a];if(i&&typeof i==="object"&&typeof i.toJSON==="function"){i=i.toJSON(a)}if(typeof rep==="function"){i=rep.call(b,a,i)}switch(typeof i){case"string":return quote(i);case"number":return isFinite(i)?String(i):"null";case"boolean":case"null":return String(i);case"object":if(!i){return"null"}gap+=indent;h=[];if(Object.prototype.toString.apply(i)==="[object Array]"){f=i.length;for(c=0;c=0?b=atob(a.split(",")[1]):b=decodeURIComponent(a.split(",")[1]),f=new ArrayBuffer(b.length),g=new Uint8Array(f);for(h=0;h { + try { + return Boolean(new Blob()); + } catch { + return false; + } + })(); + + const isUint8ArrayBlobSupported = isBlobSupported && global.Uint8Array && (() => { + try { + return new Blob([new Uint8Array(100)]).size === 100; + } catch { + return false; + } + })(); + + const BlobBuilder = global.BlobBuilder || global.WebKitBlobBuilder || global.MozBlobBuilder || global.MSBlobBuilder; + + const dataURLtoBlob = (dataURL) => { + const [header, base64Data] = dataURL.split(","); + const isBase64 = header.indexOf("base64") >= 0; + const binaryString = isBase64 ? atob(base64Data) : decodeURIComponent(base64Data); + + const arrayBuffer = new ArrayBuffer(binaryString.length); + const uintArray = new Uint8Array(arrayBuffer); + + for (let i = 0; i < binaryString.length; i++) { + uintArray[i] = binaryString.charCodeAt(i); + } + + const mimeType = header.split(":")[1].split(";")[0]; + + return isBlobSupported ? new Blob([isUint8ArrayBlobSupported ? uintArray : arrayBuffer], { type: mimeType }) + : (() => { + const builder = new BlobBuilder(); + builder.append(arrayBuffer); + return builder.getBlob(mimeType); + })(); + }; + + if (global.HTMLCanvasElement && !canvasPrototype.toBlob) { + if (canvasPrototype.mozGetAsFile) { + canvasPrototype.toBlob = function (callback, mimeType, quality) { + if (quality && this.toDataURL && dataURLtoBlob) { + callback(dataURLtoBlob(this.toDataURL(mimeType, quality))); + } else { + callback(this.mozGetAsFile("blob", mimeType)); + } + }; + } else if (canvasPrototype.toDataURL && dataURLtoBlob) { + canvasPrototype.toBlob = function (callback, mimeType, quality) { + callback(dataURLtoBlob(this.toDataURL(mimeType, quality))); + }; + } + } + + if (typeof define === "function" && define.amd) { + define(() => dataURLtoBlob); + } else { + global.dataURLtoBlob = dataURLtoBlob; + } + +})(this); diff --git a/samples/photo_album/public/js/photo_album.js b/samples/photo_album/public/js/photo_album.js index 6e9e4b96..45058865 100644 --- a/samples/photo_album/public/js/photo_album.js +++ b/samples/photo_album/public/js/photo_album.js @@ -1,5 +1,5 @@ -$(document).ready(function () { - $('.toggle_info').click(function () { +$(document).ready(() => { + $('.toggle_info').click(() => { $(this).closest('.photo').toggleClass('show_more_info'); return false; }); diff --git a/samples/photo_album/server.js b/samples/photo_album/server.js index 1c3e9520..465259f9 100644 --- a/samples/photo_album/server.js +++ b/samples/photo_album/server.js @@ -1,27 +1,26 @@ // Load environment variables -require('dotenv').load(); +require('dotenv').config(); -var cloudinary = require('cloudinary').v2; +const { v2: cloudinary} = require('cloudinary'); if (typeof (process.env.CLOUDINARY_URL) === 'undefined') { - console.warn('!! cloudinary config is undefined !!'); - console.warn('export CLOUDINARY_URL or set dotenv file'); -} else { - console.log('cloudinary config:'); - console.log(cloudinary.config()); -} + console.warn('!! cloudinary config is undefined !!'); + console.warn('export CLOUDINARY_URL or set dotenv file'); + } else { + console.log('cloudinary config:'); + console.log(cloudinary.config()); + } console.log('-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --'); -var path = require('path'); -var express = require('express'); -var engine = require('ejs-locals'); -var bodyParser = require('body-parser'); -var methodOverride = require('method-override'); +const path = require('path'); +const express = require('express'); +const engine = require('ejs-locals'); +const methodOverride = require('method-override'); require('./config/schema'); // Start express server -var app = express(); -app.use(bodyParser.json()); -app.use(bodyParser.urlencoded({ extended: false })); +const app = express(); +app.use(express.json()); +app.use(express.urlencoded({ extended: false })); app.use(methodOverride()); app.use(express.static(path.join(__dirname, '/public'))); app.set('views', path.join(__dirname, '/views/')); @@ -32,7 +31,7 @@ app.set('view engine', 'ejs'); // Wire request 'pre' actions wirePreRequest(app); // Wire request controllers -var photosController = require('./controllers/photos_controller'); +const photosController = require('./controllers/photos_controller'); photosController.wire(app); @@ -40,8 +39,8 @@ photosController.wire(app); wirePostRequest(app); function wirePreRequest(application) { - application.use(function (req, res, next) { - console.log(req.method + " " + req.url); + application.use((req, res, next) => { + console.log(`${req.method} ${req.url}`); res.locals.req = req; res.locals.res = res; @@ -56,13 +55,13 @@ function wirePreRequest(application) { } function wirePostRequest(application) { - application.use(function (err, req, res, next) { + application.use((err, req, res, next) => { if (err.message && (err.message.indexOf('not found') !== -1 || err.message.indexOf('Cast to ObjectId failed') !== -1)) { return next(); } - console.log('error (500) ' + err.message); + console.log(`error (500) ${err.message}`); console.log(err.stack); - if (err.message.indexOf('CLOUDINARY_URL') !== -1) { + if (err.message.includes('CLOUDINARY_URL')) { res.status(500).render('errors/dotenv', { error: err }); } else { res.status(500).render('errors/500', { error: err }); @@ -72,7 +71,7 @@ function wirePostRequest(application) { } // Assume 404 since no middleware responded -app.use(function (req, res, next) { +app.use((req, res) => { console.log('error (404)'); res.status(404).render('errors/404', { url: req.url, @@ -80,6 +79,6 @@ app.use(function (req, res, next) { }); }); -var server = app.listen(process.env.PORT || 9000, function () { - console.log('Listening on port %d', server.address().port); +const server = app.listen(process.env.PORT || 9000, () => { + console.log(`Listening on port ${server.address().port}`); }); diff --git a/samples/photo_album/views/layouts/default.ejs b/samples/photo_album/views/layouts/default.ejs index 4d105864..85a5d159 100644 --- a/samples/photo_album/views/layouts/default.ejs +++ b/samples/photo_album/views/layouts/default.ejs @@ -15,7 +15,7 @@
<%-body%> diff --git a/samples/photo_album/views/photos/add_direct.ejs b/samples/photo_album/views/photos/add_direct.ejs index e3ac72d9..6a7bdb5f 100644 --- a/samples/photo_album/views/photos/add_direct.ejs +++ b/samples/photo_album/views/photos/add_direct.ejs @@ -76,7 +76,7 @@ }) .off("cloudinarydone").on("cloudinarydone", function (e, data) { $(".status").text(""); - var preview = $(".preview").html(''); + let preview = $(".preview").html(''); $.cloudinary.image(data.result.public_id, { format: data.result.format, width: 50, height: 50, crop: "fit" }).appendTo(preview); @@ -104,7 +104,7 @@ function view_upload_details(upload) { // Build an html table out of the upload object - var rows = []; + let rows = []; $.each(upload, function(k,v){ rows.push( $("") diff --git a/samples/photo_album/views/photos/add_direct_unsigned.ejs b/samples/photo_album/views/photos/add_direct_unsigned.ejs index 8ceca3ad..01a78850 100644 --- a/samples/photo_album/views/photos/add_direct_unsigned.ejs +++ b/samples/photo_album/views/photos/add_direct_unsigned.ejs @@ -76,7 +76,7 @@ }) .off("cloudinarydone").on("cloudinarydone", function (e, data) { $(".status").text(""); - var preview = $(".preview").html(''); + let preview = $(".preview").html(''); $.cloudinary.image(data.result.public_id, { format: data.result.format, width: 50, height: 50, crop: "fit" }).appendTo(preview); @@ -104,7 +104,7 @@ function view_upload_details(upload) { // Build an html table out of the upload object - var rows = []; + let rows = []; $.each(upload, function(k,v){ rows.push( $("") diff --git a/samples/photo_album/views/photos/create_direct.ejs b/samples/photo_album/views/photos/create_direct.ejs index 4d67e6d3..0f710d55 100644 --- a/samples/photo_album/views/photos/create_direct.ejs +++ b/samples/photo_album/views/photos/create_direct.ejs @@ -14,7 +14,7 @@

Upload metadata:

- <% for (var attr in upload){%> + <% for (let attr in upload){%> <% }%>
<%= attr %><%= JSON.stringify(upload[attr])%>
diff --git a/samples/photo_album/views/photos/create_through_server.ejs b/samples/photo_album/views/photos/create_through_server.ejs index f002a77a..fe04b801 100644 --- a/samples/photo_album/views/photos/create_through_server.ejs +++ b/samples/photo_album/views/photos/create_through_server.ejs @@ -14,7 +14,7 @@

Upload metadata:

- <% for (var attr in upload){%> + <% for (let attr in upload){%> <% }%>
<%= attr %><%= JSON.stringify(upload[attr])%>
diff --git a/samples/photo_album/views/photos/index.ejs b/samples/photo_album/views/photos/index.ejs index d50bb1d6..f1f1c26a 100644 --- a/samples/photo_album/views/photos/index.ejs +++ b/samples/photo_album/views/photos/index.ejs @@ -34,8 +34,8 @@

No photos were added yet.

<% } else { %>
    - <% for(var i=0; i - <% var photo = photos[i] ; %> + <% for(let i=0; i + <% let photo = photos[i] ; %>

    <%= photo.title %>

    @@ -49,7 +49,7 @@
    Hide transformations - <% var transformations = [ + <% const transformations = [ { crop : "fill", radius : 10, height : 150, width : 150 }, { crop : "scale", height : 150, width : 150 }, { crop : "fit", height : 150, width : 150 }, @@ -66,7 +66,7 @@
    - <% for (var key in image_params){%> + <% for (let key in image_params){%> diff --git a/samples/readme.md b/samples/readme.md index fd9db745..bfa34525 100644 --- a/samples/readme.md +++ b/samples/readme.md @@ -8,7 +8,7 @@ The basic sample uploads local and remote image to Cloudinary and generates URLs 1. Before running the sample, copy the Environment variable configuration parameters from Cloudinary's [Management Console](https://cloudinary.com/console) of your account into `.env` file of the project or export it (i.e. export CLOUDINARY_URL=xxx). 1. Run `npm install` in project directory to bring all the required modules. -1. Run the sample using `node basic.js`. +1. Run the sample using `npm run start`. ## Photo Album sample @@ -19,8 +19,8 @@ See [schema.js](photo_album/config/schema.js) for adapter configuration. ### Setting up 1. Before running the sample, copy the Environment variable configuration parameters from Cloudinary's [Management Console](https://cloudinary.com/console) of your account into `.env` file of the project or export it (i.e. export CLOUDINARY_URL=xxx). 1. In the project directory, run `npm install` to install all the required dependencies. -1. Run `npm start` to start the server , if you want to run a - development mode server (autoreload) run `node run-script debug`. +1. Run `npm start` to start the server , and if you want to run a + development mode server (which reloads automatically) run `npm run dev`. 1. Open the sample page in a browser: http://localhost:9000
    <%= key %> <%= JSON.stringify(image_params[key]) %>