DEV Community

Cover image for Tweeting with an image using Node JS
Mahallawy
Mahallawy

Posted on

Tweeting with an image using Node JS

Introduction

This is my fourth tutorial about using Twitter API with Node JS. My previous tutorials are listed up there 👆.

In my first tutorial, I showed how to tweet with only text using Twitter API and Node JS, see here.
Then I got a question on how to tweet with an image, thanks to @thomasbnt and @generativexbot , so here I'll explain my way to do this.

Before we start

You need to have a Twitter Developer account and for the basic configurations please go here for more explanation as I follow the same structure.

Let's start

To tweet an image, the process will consist of two requests:
1- Uploading the image
2- Tweeting with that image

  • The new thing here is that each request uses a different subdomain in the Twitter API url, which means that a small change will be done on the config.js file.
const twitter = require('twitter-lite');

exports.newClient = function (subdomain = 'api') {
    return new twitter({
        subdomain,
        consumer_key: '',
        consumer_secret: '',
        access_token_key: '',
        access_token_secret: ''
    });
}
Enter fullscreen mode Exit fullscreen mode
  • Here I changed the configurations to be returned as a function instead of a JSON object. The function returns a twitter lite client that I moved its definition here for simplicity. The reason I did that is the new configuration attribute subdomain, which can be set from the function parameter.

-Now, we are ready to edit the index.js file. Some changes must be made after changing the config.js file:
1- Remove twitter lite definition
2- Define twitter lite clients for both subdomains to be used later

const apiClient = config.newClient();
const uploadClient = config.newClient('upload');
Enter fullscreen mode Exit fullscreen mode
  • I got this photo to be used with the tweet
    hello_world.png

  • Then we deal with the image file and make it ready for the upload by defining the fs and path modules.

const fs = require('fs');
const path = require('path');
Enter fullscreen mode Exit fullscreen mode
  • Then, read the file as a 64 based file.
const mediaFile = fs.readFileSync(path.join(__dirname, 'hello_world.png'));
const base64image = Buffer.from(mediaFile).toString('base64');
Enter fullscreen mode Exit fullscreen mode
  • Next, it's similar to what we did in this tutorial where a request is depending on the result of another request.

  • The first request is for uploading image using media/upload endpoint and the uploading subdomain. This means using uploadClient here and returns an object with media_id attribute which we save for the next step.

// Uploading an image
uploadClient.post('media/upload', { media_data: base64image })
    .then(media => {

    console.log('You successfully uploaded media');

    var media_id = media.media_id_string;
}).catch(console.error);
Enter fullscreen mode Exit fullscreen mode
  • You can see full details for this request here.

  • The second request is the normal tweeting using statuses/update endpoint to tweet with the image, which uses the apiClient.

// tweeting with text and image
apiClient.post('statuses/update', { status: 'Hello world!', media_ids: media_id })
    .then(tweet => {

    console.log('Your image tweet is posted successfully');
}).catch(console.error);
Enter fullscreen mode Exit fullscreen mode
  • You can see full details for this request here.

  • everything in place now and we can run the app in Command Prompt using:

node index.js
Enter fullscreen mode Exit fullscreen mode
  • That's it and your image is added to your tweet and takes its place in your friends timeline 😁.

Here's is the full code for index.js file:

const fs = require('fs');
const path = require('path');
const config = require('./config');
const apiClient = config.newClient();
const uploadClient = config.newClient('upload');

const mediaFile = fs.readFileSync(path.join(__dirname, 'hello_world.png'));
const base64image = Buffer.from(mediaFile).toString('base64');

uploadClient.post('media/upload', { media_data: base64image })
    .then(media => {

    console.log('You successfully uploaded media');

    var media_id = media.media_id_string;
    apiClient.post('statuses/update', { status: 'Hello world!', media_ids: media_id })
        .then(tweet => {

        console.log('Your image tweet is posted successfully');
    }).catch(console.error);

}).catch(console.error);
Enter fullscreen mode Exit fullscreen mode

In the following tutorial, we are going to explore more about twitter API. I have several ideas to share with you, so stay tuned 😉

For the full code, you can visit my github page.

If you like my tutorials, support me here ko-fi and follow me on Twitter Twitter URL

Top comments (5)

Collapse
 
thomasbnt profile image
Thomas Bnt ☕

Ooooh awesomeeee, I test that and I back to you :D

Collapse
 
charlesr1971 profile image
Charles Robertson

Wow. Wow. Wow. This is just what I need. Thank you so much! 🙏

Collapse
 
ahmed_mahallawy profile image
Mahallawy

I'm really glad to help 😀

Collapse
 
swarnasekhar profile image
SWARNA SEKHAR DHAR

great what should i do to post with multiple image

Collapse
 
ahmed_mahallawy profile image
Mahallawy • Edited

You can upload each media seperately up to 4 images and add the media_id_string value to a string variable with comma separation
Then update status with that variable