Odtnhj

I'm integrating the cloudinary upload widget v2.0 into my angular app. To achieve this, I've created a service (to call some backend Cloudinary calls) and a directive (to link the upload widget to specific buttons).

Everything works fine until now, but I want to add an extra feature: The search field in the "google search" tab of the upload widget should be prefilled (based on what the user selected on the page).

I'm wondering how I can easily access this search field from my angular directive to update the value, while the upload widget isn't made in angular.

I already tried to use angular.element and find the search field based on some classes, but this doesn't seem to work.

$scope.uploadWidgetSearchField = angular.element($document[0].querySelector(".text-field.search-input"));
$scope.uploadWidgetSearchField.val("TEST VALUE"); // Test 1
$scope.uploadWidgetSearchField.replaceWith("<h2>TEST</h2>"); // Test 2

Service

angular.module('cloudinaryModule', [
 'cloudinary',
 'gimmi.config'
])
 .provider('cloudinaryService', ['CONFIG', function(CONFIG)
 var _self = this;
 /** Set default options for Cloudinary upload widget.
 * All options can be found at: https://cloudinary.com/documentation/upload_widget#cloudinary_openuploadwidget_options_resultcallback
 */
 var widgetOptions = 
 sources: ['local', 'image_search', 'url'],
 defaultSource: 'image_search',
 resourceType: 'image',
 multiple: false,
 theme: "minimal",
 showPoweredBy: false, //Note: Supported only for paid Cloudinary accounts and requires some time for cache expiration.
 showAdvancedOptions: false,
 showCompletedButton: false
 ;

 _self.setOption = function (key, value)
 widgetOptions[key] = value;
 return _self;
 
 _self.$get = ['$http', function($http)
 var clsrv = ;

 /** Get a signature for a signed upload to Cloudinary */
 clsrv.getSignature = function (callback, params_to_sign) 
 $http.post(CONFIG.apiUrl + '/api/images/signature', params_to_sign)
 .then((results) => 
 var signature = results.data;
 callback(signature);
 );
 

 /** 
 * Create a cloudinary upload widget 
 * @function createWidget
 * @param String publicId A dynamically chosen publicId
 * @param function callback A callback function with arguments error and results to handle events in the upload widget
 * @return CloudinaryUploadWidget
 * */
 clsrv.createWidget = function(publicId, callback) 
 if (publicId) 
 widgetOptions.publicId = publicId;
 
 widgetOptions.uploadSignature = clsrv.getSignature;
 return cloudinary.createUploadWidget(widgetOptions, callback);
 

 return clsrv;
 ];
]);

Directive

angular.module('cloudinaryModule')
 .directive('clUpload', ['cloudinaryService', function (cloudinaryService)
 return 
 restrict: 'AE',
 replace: false,
 scope: 
 searchTerm: '@',
 publicId: '@',
 imageResult: '=',
 onImageUpload: '&',
 onCancel: '&'
 , 
 link: function ($scope, $element, $attrs) 
 /** Create the upload widget on loading the directive */
 var widget = cloudinaryService.createWidget($scope.publicId, function (error, result) 
 if (result && result.event === "success") 
 var uploadedImage = 
 public_id: result.info.public_id,
 version: result.info.version
 ;
 if ($scope.imageResult) 
 $scope.$apply(function() 
 $scope.imageResult = uploadedImage;
 );
 
 if ($scope.onImageUpload) 
 $scope.$apply($scope.onImageUpload(uploadedImage));
 
 console.log("Uploaded image:", $scope.imageResult);
 widget.close( quiet: true );
 else if (error) 
 console.error(error);
 if ($scope.onCancel) 
 $scope.$apply($scope.onCancel(error));
 
 
 );

 /** On click on element: open the widget */
 $element.on('click', function () 
 widget.open();
 );
 
 
])

There isn't a direct method to prefill the search field. This is something that the user will need to fill directly.