Uploading the Logo of an Event
Let's learn how to upload the logo of an event using the Eventbrite API.
We'll cover the following
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.
// Importing libraries hereimport 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 callasync function uploadLogo() {try {// Getting initial upload URLconst 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 Uploadconst fileBody = new FormData();const myFile = fileFromSync('__ed_input.png');// File Appendingfor (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 htmlconsole.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 theGET
method to retrieve theupload_token
,upload_url
, andupload_data
. These values will be used in the next steps. - Line 19–36: We upload the logo using the
upload_url
with thePOST
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 |
| String | Unique |
| Object | An object with details of crop size |
| String | Tells how much the uploaded image is smaller or larger than the original image |
| Color code | Value of color on the edges of the image |
| Boolean | Tells whether or not to set the border color |
| String | The |
| Integer | The |
| Integer | The |
| String | The |
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:
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 calluploadLogo();
- 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 functionsprintResponse
andprintError
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.