Server Proxy
A server proxy represents an intermediate service that captures the file content and serves it back with the appropriate headers.
To save files, the File Saver package:
- Utilizes the client-side API in browsers, such as Internet Explorer v10 or later, Google Chrome, and Firefox, which support the creation of files.
- Falls back to a server-side "proxy" method that receives the content and sends it back to the browser as an attachment to save.
Enabling Proxies
If the browser does not implement an API for saving files, the saveAs method "POSTs" the content to a server-side proxy which streams the file back to the end user. To enable the server proxy, set the proxyURL option.
import { saveAs, encodeBase64 } from '@progress/kendo-file-saver';
const dataURI = "data:text/plain;base64," + encodeBase64("Hello World!");
saveAs(dataURI, "test.txt", {
proxyURL: "/path/to/proxy"
});Forcing Proxy Usage
You can also set saveAs to always use a server proxy by configuring the forceProxy option to true.
To save files that are bigger than 1MB, use a proxy. Otherwise, you might get an
Unknown network errorerror message.
import { saveAs, encodeBase64 } from '@progress/kendo-file-saver';
const dataURI = "data:text/plain;base64," + encodeBase64("Hello World!");
saveAs(dataURI, "test.txt", {
proxyURL: "/path/to/proxy",
forceProxy: true
});Implementations
The proxy receives a POST request with the following parameters in the request body:
contentType—The MIME type of the file.base64—The Base64-encoded file content.fileName—The file name as requested by the caller.- Additional fields that are set through the optional
proxyData.
As a result, the proxy returns the decoded file with a set "Content-Disposition" header.
ASP.NET WebAPI Controller
The following example demonstrates how to implement a proxy in the ASP.NET WebAPI Controller.
public class SaveFile : ApiController
{
public class FileData
{
public string ContentType { get; set; }
public string Base64 { get; set; }
public string FileName { get; set; }
}
// POST api/savefile
public HttpResponseMessage Post([FromBody]FileData file)
{
var data = Convert.FromBase64String(file.Base64);
var result = new HttpResponseMessage(HttpStatusCode.OK)
{
Content = new StreamContent(new MemoryStream(data))
};
result.Content.Headers.ContentType = new MediaTypeHeaderValue(file.ContentType);
result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
{
FileName = file.FileName
};
return result;
}
}ASP.NET MVC Proxy
The following example demonstrates how to implement a proxy in the ASP.NET MVC Proxy.
public class HomeController
{
[HttpPost]
public ActionResult Save(string contentType, string base64, string fileName)
{
var fileContents = Convert.FromBase64String(base64);
return File(fileContents, contentType, fileName);
}
}ASP.NET WebForms
The following example demonstrates how to implement a proxy in the ASP.NET WebForms.
public partial class SaveFile : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string contentType = Request.Form["contentType"];
string base64 = Request.Form["base64"];
string fileName = Request.Form["fileName"];
byte[] fileContents = Convert.FromBase64String(base64);
Response.ContentType = contentType;
Response.AppendHeader("Content-Disposition", "attachment; filename=" + fileName);
Response.BinaryWrite(fileContents);
Response.End();
}
}PHP Proxy
The following example demonstrates how to implement a proxy in the PHP Proxy.
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$fileName = $_POST['fileName'];
$contentType = $_POST['contentType'];
$base64 = $_POST['base64'];
$data = base64_decode($base64);
header('Content-Type:' . $contentType);
header('Content-Length:' . strlen($data));
header('Content-Disposition: attachment; filename=' . $fileName);
echo $data;
}
?>Java (Spring MVC)
The following example demonstrates how to implement a proxy in Java (Spring MVC).
@RequestMapping(value = "/save", method = RequestMethod.POST)
public @ResponseBody void save(String fileName, String base64, String contentType, HttpServletResponse response) throws IOException {
response.setHeader("Content-Disposition", "attachment;filename=" + fileName);
response.setContentType(contentType);
byte[] data = DatatypeConverter.parseBase64Binary(base64);
response.setContentLength(data.length);
response.getOutputStream().write(data);
response.flushBuffer();
}