How to upload image using rest api? #369

pranavxc · 2021-07-22T09:30:21Z

pranavxc
Jul 22, 2021
Maintainer

How can I upload and attach image to a row using REST API?

Jul 22, 2021

It can be done in two steps

Upload the image using our meta API which returns the public URL and other meta details.

Example in Javascript(with Axios)

const formData = new FormData();
formData.append("file", yourFile);
formData.append('json', JSON.stringify({"api":"xcAttachmentUpload","project_id":"global_vL7d","dbAlias":"db","args":{}}));

axios({
  url: '<your public url>/dashboard',
  data: formData, 
  headers:{ 
      'Content-Type': 'multipart/form-data',
      "xc-auth": "<auth_token>"
  },
  method: 'post',
  params: {"project_id":"global_vL7d"},
})).then(res => {
      console.log(res)

      //  insert/update  record
})

Response will be:

{"url":"http://localhost:8080/dl/ben_qu…

View full answer

pranavxc · 2021-07-22T09:46:02Z

pranavxc
Jul 22, 2021
Maintainer Author

It can be done in two steps

Upload the image using our meta API which returns the public URL and other meta details.

Example in Javascript(with Axios)

const formData = new FormData();
formData.append("file", yourFile);
formData.append('json', JSON.stringify({"api":"xcAttachmentUpload","project_id":"global_vL7d","dbAlias":"db","args":{}}));

axios({
  url: '<your public url>/dashboard',
  data: formData, 
  headers:{ 
      'Content-Type': 'multipart/form-data',
      "xc-auth": "<auth_token>"
  },
  method: 'post',
  params: {"project_id":"global_vL7d"},
})).then(res => {
      console.log(res)

      //  insert/update  record
})

Response will be:

{"url":"http://localhost:8080/dl/ben_quadinaros_XedK/db/gzLD7N.jpg","title":"2021-03-21 17.11.25.jpg","mimetype":"image/jpeg","size":232939}

Now ypdate/insert records using REST API endpoints, which will be available in Swagger docs. The attachment column value will be a JSON string (an array of objects).

Example value :
```
"[{\"url\":\"http://localhost:8080/dl/ben_quadinaros_XedK/db/gzLD7N.jpg\",\"title\":\"2021-03-21 17.11.25.jpg\",\"mimetype\":\"image/jpeg\",\"size\":232939}]"
```

2 replies

asutpshnik Feb 13, 2022

This code has errors.
Unnecessary symbol ")" and no boundary in headers.

derawi Jul 1, 2022

It can be done in two steps
Upload the image using our meta API which returns the public URL and other meta details.
Example in Javascript(with Axios)
const formData = new FormData();
formData.append("file", yourFile);
.....

I am getting for this solution as well as for the solution of @rbocchinfuso the following error response

 data: '<!DOCTYPE html>\n' +
      '<html lang="en">\n' +
      '<head>\n' +
      '<meta charset="utf-8">\n' +
      '<title>Error</title>\n' +
      '</head>\n' +
      '<body>\n' +
      '<pre>Cannot POST /dashboard</pre>\n' +
      '</body>\n' +
      '</html>\n'

totorofly · 2021-09-10T06:36:32Z

totorofly
Sep 10, 2021

Could you please tell me how to upload image/file using QraphiQL? @pixplix

1 reply

o1lab Sep 12, 2021
Maintainer

GraphQL also use the same REST api to upload image.

IvanCharcos · 2021-12-01T23:57:10Z

IvanCharcos
Dec 1, 2021

Hi @o1lab
From our Discord discussion:

I am trying to recreate the JS code in Python:

    headers = {"xc-token": "<token>",
               }
    invoicePayload = {
      "file": open(invoiceFile, 'rb'),
      "json": json.dumps({"api": "xcAttachmentUpload", "project_id": "auto_6avb", "dbAlias": "db", "args": {}})
    }
    params = {"project_id": "auto_6avb"}
    r = requests.post(root + addFile, data=invoicePayload, headers=headers, params=params)

I get:

{'msg': 'Operation not found'}
 'status_code': 500,
 'url': 'http://0.0.0.0:8081/dashboard?project_id=auto_6avb'

Am I creating the proper endpoint?

0 replies

pranavxc · 2021-12-02T16:55:48Z

pranavxc
Dec 2, 2021
Maintainer Author

@IvanCharcos Following code may help,

