Sending file via API connector

b.j.gibson · May 12, 2021, 12:25am

Has anyone been able to send a file via bubbles API connector?

I have a call ‘POST [file]’ request through the API connector (using “data-binary” type) that is working with Postman but throwing an issue when implemented into bubble? any insights would be greatly appreciated, the details are below:

The response from bubble is:
Status code 400
{“success”:false,“error”:{“value”:“File type not permitted !.”}}

If anyone knows of any alternative methods of sending a file via API, it would be greatly appreciated if you could share it here!

cheers,
Ben

Jici · May 12, 2021, 12:36am

Can you share link to API Doc?

b.j.gibson · May 12, 2021, 2:08am

https://manual.bubble.io/core-resources/bubble-made-plugins/api-connector

cmarchan · May 12, 2021, 2:10am

I believe @Jici was referring to the destination api doc

b.j.gibson · May 12, 2021, 2:12am

yep, here is the destination:

swagger: “2.0”
info:
x-ibm-name: ndis-upload-file
title: NDIS Upload File
version: 2.0.0
description: Digital Partners can use the Upload Files API to share a supporting
document with NDIA
schemes:

https
basePath: /ndis/2.0/upload-file
consumes:
application/json
produces:
application/json
securityDefinitions:
clientIdHeader:
type: apiKey
in: header
name: X-IBM-Client-Id
security:
clientIdHeader: []
x-ibm-configuration:
testable: true
enforced: true
phase: realized
paths:
/:
post:
responses:
200:
description: “”
schema:
$ref: ‘#/definitions/uploadFileResponse’
parameters:
- $ref: ‘#/parameters/filename’
- $ref: ‘#/parameters/Content-Type’
- $ref: ‘#/parameters/description’
- $ref: ‘#/parameters/note’
- $ref: ‘#/parameters/quotation_id’
- $ref: ‘#/parameters/process_type’
summary: Upload file request
description: Enables upload of a file as a supporting document. File is received
as binary content in the http request body.
parameters:
- $ref: ‘#/parameters/Authorization’
  definitions:
  uploadFileResponse:
  properties:
  success:
  type: boolean
  description: success status of call
  example: “true”
  additionalProperties: false
  tags: []
  parameters:
  Authorization:
  name: Authorization
  type: string
  required: true
  in: header
  description: Bearer Token
  Content-Type:
  name: Content-Type
  type: string
  required: true
  in: header
  description: Content Type eg:image/jpeg
  filename:
  name: filename
  type: string
  required: true
  in: header
  description: The Uploading file name
  description:
  name: description
  type: string
  required: false
  in: header
  description: The Uploading file description
  note:
  name: note
  type: string
  required: false
  in: header
  description: The note for the Uploading file
  quotation_id:
  name: quotation_id
  type: string
  maxLength: 80
  required: false
  in: header
  description: The quotation_id for which the Document should be attached
  process_type:
  name: process_type
  type: string
  required: false
  in: header
  description: The process_type for which the Document should be attached
  x-ibm-endpoints:
endpointUrl: https://test.api.ndis.gov.au/sharedservices/ndis-api-test
type:
- production
- development
  …
  
  Screen Shot 2021-05-12 at 10.11.47 am544×1628 80.7 KB

Jici · May 12, 2021, 12:54pm

What are the supported document type?

b.j.gibson · May 13, 2021, 12:28am

File is any type, but generally pdf or image.

Header of:
Content-Type: application/pdf is often used when sending a pdf in postman and was successful, however not working in bubbles api connector.

below is the description from the destination api doc for the file:

b.j.gibson · May 13, 2021, 12:32am

here is the postman call which successfully sends a pdf:

and attached pdf in body:
Screen Shot 2021-05-13 at 8.30.44 am

aaronsheldon · May 14, 2021, 5:11am

I would interpret the documentation on the Bubble API Connector to mean they only support POST Body types of form-data or raw on top of the usual JSON. Your call requires a body type of binary, which is probably not supported by the Bubble API Connector. For files stored on Bubble’s S3 cloud the data is accessible only through Bubble’s “:encoded in base64” operator, which is definitely not what your endpoint is expecting.

