In my Angular 5 application, I am retrieving data which is stored as VARBINARY(MAX) in SQL Server database. It looks like this in the database field: 0xFEA47E451A40AE4571E51F...
When I retrieve it from database using a GET call via .NET WebAPI, it is shown like this in console from my Angular app: aFwwbUYFjhvbv=bhBGVJHvchjhcbsHKfvHbbh...
I know the MIME type of this data (it is either MP3 or WAV). How can I parse/read this data in Angular 5 client and play it using an HTML <audio> component?
I have looked at several related solutions but none seem to be applicable due to one error or another, or perhaps there is a lack of understanding on my part.
My assumptions are that Blob data has the audio content which I can play. I have to convert it to a File first. This is what I am trying:
const file = new File([blobData], "audio.mp3")
this.audioSource = URL.createObjectURL(file)
And in the HTML, I assign audioSource as the source of an HTML5 component.
<audio [src]="audioSource" type="audio/mp3"></audio>
This results in a net::ERR_UNKNOWN_URL_SCHEME error.
I tried sanitizer.bypassSecurityTrustUrl(this.audioSource) as well but this doesn't work either. What am I doing wrong, and how can I get the intended effect?
please check this answer : https://stackoverflow.com/a/40329529/1160236
if you have blob data with correct binaries all you have to do is to create URL using URL.createObjectURL(blob) then pass it to the audio tag as a source. (check step-3)
if you don't have blob data with correct binaries you can create blob data as shown in step-2.
I have created an Angular example which uses DomSanitizer via a custom pipe.
<audio [src]="audioSource | safe:'url'" id="audio" controls #audioTag></audio>
Reference : https://stackoverflow.com/a/40329529/1160236
Angular implementation using reference : https://stackblitz.com/edit/angular-audio-blob
DomSanitizer example: https://medium.com/#swarnakishore/angular-safe-pipe-implementation-to-bypass-domsanitizer-stripping-out-content-c1bf0f1cc36b
I hope this will help. just remember all you need is valid blob data.
Related
I am new to MERN stack. I have already tried a lot of youtube videos and google searches to show/display the images stored in mongodb as the schema :
photograph: {
data : Buffer,
contentType : String
}
It saved successfully in mongodb after few efforts. I tried to convert it into base64 as done by other youtubers but still no results so far.
All of the commented out- (img tags) and array.map functions -> (because i tried to convert my data to array instead of json and then use .map function) are the things i have already tried. I am trying to understand the basics here. so please suggest me simple methods to do it. Also remember that {user.name} {user.dateOfBirth} , etc type of all other data showing successfully.
I am trying to use the API to return data from the Chagrin Falls station in Ohio. I can get the data from the website so I know there is data, but the API does not return any values.
I have a valid token and the examples in the documentation work, but if I try any to alter the examples in any way I get nothing back just any empty json object {}.
Example I am trying to use:
https://www.ncdc.noaa.gov/cdo-web/api/v2/data?datasetid=GSOM&stationid=GHCND:US1OHGG0014&units=standard&startdate=2020-08-01&enddate=2020-08-01&limit=1000
Data from the website:
https://www.ncdc.noaa.gov/cdo-web/datasets/GHCND/stations/GHCND:US1OHGG0014/detail
I don't exactly know how you are going to achieve this since you haven't told us what programming language you are using. However, with python I use a module called urllib to extract raw html data from a url that can be seen from the browser using ctrl+u.
I'm trying to include localization into my npm-react-module, but I have failed receiving the value for the corresponding key from the Langugage.properties file. It simply returns the key. I did some research but I couldn't find any source that would help me solve my problem.
In the code which I will show you bellow, I have included a Language.properties file into my module. In my portlet, I have included the needed configuration for the language properties. I have also tried to add a separate file for a specific locale, but that didn't help me either.
This is an example of my portlet configuration:
"javax.portlet.resource-bundle=content.Language"
This is an example content from my Language.properties file:
example-key=example-value
This is how I'm trying to access the value in my React Component:
<h1> {Liferay.Language.get('example-key')} </h1>
But it only returns "example-key" instead of "example-value".
In my view.jsp file I am able to retrieve the corresponding values using
<liferay-ui:message key='example-key'/>
I have tried this method: https://portal.liferay.dev/docs/7-1/tutorials/-/knowledge_base/t/localizing-your-portlet but it didn't work either. Did anyone get this to work properly in their npm-react-module? I really don't want to spend time implementing my own localization service. Thanks!
Liferay.Language.get('key') gets text replaced by the build mechanism. Therefore there is no actual object/class to do this. I have been trying to get this to work myself and have resolved that I will have to do internationalization on my own.
localizing is done only in build time meaning if you have a language
key that generated dynamicly , you can't localizate it or for example
if you get a key from api fetch and need to localizate it, you can't
beacuse Liferay localization method for react (
Liferay.Language.get("yourLanguageKey") ) its undefined in runtime and
you can't use it.
from: https://npm.io/package/liferay-react-runtime-localization
I have successfully integration the google drive sync by using this link has the source code
And now I am not able to upload image with its name id and location,
I want to upload image with some other fields like name, height, width into the app specific private folder,
If this is not possible can any one suggest me how to go with this:
Actually I have to sync application list data in which list contains images, title, comments ratings and so forth. I am able to upload all other fields except images in json formate, any suggestion upload some type of approach to get this
Found the solution
It is not proper solution but till I am not getting the exact solution, perfect for me.
To upload image with other request data, I have followed following steps:
Convert the image into data using one of the following way
Swift 4
let dataObj = image.pngData()
Swift 3
let dataObj = UIImagePNGRepresentation(image)
And convert this data objet to string with utf8
let str = String(decoding: data, as: UTF8.self)
Use this string to upload with other requst param or data.
And don't forgot to mention the type with this, so that you can easily convert this string to data again and from data, image easily can convert.
I recently went through the www.clementinejs.com tutorial as I'm trying to learn the MEAN stack. I was able to complete it and understand most of it. However when i'm trying to repeat the process with mongoose and get slightly more data, I keep failing.
What i'm trying to do:
When page loads angular performs get request to '/api/entries' which searches mongo(via mongoose) and returns all docs in the collection, then load those docs into a div via angular ng-repeat.
If I insert dumby data into an object in the controller file I have no problem getting the data to show on the page, but when I try with the database I messed up somewhere. Even the angular curly brackets show up when I try to do it that way.
Here is my repo.
https://github.com/nickolaskg/journal
Should I just use mongo instead of mongoose? I'm not sure if i've set it up correctly.
Any help is greatly appreciated. I've been stuck for days trying so many different approaches, at this point I have no doubt there is multiple problems in the code.
Entry.get(function(result){
$scope.entries = result;
})
get() expects single object in the response.
Please read $resource's docs
Use:
Entry.query({field1: 'criterion'}) for queries and multiple resources.
Entry.get({_id: 'someid'}) for a single resource.
Entry.save({my: 'properties'}) for saving existing resource or creating a new resource.
Entry.delete({_id: 'someid'}) for deleting a single resource.
Also next time please post relevant code (IE your $resource calls) directly.