Picsum Demo

configure.js

export default defineComponent({
  async run({ steps, $ }) {
    return {
      "FieldIDs" : {
           "Dimensions": "abd8e376-904d-4d0a-974c-a59a51e29232",
           "Grayscale":"21f4c2c6-f9e6-4d5b-8b2a-3c14d5bc017b",
           "PicsumId":"c2e3239d-28eb-402b-b4a6-5cb72f7f3a48",
           "Blur":"668b46ea-740b-4c3e-bdb4-742286ebd254"
      },
      "WorkflowStates":{
        "Completed":"{A455D7F5-F182-477E-B4B1-712ADB294628}"
      },
      "WorkflowCommands": {
        "CompleteWorkflow": "{97b9d623-952a-404c-8c30-07f574016264}"
        }
    }
  },
})

Get_media_upload_url.js

import axios from "axios"
// To use previous step data, pass the `steps` object to the run() function
export default defineComponent({
  props: {
    data: {type: "data_store"}
  },
  async run({ steps, $ }) {
    // Return data to use it in future steps
    var url = process.env.NGROK_SITECORE_CM_URL;
    if (url.substr(-1) != '/') url += '/';
    url = url + 'sitecore/api/authoring/graphql/v1/';
    let token = await this.data.get("auth_code");
    return axios({
      url: url,
      method: 'post',
      headers: {
        "Authorization": "bearer " + token
      },
     
      data: { 
        query: `
         mutation {
    uploadMedia(input:
      {itemPath:"Images/Picsum/${steps.get_parameters.$return_value.id}", 
        alt:"Picsum Image #${steps.Save_picsum_image.$return_value.picsumid}",
        overwriteExisting:true})        
    {
        presignedUploadUrl
    }
}
         `
      },
    }).
    then((result) => { 
      return result.data;
    })
  },
})

get_parameters.js

// To use previous step data, pass the `steps` object to the run() function
export default defineComponent({
  async run({ steps, $ }) {
    // Return data to use it in future steps
    const sitecore_item = steps.trigger.event.body.DataItem;
    // Standard values aren't sent, so duplicated here.
    var blur = "0";
    var height = "720";
    var width = "1280";
    var grayscale = false;
    var picsumid;
    let fieldIDs = steps.configure.$return_value.FieldIDs
    for (var i in sitecore_item.SharedFields){
      
      var id = sitecore_item.SharedFields[i].Id;
      var value = sitecore_item.SharedFields[i].Value.toLowerCase();
      console.log(id + ":" + value);
      if (id === fieldIDs.Dimensions){         
        if (value && value.indexOf("x") > 0)
        { var pos = value.indexOf("x");
          width = value.substr(0,pos).trim();
          height = value.substr(pos + 1).trim();
        }
      }
      if (id === fieldIDs.Grayscale && value === "1")
      {
        grayscale = true;
      }
      if (value && id === fieldIDs.Blur)
      {
        blur = value;
      }
      if (value && id === fieldIDs.PicsumId)
      {
        picsumid = value;
      }
    }
    return {blur, height, width, grayscale, id:sitecore_item.Id, picsumid};
  },
})

Get_photo_url.js

// To use previous step data, pass the `steps` object to the run() function
import got from "got";

export default defineComponent({
  async run({ steps, $ }) {
    // Return data to use it in future steps


  const url = `https://picsum.photos/id/${steps.Save_picsum_image.$return_value.picsumid}/info`;

	const options = { 
		timeout: {
			send: 3500
		},
	};

	const data = await got(url, options).json();

	return data;
	}
	});

post_image_to_sitecore.js

import axios from "axios";
import fs from "fs";
import FormData from "form-data";


// To use previous step data, pass the `steps` object to the run() function
export default defineComponent({
  props: {
    data: {type: "data_store"}
  },
  async run({ steps, $ }) {
    // Return data to use it in future steps
    let token = await this.data.get("auth_code");
    const stream = await fs.createReadStream(steps.Save_picsum_image.$return_value.filepath)
    const form = new FormData();
    form.append('file', stream, "test.jpg");    
    const url = steps.Get_media_upload_url.$return_value.data.uploadMedia.presignedUploadUrl;
    //const body = {file: stream};
    const options = {headers: {"Authorization": "bearer " + token}}; 
    return (await axios.post(url, form, options)).data;     
  },
})

Refresh_auth_codes.js

import axios from 'axios';
import qs from 'qs';

