How to acces the images in the portal

[aaradhyamas]

Hi guys , I got an requirement from my team where I want to upload images to the servicenow and the members of that organisation can fetch those images and videos through service now portal , and those images and videos should be downloadable , please help to configure this problem 

[Ankur Bawiskar]

@aaradhyamas 

what's the business requirement for them to access and download?

you can upload images & videos to db_image & db_video table

check this link

How to add a video to a Portal page 

check this video

https://www.youtube.com/watch?v=e-Twv_I7l7I

If my response helped please mark it correct and close the thread so that it benefits future readers.

[Ankur Bawiskar]

@aaradhyamas 

Hope you are doing good.

Did my reply answer your question?

If my response helped please mark it correct and close the thread so that it benefits future readers.

[aaradhyamas]

I want to create a image liberary widget where input the user name and the data get fetch , i m doing this but my code isnt working it showing no images again and again

html 

<div class="container bg-light p-3 rounded">
<div class="row mb-3">
<div class="col-md-12">
<input type="text" class="form-control mb-2" placeholder="Enter User Name" id="test">
<button class="btn btn-primary float-end" ng-click="loadUserImages();">Load Images</button>
</div>
</div>

<div ng-if="data.initialSearch && data.noFiles" class="alert alert-danger text-center">
❌ No images found.
</div>

<div class="text-end mb-2" ng-if="!data.noFiles">
<button class="btn btn-success" ng-click="c.downloadAll()">⬇️ Bulk Download All</button>
</div>

<div class="row">
<div class="col-md-3 mb-3" ng-repeat="file in data.files">
<div class="card p-2 text-center shadow-sm">
<img
ng-click="c.togglePreview(file)"
ng-src="/api/now/attachment/{{file.sys_id}}/file"
class="img-thumbnail mb-2"
style="width: 60px; height: 60px; object-fit: cover; cursor: pointer;"
alt="{{file.name}}"
>
<h6 class="mb-1">{{file.name}}</h6>
<small class="text-muted">Uploaded on {{file.uploaded_on}}</small>
</div>
</div>
</div>

<!-- Image preview overlay -->
<div class="preview-overlay" ng-if="c.previewFile" ng-click="c.closePreview()">
<img
ng-src="/api/now/attachment/{{c.previewFile.sys_id}}/file"
class="preview-image"
alt="{{c.previewFile.name}}"
>
<div class="preview-close">Click anywhere to close</div>
</div>
</div>

client script

function ($scope, $timeout) {

  $scope.c = this;

  $scope.c.previewFile = null;

  $scope.data.initialSearch = false;

  $scope.data.noFiles = true;

  $scope.c.togglePreview = function (file) {

    $scope.c.previewFile = file;

  };

  $scope.c.closePreview = function () {

    $scope.c.previewFile = null;

  };

  $scope.loadUserImages = function () {

var user = document.getElementById('test').value;

alert(user)

    // $scope.data.initialSearch = true;

    var username = (user || '').trim().toLowerCase();

    $scope.server.update({ username: username }).then(function(response) {

      $scope.data.files = response.data.files || [];

      // $scope.data.noFiles = $scope.data.files.length === 0;

    });

  };

$scope.c.downloadAll = function () {

    if ($scope.data.files && $scope.data.files.length) {

      $scope.data.files.forEach(function (file) {

        var link = document.createElement('a');

        link.href = '/api/now/attachment/' + file.sys_id + '/file?download=true';

        link.download = file.name;

        link.target = '_self';

        document.body.appendChild(link);

        link.click();

        document.body.removeChild(link);

      });

    }

  };

}

server script 

(function() {
data.files = [];
data.noFiles = true;
data.initialSearch = true;

if (input && input.username) {
var username = input.username.toLowerCase();

var gr = new GlideRecord('u_u_drive_files');
gr.addQuery('u_uploaded_by.user_name', username); // dot-walk into reference field
gr.query();

while (gr.next()) {
var attach = new GlideRecord('sys_attachment');
attach.addQuery('table_name', 'u_u_drive_files');
attach.addQuery('table_sys_id', gr.getUniqueValue());
attach.query();

while (attach.next()) {
var name = attach.getValue('file_name');
var ext = name.split('.').pop().toLowerCase();
if (["jpg", "jpeg", "png", "gif", "webp"].includes(ext)) {
data.files.push({
sys_id: attach.getValue('sys_id'),
name: name,
uploaded_on: gr.getDisplayValue('sys_created_on'),
uploader: gr.getDisplayValue('u_uploaded_by')
});
}
}
}

data.noFiles = data.files.length === 0;
}
})();