Fix autocleanup for cloudinary fixes 3476 (#4205)

* Update `cloudinaryimage` to respect autocleanup

* Fixes autocleanup for cloudinaryimages

* Remove completed TODOs

fields/types/cloudinaryimage/CloudinaryImageField.js

@@ -287,13 +287,18 @@ module.exports = Field.create({
 		);
 	},
 
+	// This renders a hidden input that holds the payload data for how the field
+	// should be updated. It should be upload:{filename}, undefined, or 'remove'
 	renderActionInput () {
 		if (!this.shouldRenderField()) return null;
 
 		if (this.state.userSelectedFile || this.state.removeExisting) {
-			const value = this.state.userSelectedFile
-				? `upload:${this.state.uploadFieldPath}`
-				: '';
+			let value = '';
+			if (this.state.userSelectedFile) {
+				value = `upload:${this.state.uploadFieldPath}`;
+			} else if (this.state.removeExisting && this.props.autoCleanup) {
+				value = 'delete';
+			}
 			return (
 				<input
 					name={this.getInputName(this.props.path)}

fields/types/cloudinaryimage/CloudinaryImageType.js

@@ -385,8 +385,8 @@ cloudinaryimage.prototype.updateItem = function (item, data, files, callback) {
 	var value = this.getValueFromData(data);
 	var uploadedFile;
 
-	// Providing the string "remove" removes the file and resets the field
-	if (value === 'remove') {
+	// Providing the string "remove" or "delete" removes the file and resets the field
+	if (value === 'remove' || value === 'delete') {
 		cloudinary.uploader.destroy(item.get(field.paths.public_id), function (result) {
 			if (result.error) {
 				callback(result.error);
@@ -440,7 +440,6 @@ cloudinaryimage.prototype.updateItem = function (item, data, files, callback) {
 				filename = sanitize(filename);
 				uploadOptions.public_id = trimSupportedFileExtensions(filename);
 			}
-			// TODO: implement autoCleanup; should delete existing images before uploading
 			cloudinary.uploader.upload(uploadedFile.path, function (result) {
 				if (result.error) {
 					return callback(result.error);

fields/types/cloudinaryimages/CloudinaryImagesType.js

@@ -23,6 +23,28 @@ function truthy (value) {
 	return value;
 }
 
+/*
+* Uses a before and after snapshot of the images array to find out what images are no longer included
+*/
+function cleanUp (oldValues, newValues) {
+	var cloudinary = require('cloudinary');
+	var oldvalIds = oldValues.map(function (val) {
+		return val.public_id;
+	});
+	var newValIds = newValues.map(function (val) {
+		return val.public_id;
+	});
+
+	var removedItemsCloudinaryIds = _.difference(oldvalIds, newValIds);
+
+	// We never wait to return on the images being removed
+	async.map(removedItemsCloudinaryIds, function (id, next) {
+		cloudinary.uploader.destroy(id, function (result) {
+			next();
+		});
+	});
+};
+
 /**
  * CloudinaryImages FieldType Constructor
  */
@@ -249,13 +271,17 @@ cloudinaryimages.prototype.updateItem = function (item, data, files, callback) {
 	var cloudinary = require('cloudinary');
 	var field = this;
 	var values = this.getValueFromData(data);
+	var oldValues = item.get(this.path);
 
 	// TODO: This logic needs to block uploading of files from the data argument,
 	// see CloudinaryImage for a reference on how it should be implemented
 
 	// Early exit path: reset value when falsy, or bail if no value was provided
 	if (!values) {
 		if (values !== undefined) {
+			if (field.options.autoCleanup) {
+				cleanUp(oldValues, []);
+			}
 			item.set(field.path, []);
 		}
 		return process.nextTick(callback);
@@ -341,7 +367,6 @@ cloudinaryimages.prototype.updateItem = function (item, data, files, callback) {
 					public_id: value.originalname.substring(0, value.originalname.lastIndexOf('.')),
 				});
 			}
-			// TODO: implement autoCleanup; should delete existing images before uploading
 			cloudinary.uploader.upload(value.path, function (result) {
 				if (result.error) {
 					next(result.error);
@@ -356,6 +381,7 @@ cloudinaryimages.prototype.updateItem = function (item, data, files, callback) {
 			return next();
 		}
 	}, function (err, result) {
+		cleanUp(oldValues, values);
 		if (err) return callback(err);
 		result = result.filter(truthy);
 		item.set(field.path, result);