Upload image in contentful media library

Question

Can anyone guide me how to upload an image in contentful media library via angularjs or javascript?

I had gone through contentful documentation and i am unable to find anything.

I found this snippet but i don't think so it uploads in media library:

var request = new XMLHttpRequest();

request.open('POST', 'https://api.contentful.com/spaces/5smsq22uwt4m/assets');

request.setRequestHeader('Authorization', 'Bearer b4c0n73n7fu1');
request.setRequestHeader('Content-Type', 'application/vnd.contentful.management.v1+json');

request.onreadystatechange = function () {
  if (this.readyState === 4) {
    console.log('Status:', this.status);
    console.log('Headers:', this.getAllResponseHeaders());
    console.log('Body:', this.responseText);
  }
};

var body = "{ \
  'fields': { \
    'title': { \
      'en-US': 'Bacon Pancakes' \
    }, \
    'file': { \
      'en-US': { \
        'contentType': 'image/jpeg', \
        'fileName': 'example.jpeg', \
        'upload': 'https://example.com/example.jpg' \
      } \
    } \
  } \
}";

request.send(body);

Any help is appreciated, Thanks.

Answer 1

Uploading an image, or any media Asset on Contentful has two steps: - Creating the Asset (or alternatively, updating an existing one) - Triggering processing

When you create/update an asset you can provide it with an url where the asset will be fetched from.

Unfortunately, via the API there is no way right now to upload assets from your local computer (you can do so via the UI).

After you create/update the asset, you need to trigger processing. Processing will fetch the asset and upload it into the Contentful system.

If you use contentful-management.js, the Management API SDK, you can see how to create an asset and how to process an asset .

After the asset is processed, it will be in draft state. In order to make it available to the world you need to publish it .

However, be aware that you can only publish it when the upload property in the file is changed to an url property. That means the asset has finished processing.

Unfortunately at the moment there isn't a callback or any sort of notification of when an asset has actually finished processing, so you'll need to fetch the asset and see if the property has changed, and if not, try again.

Hope that helps.