If you want to send a byte or octet buffer in a POST you will have to write a custom Server Side Action that reads the base64 and buffers it back into bytes and then places the POST call inside of Bubble’s context.request function. Which itself exposes the deprecated Node.js request module.

abhishek.ranjan · September 1, 2021, 1:12pm

were you guys able to solve this issue? am also facing the same problem and it will be very helpful if I can get a solution to this problem , please help asap if anyone of you able to figure out how to send pdf from postman to bubble.
Like when am sending name, email ,any strings i can receive them on bubble database successfully, but in case of any pdf or json response they’re showing
{

"statusCode": 400,

"body": {

    "status": "ERROR",

    "message": "Unrecognized field: type"

}

}
I have added a field resume of type file and able to upload pdfs manually at bubble, how to make it happen from postman?
@aaronsheldon @b.j.gibson @blurapps

aaronsheldon · September 2, 2021, 5:28pm

This is a tough one because the Bubble API endpoint only accepts JSON/Text. The most architecturally expedient way around this is to serialize the binary of your file to Base 64 before you call the API. Then it can be safely incorporated into the POSTed JSON.

Once the API endpoint receives the Base 64 serialized data you will then need to create a Bubble S3 file from it and then save that to the database. I have an action for writing Bubble S3 files from Base 64. It is in the plugin called Bubble Backend Utilities, and called Write from Base 64. You can then store the returned file handle in the database.

abhishek.ranjan · September 3, 2021, 8:24am

will i need "AWS" File uploader - Any size Plugin | Bubble plugin for bubble s3 file for the base64 string?

aaronsheldon · September 3, 2021, 2:55pm

That looks like it is more for client side then server side. The utility I wrote is: Bubble Back End Utilities Plugin | Bubble

abhishek.ranjan · September 3, 2021, 3:29pm

Yes, I have installed that plugin you have made.

in the first entry in the field res, I have sent converted pdf to JSON base 64 response and sent from Postman , now how to use “Write from Base 64” option of your plugin as am not able to see any direct option in plugin or database.

aaronsheldon · September 3, 2021, 3:50pm

From your res field you will need to extract the value of the JSON field data. Then in the back-end utilities use Write from Base 64 action. Put the data into the contents field and supply a name and optionally a thing to attach to.

However, ideally when calling the Bubble Data API externally you would have placed the Base 64 data directly in the res field, instead of wrapping it in JSON.

abhishek.ranjan · September 3, 2021, 4:18pm

Yes, for now just for testing a sample pdf, I have converted a pdf’s data into base64 JSON response and pasted in Postman manually

now after receiving it in bubble database, am not getting any option to call “Write from Base 64” neither at database page nor at plugin(only available actions name is written there but they’re just text), it will be very helpful if you can tell how to do it after getting response from postman on bubble database.

aaronsheldon · September 3, 2021, 9:56pm

Oh I see. You will need to create a workflow to use the plugin actions:

Building Workflows in the manual.
In particular Back End Workflows may be of interest as they run on the Bubble Server.
API accessing custom workflows you have written

abhishek.ranjan · September 4, 2021, 4:46am

Can you send screenshots of a sample backend workflow for reference

rowntreerob · October 6, 2021, 11:20pm

https://forum.bubble.io/t/re-api-connector-post-body-as-a-binary-file/172100/6?u=rowntreerob is response to similar need - a utility to make it easier for endpoints and or api connections to move binary files around among 3rd party services like AWS S3.

Related UI client code based on native html tag for file is here Note: that the server can protect credentials/ auth for 3rd party PAAS. Note: that the stream implementation on server allows it to act as a proxy ( Node.pipes ) sending the file anywhere else.

ZubairLK · August 4, 2022, 11:59am

Just to update.

We needed to make a Put request while sending a binary file.

This curl

curl --location --request PUT 'https://somewhereamazing' \
--header 'Content-Type: application/octet-stream' \
--header 'Authorization: Bearer AAA' \
--data-binary '@index.html'

We were not able to send via the API connector and ended up sending to pipedream.com and then writing a bash script to send it ahead.

Thanks
ZubairLK