Workflow Question: How to Write Cropped Image to Gitlab Repository via HTTP Node

Overview:

I have a number of websites for which I would like to scrape the plausible analytics data and write it to my organization website repository so that I can display them for the public.

The current workflow I have is:

As per the Gitlab documentation, I have to send the binary data content inside of the content field of the body. I am confused about how to feed the binary data from the crop image node into the HTTP request node.

I love what you folks are developing and I appreciate the community support.

{
  "name": "Analytics Images",
  "nodes": [
    {
      "parameters": {},
      "name": "Start",
      "type": "n8n-nodes-base.start",
      "typeVersion": 1,
      "position": [
        250,
        280
      ]
    },
    {
      "parameters": {
        "url": "={{$json[\"imageUrl\"]}}",
        "responseFormat": "file",
        "options": {}
      },
      "name": "Fetch Binary Image",
      "type": "n8n-nodes-base.httpRequest",
      "typeVersion": 1,
      "position": [
        1040,
        280
      ]
    },
    {
      "parameters": {
        "group": "image",
        "tool": "getUrlScreenshot",
        "url": "=https://plausible.io/grey.software",
        "width": "1024",
        "fullpage": "yes",
        "additionalOptions": {}
      },
      "name": "Take Screenshot",
      "type": "n8n-nodes-base.uproc",
      "typeVersion": 1,
      "position": [
        560,
        280
      ],
      "credentials": {
        "uprocApi": "uProc Prod"
      }
    },
    {
      "parameters": {
        "functionCode": "const imageUrl = items[0].json.message.result\nitems[0].json = {imageUrl}\nreturn items"
      },
      "name": "Extract ImageURL from Response",
      "type": "n8n-nodes-base.function",
      "typeVersion": 1,
      "position": [
        780,
        280
      ]
    },
    {
      "parameters": {
        "operation": "crop",
        "dataPropertyName": "=data",
        "width": 1024,
        "height": 1420,
        "positionY": 200,
        "options": {}
      },
      "name": "Crop Image",
      "type": "n8n-nodes-base.editImage",
      "typeVersion": 1,
      "position": [
        1280,
        280
      ]
    },
    {
      "parameters": {
        "resource": "repository",
        "operation": "get",
        "owner": "grey-software",
        "repository": "org"
      },
      "name": "Gitlab",
      "type": "n8n-nodes-base.gitlab",
      "typeVersion": 1,
      "position": [
        1750,
        940
      ],
      "credentials": {
        "gitlabApi": "Gitlab Credentials"
      }
    },
    {
      "parameters": {
        "authentication": "headerAuth",
        "requestMethod": "POST",
        "url": "=https://gitlab.com/api/v4/projects/grey-software/org/repository/files/:",
        "options": {},
        "bodyParametersUi": {
          "parameter": [
            {
              "name": "file_path",
              "value": "content/analytics/grey.software/${{new Date().toISOString().substring(0,10)}}.png"
            },
            {
              "name": "branch",
              "value": "master"
            },
            {
              "name": "author_email",
              "value": "[email protected]"
            },
            {
              "name": "author_name",
              "value": "GreyKhan"
            },
            {
              "name": "content",
              "value": "="
            }
          ]
        }
      },
      "name": "Write to Gitlab Repo",
      "type": "n8n-nodes-base.httpRequest",
      "typeVersion": 1,
      "position": [
        1520,
        280
      ],
      "credentials": {
        "httpHeaderAuth": "Gitlab GreyKhan Personal Access Token"
      }
    }
  ],
  "connections": {
    "Start": {
      "main": [
        [
          {
            "node": "Take Screenshot",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Fetch Binary Image": {
      "main": [
        [
          {
            "node": "Crop Image",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Take Screenshot": {
      "main": [
        [
          {
            "node": "Extract ImageURL from Response",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Extract ImageURL from Response": {
      "main": [
        [
          {
            "node": "Fetch Binary Image",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Write to Gitlab Repo": {
      "main": [
        []
      ]
    }
  },
  "active": false,
  "settings": {},
  "id": "1001"
}

Can you share the Gitlab endpoint you need to use?

The URL Iā€™m POSTing to is https://gitlab.com/api/v4/projects/grey-software/org/repository/files/

This is the API doc

Hi @arsalagrey,

Nice to see that you are taking Screenshots with uProc (I am but biased because I am the founder :).

If you have any doubt, or any feature request, let me know.

One idea I had was taking a screenshots of particular divs if that would be possible.

@arsalagrey check the example below. Just ad your credentials to the last HTTP Node.

{
  "nodes": [
    {
      "parameters": {},
      "name": "Start",
      "type": "n8n-nodes-base.start",
      "typeVersion": 1,
      "position": [
        260,
        350
      ]
    },
    {
      "parameters": {
        "authentication": "headerAuth",
        "requestMethod": "POST",
        "url": "=https://gitlab.com/api/v4/projects/grey-software/org/repository/files/:",
        "options": {},
        "bodyParametersUi": {
          "parameter": [
            {
              "name": "file_path",
              "value": "content/analytics/grey.software/${{new Date().toISOString().substring(0,10)}}.png"
            },
            {
              "name": "branch",
              "value": "master"
            },
            {
              "name": "author_email",
              "value": "[email protected]"
            },
            {
              "name": "author_name",
              "value": "GreyKhan"
            },
            {
              "name": "content",
              "value": "={{$node[\"Function\"].json[\"image\"]}}"
            },
            {
              "name": "encoding",
              "value": "base64"
            }
          ]
        }
      },
      "name": "Write to Gitlab Repo",
      "type": "n8n-nodes-base.httpRequest",
      "typeVersion": 1,
      "position": [
        1310,
        350
      ],
      "credentials": {
        "httpHeaderAuth": "asasasasas"
      }
    },
    {
      "parameters": {
        "url": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQLjIytMGX1vNK3aBqWsPchs8VbLnkTaglL5A&usqp=CAU",
        "responseFormat": "file",
        "options": {}
      },
      "name": "HTTP Request",
      "type": "n8n-nodes-base.httpRequest",
      "typeVersion": 1,
      "position": [
        550,
        350
      ]
    },
    {
      "parameters": {
        "options": {}
      },
      "name": "Edit Image",
      "type": "n8n-nodes-base.editImage",
      "typeVersion": 1,
      "position": [
        800,
        350
      ]
    },
    {
      "parameters": {
        "functionCode": "return [\n  {\n    json: {\n      image: items[0].binary.data.data\n    }\n  }\n]"
      },
      "name": "Function",
      "type": "n8n-nodes-base.function",
      "typeVersion": 1,
      "position": [
        1050,
        350
      ]
    }
  ],
  "connections": {
    "Start": {
      "main": [
        [
          {
            "node": "HTTP Request",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "HTTP Request": {
      "main": [
        [
          {
            "node": "Edit Image",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Edit Image": {
      "main": [
        [
          {
            "node": "Function",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Function": {
      "main": [
        [
          {
            "node": "Write to Gitlab Repo",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  }
}
1 Like

:rocket: Works perfectly!

Final code:

{
  "name": "Analytics Images",
  "nodes": [
    {
      "parameters": {},
      "name": "Start",
      "type": "n8n-nodes-base.start",
      "typeVersion": 1,
      "position": [
        250,
        280
      ]
    },
    {
      "parameters": {
        "url": "={{$json[\"imageUrl\"]}}",
        "responseFormat": "file",
        "options": {}
      },
      "name": "Fetch Binary Image",
      "type": "n8n-nodes-base.httpRequest",
      "typeVersion": 1,
      "position": [
        980,
        280
      ]
    },
    {
      "parameters": {
        "group": "image",
        "tool": "getUrlScreenshot",
        "url": "=https://plausible.io/grey.software",
        "width": "1024",
        "fullpage": "yes",
        "additionalOptions": {}
      },
      "name": "Take Screenshot",
      "type": "n8n-nodes-base.uproc",
      "typeVersion": 1,
      "position": [
        560,
        280
      ],
      "credentials": {
        "uprocApi": "uProc Prod"
      }
    },
    {
      "parameters": {
        "functionCode": "const imageUrl = items[0].json.message.result\nitems[0].json = {imageUrl}\nreturn items"
      },
      "name": "Extract ImageURL from Response",
      "type": "n8n-nodes-base.function",
      "typeVersion": 1,
      "position": [
        780,
        280
      ]
    },
    {
      "parameters": {
        "operation": "crop",
        "dataPropertyName": "=data",
        "width": 1024,
        "height": 1420,
        "positionY": 200,
        "options": {}
      },
      "name": "Crop Image",
      "type": "n8n-nodes-base.editImage",
      "typeVersion": 1,
      "position": [
        1180,
        280
      ]
    },
    {
      "parameters": {
        "resource": "repository",
        "operation": "get",
        "owner": "grey-software",
        "repository": "org"
      },
      "name": "Gitlab",
      "type": "n8n-nodes-base.gitlab",
      "typeVersion": 1,
      "position": [
        1750,
        940
      ],
      "credentials": {
        "gitlabApi": "Gitlab Credentials"
      }
    },
    {
      "parameters": {
        "functionCode": "return [\n  {\n    json: {\n      image: items[0].binary.data.data\n    }\n  }\n]"
      },
      "name": "Function",
      "type": "n8n-nodes-base.function",
      "typeVersion": 1,
      "position": [
        1360,
        280
      ]
    },
    {
      "parameters": {
        "authentication": "headerAuth",
        "requestMethod": "POST",
        "url": "=https://gitlab.com/api/v4/projects/23599517/repository/files/{{encodeURIComponent(`content/en/analytics/${new Date().toISOString().substring(0,10)}.png`)}}",
        "options": {},
        "bodyParametersUi": {
          "parameter": [
            {
              "name": "file_path",
              "value": "content/analytics/grey.software/{{new Date().toISOString().substring(0,10)}}.png"
            },
            {
              "name": "branch",
              "value": "master"
            },
            {
              "name": "author_email",
              "value": "[email protected]"
            },
            {
              "name": "author_name",
              "value": "GreyKhan"
            },
            {
              "name": "content",
              "value": "={{$node[\"Function\"].json[\"image\"]}}"
            },
            {
              "name": "encoding",
              "value": "base64"
            },
            {
              "name": "commit_message",
              "value": "=Adding analytics data for grey.software for the week of {{new Date().toISOString().substring(0,10)}}"
            }
          ]
        },
        "headerParametersUi": {
          "parameter": [
            {
              "name": "PRIVATE_TOKEN",
              "value": "dc3iwvUKZ6zwmzxW_nsp"
            }
          ]
        }
      },
      "name": "Write to Gitlab Repo",
      "type": "n8n-nodes-base.httpRequest",
      "typeVersion": 1,
      "position": [
        1600,
        280
      ],
      "credentials": {
        "httpHeaderAuth": "Gitlab GreyKhan Personal Access Token"
      }
    }
  ],
  "connections": {
    "Start": {
      "main": [
        [
          {
            "node": "Take Screenshot",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Fetch Binary Image": {
      "main": [
        [
          {
            "node": "Crop Image",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Take Screenshot": {
      "main": [
        [
          {
            "node": "Extract ImageURL from Response",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Extract ImageURL from Response": {
      "main": [
        [
          {
            "node": "Fetch Binary Image",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Function": {
      "main": [
        [
          {
            "node": "Write to Gitlab Repo",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Crop Image": {
      "main": [
        [
          {
            "node": "Function",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  },
  "active": false,
  "settings": {},
  "id": "1001"
}
3 Likes