Display image from API - javascript

I got problem how to display image send by API from backend it not display. And when I console.log, I got this error.
This is my code as your reference.
HTML
<img [src]="imageToShow" style="width:100%;margin-left: -14px;">
Component
ngOnInit() {
this.getBanner()
}
getBanner() {
this.bannerId = {
confId: 1,
type: "Banner",
};
this.httpService.getBanner(this.bannerId).subscribe(
(baseImage: any) => {
let objectURL = "data:image/jpeg;base64," + baseImage.image;
this.imageToShow = this.sanitizer.bypassSecurityTrustUrl(objectURL);
},
(error) => {
// this.isImageLoading = false;
console.log(error);
}
);
}
Service
public getBanner(data){
console.log(data)
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
responseType: 'blob',
Authorization: 'Bearer '+this.getToken()
})
};
return this.httpClient.post((this.serverUrl + this.basePath + '/landing/conferenceitem'),data,httpOptions);
}
edit
when I check up Network Response I got this image

Try this
Step #1
Remove Content-Type header and set responseType to blob in httpOptions, but not in the header part like you did. Now, you should get a blob as a response. Before, angular was trying to parse your response as JSON, hence the error
public getBanner(data){
console.log(data)
const httpOptions = {
headers: new HttpHeaders({
Authorization: 'Bearer '+this.getToken()
}),
responseType: 'blob'
};
return this.httpClient.post((this.serverUrl + this.basePath + '/landing/conferenceitem'),data,httpOptions);
}
Step #2 Use baseImage instead of baseImage.image (the response is a blob, it does not have an image property), and then use createObjectURL to get an image url from the blob. Sanitize that URL like your did
this.httpService.getBanner(this.bannerId).subscribe(
(baseImage: Blob) => {
let objectURL = URL.createObjectURL(baseImage);
this.imageToShow = this.sanitizer.bypassSecurityTrustUrl(objectURL);
},
(error) => {
// this.isImageLoading = false;
console.log(error);
}
);

One way to fix this is by Setting the response type to blob
const requestOptions: Object = {
/* other options here */
responseType: 'blob'
}
return this.httpClient.post((this.serverUrl + this.basePath + '/landing/conferenceitem'),data,requestOptions);
and you have to convert your image data to a dataURL:
this.httpService.getBanner(this.bannerId).subscribe(
(baseImage: any) => {
this.imageToShow = baseImage;
},
(error) => {
// this.isImageLoading = false;
console.log(error);
}
);

Change Your getBannerMethod as below :-
getBanner() {
this.bannerId = {
confId: 1,
type: "Banner",
};
this.httpService.getBanner(this.bannerId).subscribe(
(baseImage: any) => {
const reader = new FileReader();
const url = reader.readAsDataURL(baseImage.image);
reader.onloadend = () => this.imageToShow = reader.result;
},
(error) => {
// this.isImageLoading = false;
console.log(error);
}
);
}
Working Stackblitz :- https://stackblitz.com/edit/angular-yvicvq

Related

Upload file to s3 using presigned post url in the server