export default defineComponent({
  props: {
    data: {type: "data_store"}
  },
  async run({ steps, $ }) {
    // Return data to use it in future steps
    let expiration_ms  = await this.data.get("expiration_ms");
    let deadline = new Date().getTime() - (60 * 1000); // subtract a minute from current time for buffer
    let expired = !(expiration_ms) || expiration_ms < deadline;
    console.log("expired? " + expired);

    if (expired)
    {      
      let data = qs.stringify({
          'password': process.env.SITECORE_PW,
          'grant_type': 'password',
          'username': process.env.SITECORE_USER,
          'client_id': 'postman-api',
          'scope': 'openid sitecore.profile sitecore.profile.api' 
        });

        let url = process.env.NGROK_SITECORE_ID_URL;
        if (url.substr(-1) != '/') { url += '/'};
        url += 'connect/token';
        let config = {
          method: 'post',
          maxBodyLength: Infinity,
          url,      
          headers: { 
            'Content-Type': 'application/x-www-form-urlencoded', 
            'Accept': 'application/json'
          },
          data : data
        };

        await axios.request(config)
          .then((response) => {
              this.data.set('auth_code', response.data.access_token);
              this.data.set('expiration_ms', new Date().getTime() + (response.data.expires_in * 1000)), 
              console.log("Data store updated.")
        })
        .catch((error) => {
          console.log(error);
        });
      }
    }
});
         

Save_picsum_image.js

import {pipeline as streamPipeline} from 'node:stream/promises';
import fs from "fs";
import got from "got";
import path from "path";
import queryString from "query-string";

export default defineComponent({
  async run({ steps, $ }) {
    
    var parms = steps.get_parameters.$return_value
    var url;
    if (parms.picsumid) {
      url = "https://picsum.photos/id/" + parms.picsumid + "/" + parms.width + "/" + parms.height;
    }
    else
    {
      url = "https://picsum.photos/" + parms.width + "/" + parms.height;
    }
     
    var q = {};
    if (parms.grayscale) { q.grayscale = 1; }
    if (parms.blur && parms.blur != "0") { q.blur = parms.blur; }
    var qs = queryString.stringify(q);
    if (qs) { url += "?" + qs }
  
    console.log("Url: " + url);
 
    var filePath = await path.join('/tmp', parms.id + ".jpg");
    console.log(filePath);

    const gotStream = got.stream.get(url);
    const outStream = fs.createWriteStream(filePath);
    var picsumid;
   
	  gotStream.on("response", async (response) => {
		  picsumid = await response.headers['picsum-id'];
	  });

    try {
      await streamPipeline(gotStream, outStream);
    } catch (error) {
      console.log(error);
    }
    return { "picsumid": picsumid, "filepath": filePath };
  }
});

update_image_link_and_workflow_state.js

import { axios } from "@pipedream/platform"; // See https://pipedream.com/docs/pipedream-axios/#using-pipedream-platform-axios-in-component-actions
// To use previous step data, pass the `steps` object to the run() function
export default defineComponent({
  props: {
    data: {type: "data_store"}
  },
  async run({ steps, $ }) {
    // Return data to use it in future steps
    var itemId = steps.trigger.event.body.DataItem.Id;    
    var picsumId = steps.Save_picsum_image.$return_value.picsumid;
    var imageValue = `<image mediaid=\\"{${steps.post_image_to_sitecore.$return_value.Id.toUpperCase()}}\\" />`
    var completedStepId = steps.configure.$return_value.WorkflowStates.Completed;
    var query =  ` mutation {
  updateItem(
    input: {
      database: "master"
      itemId: "${itemId}"
      fields: [
        {
          name: "Image"
          value: "${imageValue}"          
        },
        {
          name: "__Workflow state",
          value: "${completedStepId}"
        },
        {
          name: "Picsum ID",
          value: "${picsumId}"
        },
         {
          name: "Photographer",
          value: "${steps.Get_photo_url.$return_value.author}"
        },
        {
          name: "Picsum Info Link",
          value: "${steps.Get_photo_url.$return_value.url}"
        }
      ]
    }
  )  { item {itemId}}
} `;
    let token = await this.data.get("auth_code");
    var url = process.env.NGROK_SITECORE_CM_URL;
    if (url.substr(-1) != '/') url += '/';
    url = url + 'sitecore/api/authoring/graphql/v1/';  // testing change back to v1
    return await axios($, {      
      url,
      method: 'post',
      headers: {
        "Authorization": "bearer " + token
      },
      data: { 
        query: query
      },
     })
     .then(
      (result)=> {
        if (result.errors)
        {
          console.error(result.errors);
          throw("Error received. See logs.");
        }
       return result;
      });
  }
});

       

Code samples for SUGCON NA Webhooks talk. Save to Piscum workflow, removing the ".js" suffixes when you create the steps.