Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
Community Members
Community Events
Community Groups

commit and get image via Bitbucket API using javascript


I am trying to commit a png file to a bitbucket cloud repo via Bitbucket API using javascript, not using any js dependency as I am not running it as server but just on browser.


Commit image:

var myHeaders = new Headers();
myHeaders.append("Authorization", "Basic XXXXXX");

var formdata = new FormData();
formdata.append("message", "automatedImageUpload");
formdata.append("branch", "master");
formdata.append("text/Image.png", <how should the image be passed here and what format>);

var requestOptions = {
method: 'POST',
headers: myHeaders,
body: formdata,
redirect: 'follow'

.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));

Also the same with getting the image:

var myHeaders = new Headers();
myHeaders.append("Authorization", "Basic XXXXXXXXXX");

var requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'

fetch("<user>/<repo>/src/master/Image/myImage.png", requestOptions)
.then(response => response.text())
.then(result => console.log(result)
img.src=result<how the image should be assigned to the img element?>
.catch(error => console.log('error', error));

1 answer

1 accepted

1 vote
Answer accepted
Mark C Atlassian Team Oct 20, 2021

Hi @guruprasad mahale

Welcome to the community.

Based on my understanding, you wanted to upload a PNG file from a browser to your Bitbucket Cloud repository.
If that's correct, according to our API documentation here you'll have to use the multipart/form-data as your MIME type.
Also, you will also need to obtain the image source before you can upload it (e.g. Upload input tag data).

As an example, below I used HTML and Jquery to upload a file to my repository:


<input type="file" id="filetag">
<img src="" id="preview">


var fileTag = document.getElementById("filetag"),
preview = document.getElementById("preview");

fileTag.addEventListener("change", function() {

function changeImage(input) {
  var reader;
  if (input.files && input.files[0]) {
        reader = new FileReader();
        reader.onload = function(e) {

    const form = new FormData();
    form.append("some_image.png", input.files[0]);
    form.append("branch", "master");
    form.append("message", "Test upload");

    const settings = {
      "async": true,
      "crossDomain": true,
      "url": "",
      "method": "POST",
      "headers": {
        "Authorization": "Basic <SOME_CREDENTIALS_HERE>"
      "processData": false,
      "contentType": false,
      "mimeType": "multipart/form-data",
      "data": form

    $.ajax(settings).done(function (response) {

To get the PNG file from your repository via API, the response would be in binary.
Hence, you will need to convert that binary response first before you can use it in your image src attribute.

Hope it helps and let me know how it goes.

Mark C

Suggest an answer

Log in or Sign up to answer
Community showcase
Published in Bitbucket

Git push size limits are coming to Bitbucket Cloud starting April 4th, 2022

Beginning on April 4th, we will be implementing push limits. This means that your push cannot be completed if it is over 3.5 GB. If you do attempt to complete a push that is over 3.5 GB, it will fail...

2,243 views 2 9
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you