commit and get image via Bitbucket API using javascript

[guruprasad mahale]

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'

};

fetch("https://api.bitbucket.org/2.0/repositories/guruprasadgm06/visualregressionimages/src", requestOptions)

.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("https://api.bitbucket.org/2.0/repositories/<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));

[Mark C · Accepted solution]

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:

HTML:

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

JQuery:

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

fileTag.addEventListener("change", function() {
  changeImage(this);
});

function changeImage(input) {
  var reader;
  if (input.files && input.files[0]) {
        reader = new FileReader();
        reader.onload = function(e) {
        preview.setAttribute('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);

    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": "https://api.bitbucket.org/2.0/repositories/workspace_id/repo_name/src",
      "method": "POST",
      "headers": {
        "Authorization": "Basic <SOME_CREDENTIALS_HERE>"
      },
      "processData": false,
      "contentType": false,
      "mimeType": "multipart/form-data",
      "data": form
    };

    $.ajax(settings).done(function (response) {
      console.log(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.

Regards,
Mark C