Upload content from local drive into a Canvas
Objective: create a new Canvas and upload content from a local drive to a this new Canvas.
The currently supported file extensions for uploading content to a Workspace include: png, jpeg, gif, tiff, pdf, docx, pptx, xlsx, doc, ppt, xls.
The image may be uploaded as a binary attachment, multipart form data, or via a remote url.
See below examples for the upload methods: multipart form data and via remote URL.
NOTE: You can use this same code to implement upload to a Workspace, just changing the API endpoint (removing the /canvas/<canvas_id> part from the path).
Create Canvas
| Endpoint | /v2/workspaces/<workspace_uid>/elements/canvas |
| Method | POST |
| Comments | You need to know the workspace UID. |
Upload files into a Canvas
| Endpoint | /v2/workspaces/<workspace_uid>/elements/canvas/<canvas_id>/documents and /v2/workspaces/<workspace_uid>/elements/canvas/<canvas_id>/images |
| Method | POST |
| Comments | You need to know the workspace UID. |
Code sample
Upload method: Multipart Form Data
# Python Code (python 3.5+)
import requests
from requests.exceptions import HTTPError
import datetime
from os import listdir
from os.path import isfile, join
import pprint
'''
This script:
1) Creates a canvas
2) Uploads the content from a specific folder into the canvas: documents and images
3) Upload method for images and documents: MULTIPART FORM DATA
Required modules:
requests 2.22.0
'''
token = '<SET_YOUR_TOKEN_HERE>'
if __name__ == "__main__":
portal = 'https://api.apps.us.bluescape.com'
workspace_uid = '<SET_YOUR_WORKSPACE-UID_HERE>'
API_version = 'v2'
API_endpoint = '/' + API_version + '/workspaces/' + workspace_uid + '/elements/canvas'
parameters = ''
canvas_x = 0
canvas_y = 0
canvas_width = 4000
canvas_height = 4000
date_time = datetime.datetime.now()
data_load = {
'x': canvas_x,
'y': canvas_y,
'width': canvas_width,
'height': canvas_height,
'name': "Data Load on " + str(date_time),
'borderColor': 'Yellow'
}
# IMPORTANT: canvas has to be bigger than document/object coming inside, or the object does NOT stick to the canvas
the_request = requests.post(
portal + API_endpoint,
headers={"Authorization": "Bearer " + token,
"Content-Type": "application/json"
},
json=data_load,
params=parameters
)
json_response = the_request.json()
pprint.pprint(json_response)
canvas_id = json_response['canvas']['id']
pprint.pprint(json_response)
# Add the files in the folder into the Canvas
# /v2/workspaces/<workspace_uid>/elements/canvas/<canvas_id>/documents
# /v2/workspaces/<workspace_uid>/elements/canvas/<canvas_id>/images
mypath = '<SET_PATH_HERE>'
onlyfiles = [f for f in listdir(mypath) if isfile(join(mypath, f))]
API_endpoint = '/' + API_version + '/workspaces/' + workspace_uid + '/elements/canvas/' + canvas_id + '/documents'
# Canvas coordinates are from its top left corner, relative from there
xx = 100
yy = 200
# Supported: png, jpeg, gif, tiff, pdf, docx, pptx, xlsx, doc, ppt, xls
document_extensions = ['pdf','docx','pptx','xlsx','doc','ppt','xls']
image_extensions = ['jpg','png','jpeg','tiff']
not_supported_extensions = ['txt']
for this_file in onlyfiles:
print("\nFile: ", this_file)
file_extension = this_file.split('.')[1]
full_path_file = mypath + this_file
file_type_key = ''
is_supported_extension = True
if file_extension in document_extensions:
API_endpoint = '/' + API_version + '/workspaces/' + workspace_uid + '/elements/canvas/' + canvas_id + '/documents'
file_type_key = 'document'
elif file_extension in image_extensions:
API_endpoint = '/' + API_version + '/workspaces/' + workspace_uid + '/elements/canvas/' + canvas_id + '/images'
file_type_key = 'image'
else:
is_supported_extension = False
if is_supported_extension:
the_params = {
'x': xx,
'y': yy,
'title': this_file,
'scale': 1,
}
print("Data_load:", str(the_params))
print(portal + API_endpoint)
# NOTE for this library: do not use "Content-Type" in headers, does not need to be set to 'multipart/form-data', it is set automatically
the_request = requests.post(
portal + API_endpoint,
headers={"Authorization": "Bearer " + token
},
params=the_params,
files={ file_type_key : (this_file, open(full_path_file, "rb")) }
)
json_response = the_request.json()
# pprint.pprint(json_response) # uncomment if you want to see response
delta = 1300
if the_request.status_code == 200:
yy += delta
else:
print("[[ERROR]] Could not upload object. Status code: " + str(the_request.status_code))
# Check if the objects's position is outside the canvas. If so, start in new column
if yy > canvas_height:
yy = 200
xx += delta
// Node.js Javascript
// Upload method:
var request = require('request');
var path = require('path');
var fs = require('fs');
/*
How to run:
node this_script_name.js
Requires "request" module, run:
npm install request
*/
const token = '<SET_YOUR_TOKEN_HERE>';
const portal = 'https://api.apps.us.bluescape.com';
const workspace_uid = '<SET_WORKSPACE-UID_HERE>';
const api_version = 'v2';
var api_endpoint = '/' + api_version + '/workspaces/' + workspace_uid + '/elements/images';
var method = '';
const canvas_x = 0;
const canvas_y = 0;
const canvas_width = 3000;
const canvas_height = 6000;
// Canvas coordinates are from its top left corner, relative from there
var xx = 100;
var yy = 200;
function runUploadRequest(portal,api_endpoint,method,data_load){
return new Promise((resolve, reject) => {
var request_values = {
uri : portal + api_endpoint ,
method : method ,
headers : {
'Authorization': "Bearer " + token,
'Content-Type' : 'multipart/form-data'
},
formData : data_load
};
request(request_values, function (error, response, body) {
if (!error && response.statusCode == 200) {
// Print out the result
console.log("Successful request. Body response: " + JSON.stringify(body,null," "));
} else {
reject('Invalid status code <' + response.statusCode + '>');
}
resolve(body);
})
});
}
function runRequest(portal,api_endpoint,method,data_load) {
return new Promise((resolve, reject) => {
var request_values = {
uri : portal + api_endpoint ,
method : method ,
headers : {
'Authorization': "Bearer " + token,
'Content-Type' : 'application/json'
},
body : data_load,
json: true
};
request(request_values, function (error, response, body) {
if (!error && response.statusCode == 200) {
// Print out the result
console.log("Successful request. Body response: " + JSON.stringify(body,null," "));
} else {
reject('Invalid status code <' + response.statusCode + '>');
}
resolve(body);
})
});
}
async function asyncForEach(array, callback) {
for (let index = 0; index < array.length; index++) {
await callback(array[index], index, array);
}
}
async function runAPIRequests() {
try {
// Create canvas
api_endpoint = '/v2/workspaces/' + workspace_uid + '/elements/canvas';
method = 'POST';
var currtime = new Date().toISOString().slice(0,16).replace('T',' ');
var data_load = {
'x': canvas_x,
'y': canvas_y,
'width': canvas_width,
'height': canvas_height,
'name': "New Canvas - Creation time: " + currtime ,
'borderColor': 'Red'
}
const canvasResponse = await runRequest(portal,api_endpoint,method,data_load);
const canvas_id = canvasResponse['canvas']['id'];
// Let's upload the files into the Canvas
// Supported: png, jpeg, gif, tiff, pdf, docx, pptx, xlsx, doc, ppt, xls
var allowedDocExtensions = new RegExp(/.*\.(pdf|docx|pptx|xlsx|doc|ppt|xls)$/i);
var allowedImageExtensions = new RegExp(/.*\.(jpg|png|jpeg|tiff)$/i)
const pathSource = '<SET_FULL_PATH_TO_YOUR_LOCAL_FOLDER>';
var myPath = path.dirname(pathSource +'*'); // Absolute path
// passsing myPath and callback function
fs.readdir(myPath, function (errorIssue, files) {
//handling error
if (errorIssue) {
return console.log('Unable to read directory: ' + errorIssue);
}
asyncForEach(files, async(filename) => {
var api_endpoint = '';
var file_type_key = '';
var is_supported_extension = true;
// Check if the file is a supported one for uploading.
if (allowedDocExtensions.test(filename) ){
api_endpoint = '/v2/workspaces/' + workspace_uid + '/elements/canvas/' + canvas_id + '/documents';
file_type_key = 'document';
} else if (allowedImageExtensions.test(filename)) {
api_endpoint = '/v2/workspaces/' + workspace_uid + '/elements/canvas/' + canvas_id + '/images';
file_type_key = 'image';
} else {
is_supported_extension = false;
}
if (is_supported_extension) {
console.log("Going to update: " + filename);
console.log("File type: " + file_type_key)
var data_load = {
'x': xx,
'y': yy,
'title': filename,
'scale': 1,
};
// Cannot add values for the keys using a variable name, it uses the name of the variable instead of its value.
data_load[file_type_key] = fs.createReadStream( pathSource + filename );
method = 'POST';
try {
var uploadResponse = await runUploadRequest(portal,api_endpoint,method,data_load);
} catch (error) {
console.error('ERROR when uploading content for file '+ filename);
console.error(error);
}
delta = 1600;
yy += delta;
// Check if the object's position is outside the canvas. If so, start in new column
if (yy > canvas_height){
yy = 200;
xx += delta;
}
}
} );
});
} catch (error) {
console.error('ERROR:');
console.error(error);
}
}
// Run the requests
runAPIRequests();
Upload Method: Remote URL
# Python Code (python 3.5+) import requests import pprint ''' Upload an image to a Workspace from a URL, directly from a URL without a staging object. Required Libraries: - requests 2.22.0 ''' token = '' if __name__ == "__main__": portal = 'https://api.apps.us.bluescape.com' workspace_uid = ' ' API_version = 'v2' params = '' API_endpoint = '/' + API_version + '/workspaces/' + workspace_uid + '/elements/images' # URL of the image, public URL objectURL = ' ' # The minimum needed is just the 'url' key data_load = { 'url' : objectURL, 'scale' : 3, 'x' : 100, 'y' : 100 } # Run the upload try: the_request = requests.post( portal + API_endpoint, headers={"Authorization": "Bearer " + token }, params = params, json=data_load ) json_response = the_request.json() pprint.pprint(json_response) if the_request.status_code != 200: # Error found print("Error found:") print(the_request) else: json_response = the_request.json() pprint.pprint(json_response) except Exception as e: print("Error: ", str(e))
// Node.js Javascript
var request = require('request');
/*
Uploads an image into a workspace using the URL of the image as source of the image
How to run:
node this_script_name.js
Requires "request" module, version 2.88.2, run:
npm install [email protected]
*/
const token = '';
const portal = 'https://api.apps.us.bluescape.com';
const workspace_uid = '';
const api_version = 'v2';
var api_endpoint = '/' + api_version + '/workspaces/' + workspace_uid + '/elements/images';
const imageURL = ''
const imageURL = 'https://kinsta.com/wp-content/uploads/2017/04/change-wordpress-url-1-1024x512.png'
var options = {
'method': 'POST',
'url': portal + api_endpoint,
'headers': {
'Authorization': 'Bearer ' + token
},
formData: {
'url': imageURL,
'x': 1000,
'y': 1000
}
};
request(options, function (error, response) {
if (error) throw new Error(error);
console.log(response.body);
});
OUTPUT
Each time you run a POST API, you will get back a Response Body with the properties of the newly created object. Within this data you can get the object ID and other important information.
| Element | Json | Comments |
| Image ID | ['images'][N]['id'] | where N is the N-th workspace in the list. |
| Image Title | ['workspaces'][N]['title'] | where N is the N-th workspace in the list. |
| Image URL | ['workspaces'][N]['url'] | where N is the N-th image in the list. |
Output Json sample
Canvas creation
From this answer you can obtain the newly created Canvas ID: ['canvas']['id']{'canvas': {'borderColor': 'Yellow',
'height': 4000,
'id': '5d3f40a660c539001477f4ea',
'name': 'New Canvas - Creation time: 2019-07-29 11:53:26.290894',
'order': 215,
'width': 4000,
'x': 10000,
'y': 1000}
}
Note Creation
{'note': {'backgroundColor': 'Red',
'fontWeight': 'normal',
'height': 320,
'id': '5d3f40a7b068af0014933ae2',
'order': 216,
'pin': False,
'scale': 1,
'text': 'Hello! New note, added at 2019-07-29 11:53:26.791257',
'width': 560,
'x': 10400,
'y': 1400}
}
If you have any questions or comments, please contact us at Bluescape support.