Develop Reference

JS convert base64 image to image file

Basically I have an img on a server and I access that using fetch which also authenticates the img. Ive seen online that I would need to convert it to base64 in order to display it. Im using React and ANTD and its for an image uploader. The uploading part is fine but the problem is when I log back into the page, I only have the file name saved so I need to make the call to the server which is in the fetch. Then I try to set the new vars to logoFileList. I need to see the image preview. What properties of the image object does the antd file uploader use?
fetch()
.then(res => {
const data = `${Buffer.from(res.url).toString(base64)}`;
const fileList = [...logoFileList];
fileList[index].url = data;
fileList[index].thumbUrl = data;
setLogoFileList(fileList);
})
Ive spent all day working on this any help would be great. Thanks.
I cant just display the image url because its authenticated and gives me a 403 error.

How can I upload base64 to s3 directly with base64-arraybuffer from react-native?

I'm trying to upload base64 image to s3 bucket with only base64 string. I don't want to save file but I was able to get base64 string.
Previously, I 've used
const arrayBuffer = decode(base64);
Which worked fine when I had uri which was from local file. But I tried passing base64 string directly to decode from base64-array as above skipping readFile function, it is uploading broken file. Is there a way to resolve this?

How to process raw jpeg data into a file in javascript

I'm trying to create a jpeg file from raw data in javascript
I've been using the google file picker api to allow users to select their images from drive and import into my application, but when I make the request to download the image google responds with raw data that looks like this:
Google's response
I have tried placing that data into a blob with:
var blob = new Blob([res.text], {type: 'image/jpeg'})
I have also tried placing the data into a file.
var file = new File([res.text], 'image.jpeg', {type:"image/jpeg"})
However the file only renders black pixels. How can I go about generating a jpeg file from that data so I can upload to my server?
Update(Solution):
I switched my request api to fetch and used .blob() on the response

For superagent see http://visionmedia.github.io/superagent/#parsing-response-bodies -> Binary and http://visionmedia.github.io/superagent/#response-properties -> Response body.
You need to use .responseType('blob') and res.body.
https://stackblitz.com/edit/js-so-how-to-process-raw-jpeg-data-into-a-file-in-javascript

How to find image uploaded status from url or file name?

I have used cloudinary. I have uploaded an image to cloudinary and I want to get that image status from cloudinary that it is uploaded or not using cloudinary URL or from image name.
I am using jQuery and I want to display a list of images with their status uploaded on cloudinary. I have URL stored in my database.
Can anyone have an idea on this?

You can utilize the upload response (JSON) for this matter, as described here.

Display Blob data retrieved from MySQL Database using JavaScript

Using a web service, I was able to retrieve some data from a MySQL Database. The database has an image saved in it, which had the file type of BLOB. This is what my web service returns when it comes to the image:
<image>
/9j/4AAQSkZJRgABAQEAYABgAAD/7TaeUGhvd.....RRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQB//Z
</image>
Now I am having trouble making my JavaScript application convert this data and then display it as an image. I researched on it a bit and found a couple of tutorials online but somehow they did not work for me....can anyone please help me with this issue? What is the simplest way I can convert BLOB data to an image? Thanks in advance!

Assuming the blob has base64 encoded PNG data, you can use data-uri to set data directly to image e.g.
var imgdata = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
$('#myimg').attr('src', "data:image/png;base64,"+imgdata)
Assumption here is that data returned from server is base64 encoded, but if that is not the case you can see various options but ultimately you may have to do proper conversion in server side, in that case why not just return the url to image and create a API on server side to return images from blob
Here is a jsfiddle in action http://jsfiddle.net/anuraguniyal/4DEtH/5/
Edit:
I am not sure what language you use server side but process will be same for each language e.g.
>>> s='\x89PNG\r\n\x1a\n\x00\x00\x00\rIHDR\x00\x00\x00\x05\x00\x00\x00\x05\x08\x06\x00\x00\x00\x8do&\xe5\x00\x00\x00\x1cIDAT\x08\xd7c\xf8\xff\xff?\xc3\x7f\x06 \x05\xc3 \x12\x84\xd01\xf1\x82X\xcd\x04\x00\x0e\xf55\xcb\xd1\x8e\x0e\x1f\x00\x00\x00\x00IEND\xaeB`\x82'
>>> import base64
>>> base64.b64encode(s)
'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
i.e. take all data, as will be stored in file (not the png marker too), not just raw image data and encode it