headers = {"xc-token": "<token>"}
print("File Exists: ", invoiceFile)
## Add invoice
invoicePayload = {
  "json": (None, json.dumps({"api": "xcAttachmentUpload", "project_id": "auto_6avb", "dbAlias": "db", "args": {}}), 'application/json'),
  "file": ('finlename.pdf', open(invoiceFile, 'rb'), 'application/octet-stream')
}
params = {"project_id": "auto_6avb"}
r = requests.post(root + addFile, files=invoicePayload, headers=headers, params=params)
attachments = r.json()

Refer : https://stackoverflow.com/a/35940980

3 replies

gustavohwulee Jan 27, 2022

I tried this code, but I'm getting a 504 error. Does anyone know how can I debug this?

headers = {
    "xc-token": "XXXXXXXXXXXX",
}
invoiceFile=r"C:\xxxxx\xxxx\xxxx\nc-test-file.txt"


files = {
    "json":   (None, json.dumps({"api": "xcAttachmentUpload", "project_id": "xxxxxxx", "dbAlias": "db", "args": {}}), 'application/json'),
    "file": ('nc-test-file.txt', open(invoiceFile, 'rb'), 'application/octet-stream')
}
params = {
    "project_id": "xxxxxxx",
}
r = requests.post(
    f"http://xxx.xxxxxxx.com:8080/dashboard/",
    files=files,
    headers=headers,
    params=params
)
print(r.status_code)
print(r.text)