TDLR: Using s3 presigned post url to upload file to s3. Works fine on the browser but fails on the server.
I have a simple lambda function that generates presigned post url that can be consumed either in the browser or in the server.
During testing I noticed that the upload works fine one the browser but fails if I try to upload a file from a server even tho the code is identical.
The error i get is:
You must provide the Content-Length HTTP header
Detailed error:
<?xml version="1.0" encoding="UTF-8"?>
<Error>
<Code>MissingContentLength</Code>
<Message>You must provide the Content-Length HTTP header.</Message>
<RequestId>JP75YMFARK0G3X5Z</RequestId>
<HostId>toHsKmxmVYYAtac94cQoy8wXoregKG3PNBm97c3gQewEmKxLggcumTAP882T/pJNWx/lxRgH98A=</HostId>
</Error>
Request failed with status code 411
I checked online and found many threads about this issue but unfortunately not a single suggestion helped me.
Code I am running in the server
const axios = require('axios');
const { createReadStream, readFileSync } = require('fs');
const FormData = require('form-data');
const getPostPresignedUrl = async () => {
var config = {
method: 'post',
url: LAMBDA_GET_URL,
headers: {
'Content-Type': 'application/json',
},
data: JSON.stringify({
key: 'test-2.jpg',
fileType: 'image/jpeg',
}),
};
const {
data: { data },
} = await axios(config);
return data;
};
const uploadFileToS3 = async (fields, url) => {
const formData = new FormData();
Object.entries(fields).map(([key, value]) => {
formData.append(key, value);
});
const file = createReadStream('./test-1.jpg');
formData.append('file', file);
try {
const { data } = await axios({
url,
method: 'post',
headers: {
'Content-Type': 'multipart/form-data',
},
data: formData,
});
} catch (error) {
if (error instanceof axios.AxiosError) {
console.log(error.response.data);
}
console.log(error.message);
}
};
const init = async () => {
const { fields, url } = await getPostPresignedUrl();
await uploadFileToS3(fields, url);
};
init();
Code I am running in the browser:
const form = document.getElementById('form');
const input = document.getElementById('file');
const getPostPresignedUrl = async (name) => {
var config = {
method: 'post',
url: LAMBDA_GET_URL,
headers: {
'Content-Type': 'application/json',
},
data: JSON.stringify({
key: name,
fileType: 'image/jpeg',
}),
};
const {
data: { data },
} = await axios(config);
return data;
};
const uploadFileToS3 = async (fields, url, file) => {
const formData = new FormData();
Object.entries(fields).map(([key, value]) => {
formData.append(key, value);
});
formData.append('file', file);
try {
const { data } = await axios({
url,
method: 'post',
headers: {
'Content-Type': 'multipart/form-data',
},
data: formData,
});
} catch (error) {
if (error instanceof axios.AxiosError) {
console.log(error.response.data);
}
console.log(error.message);
}
};
const handleSubmit = async (e) => {
e.preventDefault();
const file = input.files[0];
const data = await getPostPresignedUrl(file.name);
await uploadFileToS3(data.fields, data.url, file);
};
form.onsubmit = handleSubmit;

EXPO React Native - AXIOS + FORMDATA PROBLEM

i have an issue with POST request inside my app.
part of code :
if (imagesResults !== undefined) {
imagesResults.forEach((el) => {
let localUri = el.uri;
let filename = localUri.split("/").pop();
let match = /\.(\w+)$/.exec(filename);
let type = match ? `image/${match[1]}` : `image`;
formData.append("saleImages[]", {
uri: localUri,
name: filename,
type: type,
});
});
}
console.log("FORMDATA", formData);
const axiosConfig = {
headers: {
Authorization: "Bearer " + user.token,
"content-type": "application/x-www-form-urlencoded",
Accept: "application/json",
},
};
try {
axios
.post(`${API}/sales/${saleId}/edit`, formData, axiosConfig)
.then((res) => {
// console.log("RES", JSON.stringify(res.data));
bottomSheetRef.current.snapToIndex(0);
setTimeout(() => {
bottomSheetRef.current.close();
dispatch(setLoadingApiAction(false));
navigation.navigate("My Ads");
}, 3000);
})
.catch((err) => {
console.log("error", err);
// setErrors(err.response.data.errors);
navigation.navigate("My Ads");
alert("SOMETHING IS WRONG!");
dispatch(setLoadingApiAction(false));
});
} catch (error) {
console.log("ERROR CATCH", error);
dispatch(setLoadingApiAction(false));
}
};
so what is happening, i fire my API, and i get 200 but just after i get 200 it return me also a network error and goes into .catch part.
This is only happening in ANDROID DEVICE , IOS working totally fine.
I am using a HTTPS , also i tried to set type of the image hardcoded into "image/jpeg" but i got the same problem.

