Uploading the Logo of an Event

Let's learn how to upload the logo of an event using the Eventbrite API.

Uploading a logo

The Eventbrite API provides the facility to upload a logo for an event. The logo is uploaded to Eventbrite’s online repository, and the uploaded logo can be assigned to an event.

The following URL utilizes the POST request method to upload an image:

https://www.eventbriteapi.com/v3/media/upload/

In the code widget below, the upload_file function will read an image and upload it to Eventbrite’s online storage. We have specified the type of the file image-event-logo. This function returns the response status and upload_token. The upload_token is used to fetch the details of the uploaded image.

Request parameters

The request parameter for this operation is an image.

The code below is an example of uploading an image. It asks for an image as input.

Press + to interact
// Importing libraries here
import fetch, { FormData, fileFromSync } from 'node-fetch';
let OAUTH_TOKEN = '{{PRIVATE_TOKEN}}'
let MEDIA_UPLOAD_URL = 'https://www.eventbriteapi.com/v3/media/upload/'
// Function to make API call
async function uploadLogo() {
try {
// Getting initial upload URL
const instructions_url = MEDIA_UPLOAD_URL + '?' + 'type=image-event-logo&token=' + OAUTH_TOKEN;
const res = await fetch(instructions_url, { method: 'GET' });
const content = await res.json();
const postArgs = content['upload_data'];
const uploadURL = content['upload_url'];
const uploadToken = content['upload_token'];
// File Upload
const fileBody = new FormData();
const myFile = fileFromSync('__ed_input.png');
// File Appending
for (const [key, value] of Object.entries(postArgs)) {
fileBody.append(key, value);
}
fileBody.append('file', myFile);
const headerParameters = {
'Content-Type': 'application/json'
};
const options = {
method: 'POST',
body: fileBody,
};
const response = await fetch(uploadURL, options);
const data = await response.text();
const notifyUrl = MEDIA_UPLOAD_URL + '?' + 'token=' + OAUTH_TOKEN;
const imageData = { 'upload_token': uploadToken, 'crop_mask': { 'top_left': { 'y': 1, 'x': 1 }, 'width': 1280, 'height': 640 } };
const imgRes = await fetch(notifyUrl, { method: 'POST', headers: headerParameters, body: JSON.stringify(imageData) });
const imgContent = await imgRes.json();
//rendering the image using html
console.log(`<img src=${imgContent['url']} width=500px>`);
console.log(`<br>Logo Id: `, imgContent['id']);
console.log(`<br>URL: `, imgContent['original']['url']);
} catch (error) {
console.log(`This is the error: ${error}`);
}
}
uploadLogo();
  • Line 2: We import the required libraries.
  • Line 5: We define the endpoint URL to upload the logo.
  • Line 11–16: We have used the fetch function with the GET method to retrieve the upload_token, upload_url, and upload_data. These values will be used in the next steps.
  • Line 19–36: We upload the logo using the upload_url with the POST method.
  • Line 38–41: We uploaded the logo in the previous step. Now, notify the API by sending the upload_token.
  • Line 44–45: We are rendering the uploaded image and printing the logo I.
  • Line 51: We invoke the uploadLogo function.

Response fields

The response object has the following important attributes:

Object

Type

Description

id

String

Unique id of the uploaded image

crop_mask

Object

An object with details of crop size

aspect_ratio

String

Tells how much the uploaded image is smaller or larger than the original image

edge_color

Color code

Value of color on the edges of the image

edge_color_set

Boolean

Tells whether or not to set the border color

url

String

The url of the cropped image

original.height

Integer

The height of the original image

original.width

Integer

The width of the original image

original.url

String

The url ofthe original image

We can visit the returned url to view the image. The returned id can be used to update the logo_id of the event using the updated API call or we can provide it during the creation of an event.

Assigning a logo to an event

To assign a logo to an event, provide the EVENT_ID and LOGO_ID in the widget below if they are not ther already:

Press + to interact
const endpointUrl = new URL('https://www.eventbriteapi.com/v3/events/{{EVENT_ID}}/');
const headerParameters = {
'Authorization': 'Bearer {{PRIVATE_TOKEN}}',
'Content-Type': 'application/json'
};
const bodyParameters = JSON.stringify({
"event": {
"logo_id": "{{LOGO_ID}}"
}
});
const options = {
method: 'POST',
headers: headerParameters,
body: bodyParameters
};
async function uploadLogo() {
try {
const response = await fetch(endpointUrl, options);
printResponse(response);
} catch (error) {
printError(error);
}
}
// Calling function to make API call
uploadLogo();
  • Line 1: We define the endpoint URL; it has EVENT_ID as the URL parameter.
  • Line 3–6: We define the header, which includes the authorization token and content type.
  • Line 8–12: We define the request parameters required to upload a logo for an event.
  • Line 14–18: We set the API call options by specifying the header and body, and by setting the request method as POST.
  • Line 20–27: We create a function uploadLogo to make an API call using fetch and to handle any exception if it occurs. The custom functions printResponse and printError print the respective objects.
  • Line 30: We invoke the uploadLogo function.

We can visit the event page after the logo is updated using the returned url of the event to see the updated logo.