Nrthugu

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.