Vuejs won't send correct data

I have image field, when I change the image it does change the image and before I send it to back-end I can see the values are correct, but sent data values are empty!
Code
Commented
save_changes() {
/* eslint-disable */
if (!this.validateForm) return;
console.log("image: ", this.data_local.image); // new image data are present
this.$http
.put(
"/api/admin/posts/meta/" + this.$route.params.id,
this.data_local, // new image data is empty!
{
headers: {
Authorization: localStorage.getItem("access_token"),
},
}
)
.then((res) => {
}
//rest of it...
},
update_avatar(event) {
this.dialogVisible = true;
this.dialogImageUrl = URL.createObjectURL(event.target.files[0]);
this.data_local.image = event.target.files[0]; // this is where I sent selected image and pass it to my `data_local` array objects
},
Screenshots
Any suggestions?
Update
header request
What you can try is to send it as an FormData
let file = this.data_local.image
let image = URL.createObjectURL(file)
let formData = new FormData();
formData.append("image", image);
formData.append("id", 71);
formData.append(....)
this.$http
.put(
"/api/admin/posts/meta/" + this.$route.params.id,
formData,
{
headers: {
Authorization: localStorage.getItem("access_token"),
},
}
)
.then((res) => {
}
The headers should look something like this:
Your image should have this (binary)

Post action API with object parameter within the URL

I've got an API where some of the parameters need to be given within the URL.
Example of how my api url looks like: https://www.server.com/api/actions/execute?auth_type=apikey&data={"Name": "name","Email" : "email"}
What my code looks like right now
register = async () => {
let data = {"Name":this.state.name, "Email":this.state.email}
data = JSON.stringify(data)
let URL = 'https://www.server.com/api/actions/execute?auth_type=apikey&data=';
fetch(URL, {
method: 'POST',
headers: new Headers({
'Content-Type': 'application/json'
}),
body: data
})
.then((response) => response.text())
.then((responseText) => {
alert(responseText);
})
.catch((error) => {
console.error(error);
});
}
The response I get on my device:
{"code":"succes","details":{"userMessage":["java.lang.Object#2e56000c"],"output_type":void","id:"20620000000018001"},"message":"function executed succesfully"}
This is alle working fine when I test it in postman but I can't get it to work within React-Native. I've tried stuff like 'Content-Type':'application/x-www-form-urlencoded' already.
First install the package axios from the url https://www.npmjs.com/package/react-native-axios
Then create two service for handling get and post request so that you can reuse them
GetService.js
import axios from 'axios';
let constant = {
baseurl:'https://www.sampleurl.com/'
};
let config = {
headers: {
'Content-Type': 'multipart/form-data',
'Accept': 'application/json'
}
};
export const GetService = (data,Path,jwtKey) => {
if(jwtKey != ''){
axios.defaults.headers.common['Authorization'] = 'Bearer '+jwtKey;
}
try{
return axios.get(
constant.baseUrl+'api/'+Path,
data,
config
);
}catch(error){
console.warn(error);
}
}
PostService.js
import axios from 'axios';
let constant = {
baseurl:'https://www.sampleurl.com/'
};
let config = {
headers: {
'Content-Type': 'multipart/form-data',
'Accept': 'application/json'
}
};
export const PostService = (data,Path,jwtKey) => {
if(jwtKey != ''){
axios.defaults.headers.common['Authorization'] = 'Bearer '+jwtKey;
}
try{
return axios.post(
constant.baseUrl+'api/'+Path,
data,
config
);
}catch(error){
console.warn(error);
}
}
Sample code for using get and post services is given below
import { PostService } from './PostService';
import { GetService } from './GetService';
let uploadData = new FormData();
uploadData.append('key1', this.state.value1);
uploadData.append('key2', this.state.value2);
//uploadData.append('uploads', { type: data.mime, uri: data.path, name: "samples" });
let jwtKey = ''; // Authentication key can be added here
PostService(uploadData, 'postUser.php', jwtKey).then((resp) => {
this.setState({ uploading: false });
// resp.data will contain json data from server
}).catch(err => {
// handle error here
});
GetService({}, 'getUser.php?uid='+uid, jwtKey).then((resp) => {
// resp.data will contain json data from server
}).catch(err => {
// handle error here
});
If you need to pass parameters via URL you should use GET, if you use POST then the parameters should be passed in the body

How to get user's photo(profile) using Microsoft Graph API?

When a GET(https://graph.microsoft.com/v1.0/users/ {{user_id}} /photo/$value) request is made, the response data will be written with the same characters as image
.
After converting to base64, I tried blob format but the picture does not appear.
router.js
router.get('/photo/:id',function (req,res) {
auth.getAccessToken().then(function (token){
let userId = req.params.id;
graph.getUserPhotoData(token, userId).then(function (result) {
res.json(result);
}).catch(function (e) { console.log(e) })
});
});
graph.js
function getUserPhoto(token, userId){
return axios({
method : 'get',
url : 'https://graph.microsoft.com/v1.0/users/'+{{user_id}}+'/photo/$value',
headers: {
'Authorization':token,
// 'Content-Type': 'image/jpeg',
},
responseType : 'blob'
})
}
async function getUserPhotoData(token,userId) {
try{
let userPhoto = getUserPhoto(token,userId);
let p = userPhoto.data;
// let photo = new Buffer(userPhoto.data).toString('base64');
return p; //...013O✿\u0011�e����|��>�4+�y��\u0017�"Y...
}catch (e) { console.log(e);}
}
index.js
$.get('/photo/'+userId, function(response) {
let binaryData = [];
binaryData.push(response);
const blobUrl = window.URL.createObjectURL(new Blob(binaryData, {type: "image/jpeg"}));
document.getElementById('user-img').setAttribute("src", blobUrl );
});
UPDATE: new Buffer is deprected. Please use
<img src={'data:image/jpeg;base64,' + Buffer.from(response.data, 'binary').toString('base64')}
Original answer
it works for me
const graphEndpoint = "https://graph.microsoft.com/v1.0/me/photo/$value";
const response = await axios(graphEndpoint, { headers: { Authorization: `Bearer ${token}` }, responseType: 'arraybuffer' });
const avatar = new Buffer(response.data, 'binary').toString('base64');
Finally found a solution to this! The previous answers didn't quite work for me. What I found that worked was:
const { data: photoValue} = await axios.request({
method: 'GET',
{ headers: { Authorization: `Bearer ${token}` },
responseType: 'blob',
url: 'https://graph.microsoft.com/v1.0/me/photo/$value',
});
const blobUrl = window.URL.createObjectURL(photoValue);
and then displaying it with <img src={blobUrl} />. This is the shortest answer in my opinion, and relies on the responseType: 'blob' being given.
I solved this problem.
router.js
const request = require('request');
router.get('/photo/:id',function (req,res) {
auth.getAccessToken().then(function (token){
let userId = req.params.id;
// graph.getUserPhotoData(token, userId).then(function (result) {
// console.log(result);
// res.json(result);
// }).catch(function (e) { console.log(e) })
request({ uri: 'https://graph.microsoft.com/beta/users/'+userId+'/photo/$value', method: "GET", headers:{'Authorization' : 'Bearer' + token}, encoding: null},
function(error, response, body) {
let data = "data:" + response.headers["content-type"] + ";base64," + new Buffer(body).toString('base64');
res.send(data); //data:image/jpeg;base64,/9j/4AAQSkZJRg...
});
});
});
index.js
$.get('/photo/'+ userId, function(response) {
document.getElementById('user-img').setAttribute("src", response);
});
'graph.js' is not needed.
reference :
Node.js get image from web and encode with base64

Categories

Resources