<!DOCTYPE html>
<html>
<head>
  <title>We're sorry, but something went wrong (500)</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
  body {
    background-color: #6CABF7;
    color: #fff;
    text-align: center;
    font-family: arial, sans-serif;
    margin: 0;
  }
  div {
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  p {
    color: #eee;
  }
  </style>
</head>
<body>
  <div>
    <h1>We're sorry, but something went wrong.</h1>
    <p>If you are the application owner check the logs for more information.</p>
  </div>
</body>
</html>

o1lab Jan 27, 2022
Maintainer

please see this : https://gist.github.com/PierreMacherel/742ffc1babefdb4667c2f29ec4a9df9f

wingkwong Jan 27, 2022
Collaborator

It seems that the request is also passed to SqlMgr causing 500 - Operation not found as xcAttachmentUpload is not one of the target operations.

PierreMacherel · 2021-12-28T11:37:57Z

PierreMacherel
Dec 28, 2021

I had some difficulties to upload a picture from windows. You can use my scripts as example to upload a picture to a table.

0 replies

rbocchinfuso · 2022-02-23T23:39:18Z

rbocchinfuso
Feb 23, 2022

This thread provided me with some good guidance. I thought I would share a Python snippet to help others get on the right path to uploading multiple files and attaching them to a nocodb record.

import json
import requests

## File (multi) upload

count = 0
filelist = ["test1.txt", "test2.txt"]

headers = {
    "xc-auth": "AUTH_TOKEN"
}

params = {
    "project_id": "test_project_01_b9o9"
}

for file in filelist:
    print (file)
    print (count)
    files = {
        "json": (None, json.dumps({"api": "xcAttachmentUpload", "project_id": "test_project_01_b9o9", "dbAlias": "db", "args": {}}), 'application/json'),
        "file": (file, open(file, 'rb'), 'application/octet-stream')
    }


    r = requests.post(
        f"https://nocodb.foo.bar/dashboard/",
        files=files,
        headers=headers,
        params=params
    )

    print(r.status_code)
    print(r.text)


    if count == 0:
        json2string = str(r.json())
        jsonString = json2string.replace("'", '\"').replace('\n', '\\n')
    else:
        appendJsonString = jsonString
        json2string = str(r.json())
        jsonString = json2string.replace("'", '\"').replace('\n', '\\n')
        jsonString = f"{appendJsonString},{jsonString}"
            
    count += 1

jsonFilePayload = (f"[{jsonString}]")
print (jsonFilePayload)


## Add record to table and file(s) as attachments

headers = {
    "xc-auth": "AUTH_TOKEN",
	'Content-Type': 'application/json'
}
url = "http://nocodb.foo.bar/nc/test_project_01_b9o9/api/v1/Table01"

payload = json.dumps({
  "title": "foo",
  "file": jsonFilePayload
})

r = requests.request("POST", url, headers=headers, data=payload)

print (r.status_code)
print(r.text)

1 reply

mihazg99 Mar 3, 2022

I'm trying to do this in dart.

dio.options.headers["xc-auth"] = "xxxxxxxxxxxxxxxxxxx";
     
 dio.options.headers['Content-Type'] = 'multipart/form-data';
      var path = file!.path;

      FormData formData = FormData.fromMap({
        "file": File(path),
        "json": '{"api":"xcAttachmentUpload","project_id":"xxxxxxxxx","dbAlias":"db","args":{}}'
      });

      var response = await dio.post("https://xxx.herokuapp.com/dashboard/", data: formData,queryParameters: {"project_id":"xxxxxxxxxxxx"});

I'm getting status error 400. Does anyone know what could be wrong.

EDIT:

I fixed the problem by editing the form data like this :

FormData formData = FormData.fromMap({
        "file": await MultipartFile.fromFile(path),
        "json": '{"api":"xcAttachmentUpload","project_id":"xxxxxxxxx","dbAlias":"db","args":{}}'
      });

zblesk · 2022-03-23T17:54:22Z

zblesk
Mar 23, 2022

I'm sorry for the silly question, but where are the docs for this? I can't find them. I see the swagger defs for my database-specific endpoints, but that doesn't cover attachment upload...

Or - does anyone at least have a working example in Postman? Best I could get is 403 with a body of

{
    "msg": "Not allowed"
}

(It's not an issue of a bad auth token, I've checked.)

0 replies

asutpshnik · 2022-03-23T22:18:21Z

asutpshnik
Mar 23, 2022

@zblesk i use js script, it work:

var fs = require('fs');
var axios = require('axios');
var FormData = require('form-data');

var image_path = "/home/user/example.jpeg";
const nocodb_token = XXXXXXXXXXXXXXXX;
const project_id = 'XXXXXXXXXXXXXXXX';

function insertImage (image_path, callbackOK, callbackError) {
    const formData = new FormData();
    formData.append("file", fs.createReadStream(image_path));
    formData.append('json', JSON.stringify({"api":"xcAttachmentUpload","project_id":project_id,"dbAlias":"db","args":{}}));
    axios({
        url: 'http://10.0.0.1:8080/dashboard',
        data: formData,
        headers:{
            'Content-Type':`multipart/form-data; boundary=${formData.getBoundary()}`,
            'xc-auth': nocodb_token
        },
        method: 'post',
        params: {"project_id":project_id}
    })
    .then(function (response) {
        // handle success
        //console.log(response.data);
        return callbackOK(response.data);
    })
    .catch(function (error) {
        // handle error
        //console.log(error);
        return callbackError(error);
    })
}

0 replies

zblesk · 2022-03-25T13:46:19Z

zblesk
Mar 25, 2022

Thanks.

In case someone else is also trying in a different language, here is the raw request that the code above generated:

POST https://MYDOMAIN/dashboard?project_id=MY_PROJECT_1337 HTTP/1.1
Accept: application/json, text/plain, */*
Content-Type: multipart/form-data; boundary=--------------------------328018513086098473219926
xc-auth: eyJhbGciurweionbWFpbC5jb20iLCJmaXJzdG5hbWUiOpZCI6MSwicm9sZXMiOiJ1c2VyIiwiaWF0IjoxNjMxNTM1MDM1fQ.l2qmuzFkQDriLIEr07h-uTaAYrh0MTy0a70NtOsJsdersxcwersdferP-w
User-Agent: axios/0.26.1
host: MYDOMAIN
Connection: close
Content-Length: 767116

----------------------------328018513086098473219926
Content-Disposition: form-data; name="file"; filename="pic.png"
Content-Type: image/png

 PNG
�<binary data omitted>

0 replies

asutpshnik · 2022-09-03T16:27:23Z

asutpshnik
Sep 3, 2022

Hi all!
This API not work in version 0.92.4?
I upgrade from 0.84 to 0.92.4 and API error 404:
'code':'ERR_BAD_REQUEST','status':404

1 reply

asutpshnik Sep 10, 2022

Need to change API, now use this doc and upload work fine.

NeonBubbles · 2023-07-26T12:48:19Z

NeonBubbles
Jul 26, 2023

This is the latest template for uploading attachments into a specified row (creating a new row) written in Python

import json
import requests



# Replace with your actual file path
file_path = r"your_file_path"

# Replace with your actual token or use "xc-auth"
headers = {
    "xc-token": "{your_token}"
}

# Replace with your actual project id
params = {
    "project_id": "{your_project_id}"
}

print(file_path)

# Prepare the files for the POST request
files = {
    "json": (None, json.dumps(
        {"api": "xcAttachmentUpload", "project_id": "{your_project_id}",
         "dbAlias": "db", "args": {}}), 'application/json'),
    "file": (file_path, open(file_path, 'rb'), 'application/octet-stream')
}

# Send the POST request to upload the file
# Replace with your actual URL
r = requests.post(
    "{your_url}/api/v1/db/storage/upload",
    files = files,
    headers = headers,
    params = params
)

print(r.status_code)
jsonFilePayload = r.json()
print(jsonFilePayload)

# Prepare the headers for the POST request
# Replace with your actual token
headers = {
    "xc-token": "{your_token}",
    'Content-Type': 'application/json'
}

# Replace with your actual URL,
# currently {orgs} is "noco"
# projectName is your project id, no difference
url = "{your_url}/api/v1/db/data/{orgs}/{projectName}/{tableName}"     


# Replace with your field name and data
payload = json.dumps({
    "title": "foo",
    "Attachments": jsonFilePayload,
})

# Send the POST request to add a record to the table
r = requests.request("POST", url, headers = headers, data = payload)

print(r.status_code)
print(r.json())

0 replies

geekyouth · 2023-10-31T08:04:33Z

geekyouth
Oct 31, 2023

1 reply

wingkwong Oct 31, 2023
Collaborator

Use POST instead of GET

dstala · 2024-04-23T08:41:08Z

dstala
Apr 23, 2024
Maintainer

Uploading a file to Attachment field type can be done in 2 steps

Upload file to retrieve URL
Insert a new record by specifying the URL (OR) Update an existing record

Updated JS code here gives a sample for new record insertion case

const axios = require('axios');
const FormData = require('form-data');
const fs = require('fs');

(async () => {
    // API Token for uploading the file
    // Reference : https://docs.nocodb.com/account-settings/api-tokens/#create-api-token
    const apiToken = '3WDl0GloFP-B01fNghspJx98AX_4ct4uLMvCHqWU';

    // Base URL for the API
    const baseURL = 'https://app.nocodb.com';

    // Base ID of the table
    // Base ID of a table can be retrieved from the URL (OR) by using base context menu from the left side bar project tree
    const baseID = 'm7wp2q8n4d9w4kp';

    // Read the image file
    const photoStream = fs.createReadStream('./photo.png');

    // Create form data
    const formData = new FormData();
    formData.append('file', photoStream);

    // Define headers for uploading the file
    const uploadHeaders = {
        'xc-token': apiToken,
        ...formData.getHeaders(),
    };

    // Upload the file
    const uploadResponse = await axios.post(`${baseURL}/api/v1/db/storage/upload`, formData, {
        headers: uploadHeaders,
    });

    // Create a new row in the database
    const response = await axios.post(`${baseURL}/api/v2/tables/${baseID}/records`, {
        // Example field data
        "Title": "New Name",
        // Pass the uploaded file data; file is field name here & its type is "Attachment"
        "file": uploadResponse.data,
    }, {
        headers: {
            'xc-token': apiToken,
            'Content-Type': 'application/json',
        },
    });
})().catch(err => {
    console.log(err);
});

0 replies

How to upload image using rest api? #369

pranavxc Jul 22, 2021 Maintainer

Replies: 13 comments · 9 replies

pranavxc Jul 22, 2021 Maintainer Author

o1lab Sep 12, 2021 Maintainer

pranavxc Dec 2, 2021 Maintainer Author

o1lab Jan 27, 2022 Maintainer

wingkwong Jan 27, 2022 Collaborator

wingkwong Oct 31, 2023 Collaborator

dstala Apr 23, 2024 Maintainer

pranavxc
Jul 22, 2021
Maintainer

Replies: 13 comments 9 replies

pranavxc
Jul 22, 2021
Maintainer Author

o1lab Sep 12, 2021
Maintainer

pranavxc
Dec 2, 2021
Maintainer Author

o1lab Jan 27, 2022
Maintainer

wingkwong Jan 27, 2022
Collaborator

wingkwong Oct 31, 2023
Collaborator

dstala
Apr 23, 2024
Maintainer