Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Access data (Blob)
View live sample
Description
This sample demonstrates how to get blob content from an image or json resource using esriRequest to access blob content. The snippet below demonstrates two different ways to access it:- via image content
- via json content
XMLHttpRequest objects are subject to the browsersame origin security policy. This means that when downloading content with this method you need to setup a proxy if the content is from another origin. The proxy acts as an intermediary between the browser and the server that contains the content you want to download. The proxy is not required if the HTML page and the content are hosted on the same web server or have been enabled forCORS.
Code
<!DOCTYPE html>
<html>
<head>
<title>Blob Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<style>
#main {
font-family: "Arial Unicode MS, Arial, sans-serif";
font-size: 24px;
}
#info {
font-size: 16px;
}
#content {
width: 600px;
height: 275px;
padding: 5px;
overflow: auto;
border: solid 1px #AAAAAA;
background-color: #FFFFFF;
}
.failure {
color: red;
}
#status {
font-size: 12px;
}
</style>
<script src="https://js.arcgis.com/3.46/"></script>
<script>
require([
"dojo/dom",
"dojo/on",
"dojo/dom-class",
"esri/request",
"dojo/domReady!"
], function (dom, on, domClass, esriRequest) {
on(dom.byId("rdoJson"), "change", change);
on(dom.byId("rdoImage"), "change", change);
on(dom.byId("submitRequest"), "click", getContent);
function getContent() {
var url = dom.byId("url").value;
var contentDiv = dom.byId("content");
contentDiv.value = "";
domClass.remove(contentDiv, "failure");
dom.byId("status").innerHTML = "Downloading...";
var params = {
url: url,
handleAs: "blob"
};
if (dom.byId("rdoJson").checked) {
params.content = {
f: "json"
};
}
var requestHandle = esriRequest(
params);
requestHandle.then(requestSucceeded, requestFailed);
}
function requestSucceeded(response, io) {
dom.byId("status").innerHTML = "";
var reader = new FileReader();
reader.addEventListener("loadend", function () {
if (response.type == "image/png") {
dom.byId("content").innerHTML = "<img src=' " + reader.result + " '/>";
} else {
dom.byId("content").innerHTML = "<div>" + reader.result + "</div>";
}
});
if (response.type == "image/png") {
//if working with image data
reader.readAsDataURL(response);
} else {
reader.readAsText(response);
}
}
function requestFailed(error, io) {
domClass.add(dom.byId("content"), "failure");
dom.byId("status").innerHTML = "";
dom.byId("content").innerHTML = error;
}
function change(evt) {
var url;
if (evt.target.id === "rdoJson") {
url = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/";
} else { // blob from image
url = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer/tile/1/0/0";
}
dom.byId("url").value = url;
}
});
</script>
</head>
<body>
<div id="main">Get <b>BLOB</b> content using esriRequest.</div>
<div id="info">
<p>This sample demonstrates how to get Blob content from an Image or JSON resource.</p>
</div>
<p>
Blob content :
<span id="blob_content">
<input type="radio" name="radioGrp"
id="rdoImage" checked/>
Blob from Image
<input type="radio" name="radioGrp"
id="rdoJson"/>
Blob from JSON resource
</span>
<br />
<br />
<input type="text" id="url" size="100" value="https://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer/tile/1/0/0" readonly/>
<input id="submitRequest" type="button" value="GO" />
<span id="status"></span>
</p>
<h2>Content</h2>
<div id="content"></div>
</body>
</html>