Visual Builder

Get Involved. Join the Conversation.

Topic

    Tusar Jena
    How to upload an image file in VBCS through Service...
    Topic posted October 8, 2018 by Tusar Jena, tagged JET, REST, Services, Web 
    914 Views, 8 Comments
    Title:
    How to upload an image file in VBCS through Service Connection
    Summary:
    In this I need to pick an image file from the local system and upload this image in Compendium in order to get a CDN link as response.
    Content:

    Need to upload this image through a service connection. My source of this service connection is from an End Point. This same thing i'm able to do it in Postman. In VBCS i'm providing the image local path. Than when i'm testing i'm not able to upload getting error msg as "Your file was not uploaded. The file you uploaded is not an image".

    Do I need to encode the file into a base64 encoded string than try to upload?

    Image:
    Document:

    Comment

     

    • Michael Blout

      How are you choosing the file?  Are you using a JET <oj-file-picker>?  That will give you a File object which you should be able to use directly.
      Assuming you are using a Rest Action, you would just add the File object as the 'file' property of the 'body'  (using your example above).

      If you are not using a <oj-file-picker> or another component that creates the File object, you would need to create one yourself using javascript

       

      • Michael Blout

        if this is 18.3.3, there are additional parameters for the Rest Action which will do this for you:

        contentType: 

        Optional string value with an actual (MIME) type, which will be used for the "content-type" header.

        When used with "fileType", this is also used as the type for the File blob.

         

        filePath:

        optional path to a file to send with the request,If "contentType" is set, that is used as the type for the File contents; otherwise, a simple lookup of a few common file extension will be used.

         

        fileContentType:

        Optional string, used in combination with "contentType": "multipart/form-data" and "filePath".

        ------

        If you have set "contentType" to "multipart/form-data", the Action will interpret your request "body" object as the form parts - each property of the body object will be a form part.

        If "filePath" is also set, it will be added as an additional part (using the sample simple file extension type association mentioned above).

        You may optionally override the file type using "fileContentType" for the file part.

        • Alicia Esquivias Roman

          Hi, 

          Would you know how to do this that you are saying if the request must have this structure?:

           

          Request Header

          The request is a multipart request with a specified boundary delimiter of the following general form:

          Content-Type: multipart/form-data; boundary=---1234567890

          Request Body

          -----1234567890
          Content-Disposition: form-data; name="parameters"
          Content-Type: application/json
          
          {
          "parentID":"FB4CD874EF94CD2CC1B60B72T0000000000100000001"
          }
          -----1234567890
          Content-Disposition: form-data; name="primaryFile"; filename="example.txt"
          Content-Type: text/plain
           
          <File Content>
          -----1234567890--
          

          Thanks! 

    • Michael Blout

      because the file part need a name of 'primaryFile', you will need to pass a body that contains the File as one of its properties.

      "body": {
        "parameters": { "parentId": "....." }
        "primaryFile": "{{ <expression that evaluates to a File object> }}"
      }
      

      You can decide whether its easier to do declaratively (like above) or construct the 'body' obejct in JS

      "body": "{{ $page.functions.createBody() }}"
      
    • Michael Blout

      that depends on where you are getting your File from; using a simple <input id="input" type="file"> you might use:

      "primaryFile": "{{ document.getElementById('input').files[0] }}"
      

      Using an <oj-file-picker>, you might have a on-oj-select listener defined in VB that passes the "$event.detail.files" to the Action Chain as an argument, and you would reference the chain argument.

      <oj-file-picker accept="[[['image/*']]]"
                      selection-mode="single"
                      on-oj-select="[[$listeners.picker]]"
                      id="OJ-FILE-PICKER-143012957-1">
      
      "eventListeners": {
        "picker": {
          "chains": [
            {
              "chainId": "picker",
              "parameters": {
                "file": "{{ $event.detail.files[0] }}",
              }
            }
          ]
        }
      },
      
      "picker": {
        "variables": {
          "file": {
            "type": "object"
          }
        },
        "root": "picker",
        "actions": {
          "picker": {
            "module": "vb/action/builtin/callModuleFunctionAction",
            "parameters": {
              "module": "{{ $page.functions }}",
              "functionName": "debug",
              "params": [
                "{{ $chain.variables.file }}"
              ]
            }
          },
      

       

    • Antonio Peixoto

      Hi Folks, somebody know upload image VBCS with Content and Experience Cloud ?

      We need to upload the same way as Postman using VBCS Can someone help us with this question or some example ?

      Below We trying using javascript

      var json={}; json = 'jsonInputParameters'+"\n"; json = json+'{"parentID":"F654F327C3F430C79D12B0261197FC8B3E19478035E5"}'+"\n";

      json = json + 'primaryFile:'+fileSet[0];

      console.log('teste '+json);

      Tks!