How to use valid-data-url - 4 common examples
To help you get started, we’ve selected a few valid-data-url examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
wikipathways / pvjs / src / Kaavio / components / Node.tsx View on Github 
getIcon() {
// Anders: The node now only receives one icon and is responsible for retrieving the data from it's url.
// This makes sense here but do other components need to do this? In which case this should be in Entity
// Could you also check the ajax request? Not sure if it's correct
const icon: any = this.props.icon;
if(! icon) return;
if(validDataUrl(icon.url)) {
const parts = icon.url.match(validDataUrl.regex);
let mediaType = parts[1]? parts[1].toLowerCase(): null;
let charset = parts[2]? parts[2].split('=')[1].toLowerCase: null;
const isBase64 = !!parts[3];
let data = parts[4]? parts[4]: null;
const svgString = !isBase64 ? decodeURIComponent(data) : Base64.decode(data);
this.setState({
loadedIcon: {
id: icon.id,
svgString: svgString
}
});
}
else {
const ajaxRequest: AjaxRequest = {
url: icon.url,
method: 'GET',getIcon() {
// Anders: The node now only receives one icon and is responsible for retrieving the data from it's url.
// This makes sense here but do other components need to do this? In which case this should be in Entity
// Could you also check the ajax request? Not sure if it's correct
const icon: any = this.props.icon;
if(! icon) return;
if(validDataUrl(icon.url)) {
const parts = icon.url.match(validDataUrl.regex);
let mediaType = parts[1]? parts[1].toLowerCase(): null;
let charset = parts[2]? parts[2].split('=')[1].toLowerCase: null;
const isBase64 = !!parts[3];
let data = parts[4]? parts[4]: null;
const svgString = !isBase64 ? decodeURIComponent(data) : Base64.decode(data);
this.setState({
loadedIcon: {
id: icon.id,
svgString: svgString
}
});
}
else {
const ajaxRequest: AjaxRequest = {
url: icon.url,
method: 'GET',getIcon() {
// Anders: The node now only receives one icon and is responsible for retrieving the data from it's url.
// This makes sense here but do other components need to do this? In which case this should be in Entity
// Could you also check the ajax request? Not sure if it's correct
const icon = this.props.icon;
if (!icon)
return;
if (validDataUrl(icon.url)) {
const parts = icon.url.match(validDataUrl.regex);
let mediaType = parts[1] ? parts[1].toLowerCase() : null;
let charset = parts[2] ? parts[2].split('=')[1].toLowerCase : null;
const isBase64 = !!parts[3];
let data = parts[4] ? parts[4] : null;
const svgString = !isBase64 ? decodeURIComponent(data) : Base64.decode(data);
this.setState({
loadedIcon: {
id: icon.id,
svgString: svgString
}
});
}
else {
const ajaxRequest = {
url: icon.url,
method: 'GET',return new Promise((resolve, reject) => {
if (file instanceof Blob) {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.addEventListener("load", () => {
resolve(reader.result);
});
reader.addEventListener("error", error => {
reject(error);
});
} else if (isDataString(file)) {
resolve(file);
} else
reject({
error: "TypeError: parameter must be a File/blob or a data-uri string."
});
});
};
