Get picture from picture field on a form though a script

[xif1]

Hello,

I added a field type : image

like this :

It's available on some other part of service now, like to upload the logo.

I would like to get this value.

My need:

I built a widget show some data, and I want to retrieve the picture attached to the record to show it on service portal

Anyone i've done this before ?

[johansec]

How did you upload the picture? As an attachment? or are you asking how to upload and retrieve?

What kind of form are you using? ( the form widget, a record producer, a catalog item)

[xif1]

Hi corey, thank you for your answer and to try to help me

I added a field wtih type : image on kb article.

It's not an attachment, it's a image field where you can click, then upload a picture. same as if you go to :

menu :

service portal -> Worker portal :   you see you ca upload a logo. it's the same type of field.

I wanted to script and get this image (the url where it's hosted) to show it on my widget

[johansec]

I did some research they do not make this a simple process.

Here is what I have found. It appears that all of the banner images, icons, etc are stored in the sys_attachment table.

In service portal you can use the attachments handler to do this for you.

When you submit the file via snattachmenthandler, you will use the response to save a reference to it for later use.

I suggest creating a dummy widget to test this and figure out if this can be used for what you are attempting to do.

in the HTML of the widget paste this

<input ng-show="false" type="file" ng-file-select="attachFiles({files: $files})" />

    <button ng-click="uploadNewProfilePicture($event)"

    ng-keypress="uploadNewProfilePicture($event)" type="button"

    class="btn btn-default send-message">${Upload Picture}</button>

In the client controller paste this

function($scope, $element, $window, $location, $rootScope, $timeout, snAttachmentHandler, $http, spUtil,$filter) {

    /* widget controller */

    var c = this;

    $scope.uploadNewProfilePicture = function($event) {

    $event.stopPropagation();

    var $el = $element.find('input[type=file]');

    $el.click();

  }

    $scope.attachFiles = function(files) {

    console.dir(snAttachmentHandler);

    snAttachmentHandler.create().uploadAttachment(files.files[0], {

    sysparm_fieldname: "coreysIMg"

  }).then(function(response) {

    console.log(response);

  });

  }

  }

Here is the response logged in the developer console

When you click the button click f12 and examine the response. Also examine what is stored in the sys_attachment table.

I found this code in the user profile widget. How they store your profile picture.

Here is a thread where a guy managed to use this

SP Widget multiple <sp-attachment-button> needed

Hope this helps at all.

[xif1]

Hello,

Thank you for your time but I think there is a misunderstood.

I don't want to create a widget such as 'click to add', to attach something from the portal.

Let's sum a little bit :

Back end : I'm on a knowledge article, I have my customized field, picture, with image type, this field allow a user to click and add a image. This image is hosted in service now. So on each kb article, I can 'attached' (no as an attachment but though this field) a picture.

Front end : I have a widget, which showing kb article. You can see the title (retrieved, it works), the text article (retrieved it works) and I wanted to add a preview image, this one should be the picture uploaded and attach to the article though the field picture.

here a screenshot to visualize