Skip to content

Instantly share code, notes, and snippets.

@AlexDoanTB
Created February 14, 2020 09:07
Show Gist options
  • Select an option

  • Save AlexDoanTB/831611f0ce61e2909b277f7eced7505f to your computer and use it in GitHub Desktop.

Select an option

Save AlexDoanTB/831611f0ce61e2909b277f7eced7505f to your computer and use it in GitHub Desktop.
Entity info button settings for ThingsBoard Custom action configuration
CSS
.tb-image-select-wrapper {
width: 100%;
margin-bottom: 32px;
}
.tb-image-select-wrapper>label {
display: none;
}
.tb-image-select-wrapper>label.show-label {
display: block;
}
.tb-image-preview-container,
.tb-flow-drop {
box-sizing: border-box;
}
.tb-image-preview {
max-width: 98px;
max-height: 98px;
}
.tb-image-preview-container div,
.tb-flow-drop label {
font-size: 16px;
}
JavaScript
vm.imageAdded = function ($file) {
var reader = new FileReader();
reader.onload = function(event) {
$scope.$apply(function() {
if (event.target.result && event.target.result.startsWith('data:image/')) {
$scope.editEntityForm.$setDirty();
vm.attributes.image = event.target.result;
}
});
};
reader.readAsDataURL($file.file);
};
HTML
<div class="md-dialog-content">
<div class="tb-image-select-wrapper">
<div flow-init="{singleFile:true}" flow-file-added="vm.imageAdded($file)" class="tb-image-select-container">
<div class="tb-image-preview-container">
<img class="tb-image-preview" src="{{vm.attributes.image}}"/>
</div>
<div class="tb-flow-drop" flow-drop>
<label for="select" translate>dashboard.drop-image</label>
<input class="file-input" flow-btn flow-attrs="{accept:'image/*'}" id="select">
</div>
</div>
</div>
@Stef-Canada
Copy link

Do you have an applicable version for Thingsboard 3.x ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment