All Components

File Saver Overview

The File Saver component enables you to save files on the client machine.

The saving of files is done through the saveAs method. You can consume the package from TypeScript and JavaScript projects alike.

Installation

  1. Download and install the package:

    npm install --save @progress/kendo-file-saver
  2. Once installed, individual functions can be imported and the package is ready to use.

    import { saveAs } from '@progress/kendo-file-saver';

Configuration

To save a file on the client machine, call the saveAs method, and pass a valid data URI and a file name.

import { saveAs, encodeBase64 } from '@progress/kendo-file-saver';

const dataURI = "data:text/plain;base64," + encodeBase64("Hello World!");
saveAs(dataURI, "test.txt");

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 component:

  1. Utilizes the client-side API in browsers, such as Internet Explorer v10 or later, Google Chrome, and Firefox, which support the creation of files.
  2. 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 setting the forceProxy option to true.

To save files that are bigger than 1MB, use a proxy. Otherwise, you might get an Unknown network error error 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();
}
In this article