I have created an image uploader on my site and store the URL in my MongoDB. I used this guide to create my image uploader: https://appdividend.com/2018/05/25/angular-6-file-upload-tutorial/
However, when the file is stored in my MongoDB table it is a C:\\fakepath\\ url. When I try to display the url in a background-image url field via ngStyle I get the response:
Cannot read property 'image' of undefined
Here is my code for the .html page:
<div class="jumbotron" [ngStyle]="{ 'background-image': 'url(' + post.image + ')'}"></div>
The rest of the code follows suit to the guide for storing the image.
If there is a way to either modify the url before it is in the MongoDB or to eliminate the C:\\fakepath\\ and just append the end to the ./upload/ folder where the image is stored should work as well. I have tried also just using the {{post.image}} syntax and recieve the same result.
Please check the network call if you're really receiving the data
(post and url) from backend.
If you are then check the logic where you assign the backend response to variable post.
From the error, it seems that post has no value. Or you accessing it
the wrong way. Check if post is yourCtrl.post or something.
Related
I am doing a project using WhatsApp cloud API. I need to create a template with a media header. I have created a template with a media header without a sample image and it gets rejected. So I want to create a template with a sample image in Node JS.
Template with a media header
Add sample image for a template
curl -X POST "https://graph.facebook.com/v14.0/{whatsapp-business-account-ID}/message_templates
?name={template-name}
&language=en_US
&category=TRANSACTIONAL,
&components=[{
type:BODY,
text:{message-text}
},
{
type:HEADER,
format:IMAGE,
example:{header_handle:[{uploaded-image-file-url}]}
}],
&access_token={system-user-access-token}"
I want to add a sample image using Node JS (Not manually like the second picture).
header_handle requires a encrypted file upload provided by facebook.
This can be done by calling 2 apis.
First,
We have to create a session for the file to be uploaded.
For creating session refer this
After creating session, we will get session id to upload the original file to it.Response will look something like this:
{"id":"upload:MTphdHRhY2htZW50Ojlk2mJiZxUwLWV6MDUtNDIwMy05yTA3LWQ4ZDPmZGFkNTM0NT8=?sig=ARZqkGCA_uQMxC8nHKI"}
Second,We have to upload the file to
https://graph.facebook.com/v14.0/{above_id}
This will give a response something similar to
{"h":"2:c2FtcGxlLm1wNA==:image/jpeg:GKAj0gAUCZmJ1voFADip2iIAAAAAbugbAAAA:e:1472075513:ARZ_3ybzrQqEaluMUdI"}
Finally,
{header_handle:["2:c2FtcGxlLm1wNA==:image/jpeg:GKAj0gAUCZmJ1voFADip2iIAAAAAbugbAAAA:e:1472075513:ARZ_3ybzrQqEaluMUdI"]}
Should be added during the request to create template.
It worked for me.
See this for better understanding on how to do it.
The answer Provided by Aravindh is correct, you can follow This document from Meta to upload the Image you want.
Just make sure you use a supported type by WhatsApp API ( For WhatsApp Business Platform Cloud API , For WhatsApp Business Platform On-Premises API ) and the upload end point (file-type — The file's MIME type. Valid values are: image/jpeg, image/jpg, image/png, and video/mp4
)
Double Check if you are following exacly the types supported, for example in case of png, you need to set "file_type" to "image/png" no just "png" when creating the upload session.
I have tested it and it works for me.
Hope this helps
I create a node js lambda function to crop and return an image from any image url.
The function creates a GET API which returns a cropped image.The API is working fine, I am able to download any image from postman but even there I am not getting the image preview, I have to manually download. Although the downloaded base64 image is correct and working in the browser if put directly.
I need a way for it to work directly in the html <img> tag.
The api is something like - https://aws-lambda-fn-image-resizer/{encoded image url}
I am unable to load https://www.abc.ca.gov/datport/lqs.html?rpttype=5 this URL using Java/Groovy to extract information from this webpage. It inloves Request using POST method. Please help to resolve.
Using InteliJIdea and Groovy.
JSoup and Groovy can easily load the page using this:
#Grab('org.jsoup:jsoup:1.7.1')
// The URL to scrape
String url = "https://www.abc.ca.gov/datport/lqs.html?rpttype=5"
// Connect and get URL via Jsoup
def doc = org.jsoup.Jsoup.connect(url).get()
// Output the entire HTML page
println doc
The table displayed on the page is retrieved with Ajax, and to retrieve that, you would need to parse the JSON from the request made with Javascript.
It might be easier for you to try using Geb, which can wait for the page beeing loaded with data, and then you can scrape it.
I'm trying to display an Instagram feed on my website. I am not familiar with server side scripts. The explanations I have read go over my head.
I have managed to get an access key through Instagram but I don't know how to proceed.
I also tried the instructions from a video "How to implement an Instagram Feed in PHP without using the Instagram API"
For that, my php file works, displays the feed but I don't understand how to make it appear on my html page.
I'd be happy to make either method work.
In your HTML you should include a JavaScript 'script' element where you do something called an AJAX Request. The request will access the PHP file that produces the Instagram feed. ECHO the result from the PHP file and it will be returned into the DATA variable in the AJAX request. The request looks roughly like this:
$.ajax({
method: ‘POST or GET, most likely POST’,
url: ‘not always an actual url, this is the path to your PHP file’,
success: function(data) {
//php file returns into variable ‘data’
//display the feed within this function
}
});
The result from the PHP file should be echo’d back in JSON notation, if it isn’t, just add this to end of PHP the file:
$whatever = json_encode($your_result);
echo $whatever; //this is still the feed, just encoded in JSON
And if you need to decode it for some reason, just do
json_decode($variable_to_decode);
There are other parameters you can use in the AJAX request, like if for instance you need access to certain variables in your PHP file, that currently only exist in your HTML document.
this was solved by saving the html as php. i don't know why that is but it worked
I am trying to create an html object dynamically with the necessary header information depending on the query string in the link I provide to Facebook. I am hoping that Facebook open graph will call this html link as I provided. However it seems that query string info are not getting passed to my server. Do anyone know how to make this work or what is the more appropriate way to do this. BTW, I am writing my code in Node.js.
To get more info about Facebook open graph api, look here, https://developers.facebook.com/docs/beta/opengraph/actions/.
For example, the link I am trying to pass to Facebook is, "http://xxx-url.com/getFacebookObject?objectId=&description=first dynamic post", so I sent a request with the link as, "https://graph.facebook.com/me/app-name:action-name?object=http://xxx-url.com/getFacebookObject?objectId=&description=first dynamic post". However, when I check the log on the server, I don't see anything in the query string.
Instead of using the query string, you can embed the data in the URL:
http://some-domain.com/getFacebookObject/id/description
Then, depending on what node.js packages you're using, extract the data from the request:
// expess.js style
app.get("/getFacebookObject/:id/:description", function(req, res) {
var id = req.params.id,
desc = req.params.description;
// your code...
});
(See http://expressjs.com/guide.html.)
Sorry, Facebook will strip off all query string information from the URL when they launch your site in the iframe. If it was a page tab app, then you could add it to the app_data query string parameters which in turn gets passed to your iframe's page tab app via the app_data part of the signed_request parameter.