https://discord.umbraco.com
Join Discord
Custom Plugin is only working in Debug Mode
# help-with-umbraco
d
I created a custom Umbraco property and it's working in my local ,but it's not in another environment because "Hosting": {"Debug": false } for the other environments, how we can solve this issue?
m
have you checked your 
runtime minification
settings doesn't mean you have cached backoffice files? https://docs.umbraco.com/umbraco-cms/reference/configuration/runtimeminificationsettings
d
@Mike Chambers Yes i tried this Tried with this "RuntimeMinification": { "UseInMemoryCache": true, "CacheBuster": "Timestamp" } & "RuntimeMinification": { "UseInMemoryCache": true, "CacheBuster": "Version", "Version": "89545" }
m
just checking... is that in your appsettings.{otherEnvironementName}.json? (for the environment specific overrides).. you should be able to see version cache busting changing in the source like here`<link href="/umbraco/assets/css/umbraco.min.css?d=638282982600000000"` the d param would change if you changed the Version, or every 15secs I think with timestamp.
I guess the next q, is what do you actually mean by not working? 😉 (property just not there when editing, angular code not firing, a.n.other issue...)
d
Here is my code in js $scope.onFileSelect = function (event) { $scope.isFileUploading = true; var files = event.target.files; var file = files[0]; if (file.type == 'text/csv' || file.type == 'csv') { readCsvFile(file)//function for reading the file .then(function (dataArray) { $scope.model.value = dataArray; $scope.isFileUploading = false; }) .catch(function (error) { console.error('Error reading CSV file:', error); $scope.isFileUploading = false; }); } else { $scope.isFileInvalid = true; $scope.isFileUploading = false; } }; HTML -------- it is working in all the environments if the debug mode is true, but if it's false then this error will thrown angular.element(this).scope().onFileSelect(event) (index):1 Uncaught TypeError: Cannot read properties of undefined (reading 'onFileSelect') at HTMLInputElement.onchange
@Mike Chambers
m
how are you including your js file?
via a package.manifest or coded?
I've not really seen this 
onchange="angular.element(this).scope().onFileSelect(event)"
before.. I'd be used to seeing the just 
onchange="onFileSelect(event)"
and a wrapping container with 
ng-controller=XXX
if locally changing debug = false causes the issue... then I'd still be thinking it's the combined/minified backoffice js that is missing your angular js file addition .. so back to cacheing or something else.
I think the combined/minified production file would be 
/sb/umbraco-backoffice-js.js.v11111111111
try taking a look there to see if you code is present?
d
@Mike Chambers - Using package.manifest - I tried this also. - Sure
@Mike Chambers from where we can explore this file?
m
my appologies just checked with one of mine.. and it gets injected into 
umbraco-backoffice-extensions.js.v{current cache version}
from a corresponding 
package.manifest
d
@Mike Chambers so which file i need to check? is this one umbraco-backoffice-extensions.js?
m
yep if all working correctly for production then your js files listed in the package manifest should get incorporated into 
umbraco-backoffice-extensions.js
d
@Mike Chambers i can't see the file that you mentioned
m
generated file by smidge the 3rd party backoffice comile and minify.. so will be in /sb/
(that previous file.. sb/umbraco-backoffice-js.js is smidge doing it's job to compile and minifiy the core umbraco js files you have listed there.. in the screen shot.)
on your local site running with debug :false if you view source in the backoffice you will see a script include 
<script src="/umbraco/Application?umb__rnd=25e6204fc05a401fc99b98880416eec8637853c3"></script>
if you browse to that.. you'll see something like
Copy code
LazyLoad.js(["/sb/umbraco-backoffice-js.js.v638283069200000000","/sb/umbraco-backoffice-extensions-js.js.v638283069200000000","/sb/migrations-js.js.v638283069200000000","/App_Plugins/uSync/usync.11.2.1.min.js?v=638283069200000000"],function(){if((typeof UmbClientMgr)!=="undefined"){UmbClientMgr.setUmbracoPath('/umbraco');}
jQuery(document).ready(function(){angular.bootstrap(document,['umbraco']);});});LazyLoad.css('/sb/umbraco-backoffice-css.css.v638283069200000000');LazyLoad.css('/sb/migrations-css.css.v638283069200000000');LazyLoad.css('/App_Plugins/uSync/usync.11.2.1.min.css?v=638283069200000000');;
if you have debug set to true.. then instead of those large single files.. you'll have all the indvidual components.. like
message
d
yes, i got the file under /sb/umbraco-backoffice-extensions-js.js.vfce205a11d510727910f27f5d015a53c4244da18
m
and is your code in there?
d
and i can see my code for the custom plugin
yes
m
and your plugin is in the backOffice?
d
yes
m
then I guess it;s how you are calling that function?
from the html?
d
This is the HTMl File Input and this is the function in controller(js) $scope.onFileSelect(event)
m
like I say I've not seen that approach before.. how are you associating the angual controller to that input to have the extension method on the input?
d
I actually tried with ng-change and it's not working then i see this approach in the internet & tried & it works in local
m
what's you complete html?
and the complete js?
d
<umb-tags-editor value="model.value" config="model.config" validation="model.validation" on-value-changed="valueChanged(value)" culture="model.culture" input-id="{{model.alias }}"> click file type is invalid,please upload csv file
m
so your angular controller is 
Dk.CSV.Upload.TagController as vm
?
d
yes
m
so why not do 
vm.OnFileSelect = onFileSelect
in your js and 
onClick="vm.OnFileSelect(event)
in the html?
maybe it's a collision with having several wrapping ng-controllers?
d
I tried this :), but not get worked!
m
have you tried removing the tag controller bit.. and just having your ng-controller wrapping the input?
d
yes, i tried , but will try once again so we can make sure
m
other than that.. I don't think I can be of anymore help.. as that's what I have, maybe posting your complete js file might help someone with more angular knowledge work it out.?
d
no, the same error
sure
Controller ---------------------- angular.module('umbraco').controller('Dk.CSV.Upload.TagController', function ($scope, contentEditingHelper) { $scope.contentEdithelperScope = contentEditingHelper; $scope.nodeid_fortimeout; $scope.isFileUploading = false; $scope.isFileInvalid = false; let values= $scope.model.value; $scope.onFileSelect = function (event) { $scope.isFileUploading = true; var files = event.target.files; var file = files[0]; if (file.type == 'text/csv' || file.type == 'csv') { readCsvFile(file) .then(function (dataArray) { $scope.model.value = dataArray; $scope.isFileUploading = false; }) .catch(function (error) { console.error('Error reading CSV file:', error); $scope.isFileUploading = false; }); } else { $scope.isFileInvalid = true; $scope.isFileUploading = false; } }; function readCsvFile(file) { return new Promise(function (resolve, reject) { var reader = new FileReader(); reader.onload = function (event) { var csvData = event.target.result; var lines = csvData.split(/\r\n|\n/); var dataArray = []; // Skip the header row by starting the loop from index 1 for (var i = 0; i < lines.length; i++) { var fields = lines[i].split(','); for (var j = 0; j < fields.length; j++) { if (fields[j].length > 0) dataArray.push(fields[j]); } } $scope.model.value = dataArray; resolve(dataArray); }; reader.onerror = function (event) { reject(event.target.error); }; reader.readAsText(file); }); } });
HTML ------------ <umb-tags-editor value="model.value" config="model.config" validation="model.validation" on-value-changed="valueChanged(value)" culture="model.culture" input-id="{{model.alias }}"> click file type is invalid,please upload csv file
m
hmm.. I have something a little different to that.
tried to simplyfy it a little.
Copy code
json
(function () {
    "use strict";

    function InviteUserToPlot($scope, formHelper, overlayService, navigationService, resource, editorState, notificationsService) {
        var vm = this;
        vm.submit = submit;

        function submit(addUserForm) {
            if (formHelper.submitForm({ scope: $scope, formCtrl: addUserForm })) {
                vm.submitButtonState = "busy";
                resource.sendPlotConfigurationInvite(vm.newUser).then(function (data) {
                    vm.submitButtonState = "init";
                    close();
                    notificationsService.success("Invite Sent", `An invitation was sent to ${vm.newUser.email}`);
                }, function (error) {
                    formHelper.handleError(error);
                    vm.submitButtonState = "error";
                });
            }
        }

        function close() {
            navigationService.hideDialog();
        }
    }

    angular.module("umbraco")
        .controller("SM.InviteUserToPlot",
            ['$scope', 'formHelper', 'overlayService', 'navigationService', 'SM.InviteToConfigurePlotResource', 'editorState', 'notificationsService'
                , InviteUserToPlot]
        );
})();
as you are just adding to $scope.. do you need the 
Dk.CSV.Upload.TagController as vm
.. and should just be 
Dk.CSV.Upload.TagController
🤷
d
yeah, i think i tried different ways and might be removed this 🙂
m
maybe go right back to basics? and just get your method logging to console?
but odd it's working when in debug.. and not when not.
d
The controller is loaded , but the function is not triggered (that's the issue in debug mode)
yes 🙂
m
sorry I couldn't unpick it for you...
d
@Mike Chambers actually if i used ng- then it will work see below click in this situation the function will get trigger , but iam using file upload so we need to use onchange event, ng-change is not working , so i used the alternative method(and only working in debug mode)
m
one thought.. do you need to wrap everything in your controller? eg this instead. to scope your controller to your input
Copy code
<div class='umb-single-file-upload'>
    <div ng-controller="Umbraco.PropertyEditors.TagsController" class="umb-property-editor umb-tags">
        <umb-load-indicator ng-if="isFileUploading"></umb-load-indicator>

        <umb-tags-editor value="model.value" config="model.config" validation="model.validation"
            on-value-changed="valueChanged(value)" culture="model.culture" input-id="{{model.alias
                }}">
        </umb-tags-editor>
        <div ng-controller="Dk.CSV.Upload.TagController as vm" class="tagcsvwrapper">
            <input type="file" id="uploadcsv" accept="text/csv"
                onchange="angular.element(this).scope().onFileSelect(event)" class="fileuploadcsv">
            <h1 onclick="angular.element(this).scope().onFileSelect(event)">click</h1>
            <span style="color:red;" ng-if="isFileInvalid">file type is invalid,please upload csv file</span>
        </div>
    </div>
</div>
d
yes i tried this as well, but 😩
m
var innerTemplate = ""; and a watcher for the changing...
infact.. are you just wanting to restrict to csv?
so can't you just adjust
Copy code
<umb-single-file-upload
        accept-file-ext="vm.acceptFileExt"
        ng-attr-readonly="{{ vm.readonly || undefined }}">
      </umb-single-file-upload>
I think accept-file-ext is just an array.. so
Copy code
<umb-single-file-upload
        accept-file-ext="['csv']"
        ng-attr-readonly="{{ vm.readonly || undefined }}">
      </umb-single-file-upload>
d
@Mike Chambers can we call our function on -change ?
m
🤷
though must be a reason why Umbraco HQ in core opted for,,
Copy code
scope.$watch("rebuild", function (newVal, oldVal) {
                if (newVal && newVal !== oldVal) {
                    //recompile it!
                    el.html(innerTemplate);
                    $compile(el.contents())(scope);
                }
            });

            scope.handleClick = function ($event) {
                if (scope.readonly) {
                    $event.preventDefault();
                    $event.stopPropagation();
                }
            };
d
sorry iam a new bie in angular js
m
I've only learned what I had to.. so not that much further on 🙂
d
@Mike Chambers how we can use it in our custom plugin ? do i need to create the same way in the controller?
m
so looking at the template there.. it's got another directive on it.. umb-file-upload
which is presuably in play too.
it all looks a little convoluted to me, and beyond my ken.
in case that helps ????
as this looks like you could reuse?
Copy code
<umb-property-file-upload 
            culture="{{model.culture}}"
            segment="{{model.segment}}"
            property-alias="{{model.alias}}"
            value="model.value.src"
            required="model.validation.mandatory"
            on-files-selected="filesSelected(value, files)"
            on-files-changed="filesChanged(files)"
            on-init="fileUploaderInit(value, files)"
            hide-selection="true"
            accept-file-ext="acceptFileExt"
            ng-attr-readonly="{{ readonly || undefined }}">
d
ok, @Mike Chambers it's kind of confusion for me :), I checked once these code before implementing due to the complexity i just go with the simple approach, anyway i really appreciate your time & help @Mike Chambers , i will let you know the progress here 🙂
m
🤞
85 Views
PreviousNext
Powered by

Umbraco

A hub and casual space for you to interact with fellow community members and learn more about Umbraco!

Powered by