nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Bitbucket API commit image and base64 encoding

zanedev

I'm using nodejs to push up an image to a repo from the src endpoint using multipart/form post and no matter how I send it, binary, text, raw it's always unusable after upload. What is the proper way to upload an image from node? I have successfully pushed plain text files but not images/binary data. I am using the npm FileReader package to read the file contents and I've tried

readAsArrayBuffer

readAsBinaryString

readAsText

but nothing seems to work. I'm using the npm package "form-data" to do the form post which works fine for regular text files.

Also is base64 encoding supported? It doesn't appear to be supported because the api doesn't decode the file after upload and I can't send the "Content-Transfer-Encoding": "base64" header because it's not allowed from the CORS pre-flight request. Seems like base64 encoding is important for multipart form posts of binary data.

Any help appreciated!

Accepted answers

zanedev

In case anybody is looking for this here is the function we needed to make our uploaded binary files work, thanks to @taussoe for the snippet!

Check out netlify cms for the implementation soon.

dataURItoBlob(dataURI) {
// convert base64 to raw binary data held in a string
  // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
  var byteString = atob(dataURI.split(',')[1]);

// separate out the mime component
  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

// write the bytes of the string to an ArrayBuffer
  var ab = new ArrayBuffer(byteString.length);

// create a view into the buffer
  var ia = new Uint8Array(ab);

// set the bytes of the buffer to the correct values
  for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
  }

// write the ArrayBuffer to a blob, and you're done
  var blob = new Blob([ab], {type: mimeString});
return blob;

}

All comments

zanedev

Crickets Anybody have any ideas here? Anybody uploading binary data using node/javascript to the bitbucket api?

zanedev

In case anybody is looking for this here is the function we needed to make our uploaded binary files work, thanks to @taussoe for the snippet!

Check out netlify cms for the implementation soon.

dataURItoBlob(dataURI) {
// convert base64 to raw binary data held in a string
  // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
  var byteString = atob(dataURI.split(',')[1]);

// separate out the mime component
  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

// write the bytes of the string to an ArrayBuffer
  var ab = new ArrayBuffer(byteString.length);

// create a view into the buffer
  var ia = new Uint8Array(ab);

// set the bytes of the buffer to the correct values
  for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
  }

// write the ArrayBuffer to a blob, and you're done
  var blob = new Blob([ab], {type: mimeString});
return blob;

}

NerdyDeeds

Aaaaaand a one. I am! At least, now I found how to convert the damn images to blobs! Thank you Zane!

guruprasad mahale

Hi @zanedev any luck yet with commiting image to Bitbucket via api?

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

bitbucket

api