FileSaver Extension for CSHTML5

[JS-Support @Userware]

Dear CSHTML5 users,

I am pleased to inform you of the release of this extension for CSHTML5.


It adds the ability to save files locally via the "Save As..." dialog of the browser. Please note that some browsers will directly save the files to the "Downloads" folder without asking the user.


It requires CSHTML5 v1.0 Beta 7.2 or newer.


To use, simply add a new class named "FileSaver.cs" to your project, and copy/paste the following code:

Code: Select all

using System;
using System.Threading.Tasks;
using System.Windows;

//------------------------------------
// This is an extension for C#/XAML for HTML5 (www.cshtml5.com)
//
// It requires Beta 7.2 or newer.
//
// It adds the ability to save files locally via the "Save As..."
// dialog of the browser. Please note that some browsers will
// directly save the files to the "Downloads" folder without
// asking the user.
//
// The extension works by wrapping the JavaScript "FileSaver.js"
// library into a C#/XAML class for consumption by CSHTML5-based
// apps. The "FileSaver.js" library source code can be found at:
// https://github.com/eligrey/FileSaver.js/
//
// This extension is licensed under the open-source MIT license:
// https://opensource.org/licenses/MIT
//
// Copyright 2016 Userware / CSHTML5
//------------------------------------

namespace CSHTML5.Extensions.FileSystem
{
    class FileSaver
    {
        static bool JSLibraryWasLoaded;

        public static async Task SaveTextToFile(string text, string filename)
        {
            if (text == null)
                throw new ArgumentNullException("text");

            if (filename == null)
                throw new ArgumentNullException("filename");

            if (await Initialize())
            {
                CSHTML5.Interop.ExecuteJavaScript(@"
                var blob = new Blob([$0], { type: ""text/plain;charset=utf-8""});
                saveAs(blob, $1)
            ", text, filename);
            }
        }

        public static async Task SaveJavaScriptBlobToFile(object javaScriptBlob, string filename)
        {
            if (javaScriptBlob == null)
                throw new ArgumentNullException("javaScriptBlob");

            if (filename == null)
                throw new ArgumentNullException("filename");

            if (await Initialize())
            {
                CSHTML5.Interop.ExecuteJavaScript(@"saveAs($0, $1)", javaScriptBlob, filename);
            }
        }

        static async Task<bool> Initialize()
        {
            if (CSHTML5.Interop.IsRunningInTheSimulator)
            {
                MessageBox.Show("Saving files is currently not supported in the Simulator. Please run in the browser instead.");
                return false;
            }

            if (!JSLibraryWasLoaded)
            {
                await CSHTML5.Interop.LoadJavaScriptFile("https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js");
                JSLibraryWasLoaded = true;
            }
            return true;
        }
    }
}

The extension works by wrapping the JavaScript "FileSaver.js" library into a C#/XAML class for consumption by CSHTML5-based apps. The "FileSaver.js" library source code can be found at: https://github.com/eligrey/FileSaver.js/


You can test the code by calling the following C# code:

Code: Select all

await FileSaver.SaveTextToFile("MyTestFile.txt", "Hello World");

You can also use this class in conjunction with the ZIP extension to save ZIP files to the Downloads folder.


Regards,
JS-Support

[marcelv]

Using this extension I am trying to save an array of bytes as-is to a file.

This is the C# code I have:

Code: Select all

byte[] contents = <byte array retrieved from somewhere else>;
object fileBlob = CSHTML5.Interop.ExecuteJavaScript(@"new Blob([$0], {type: 'application/octet-stream'})", contents);
FileSaver.SaveJavaScript(fileBlob, 'somefilename');

However, the results are that the contents of the file are not be binary contents as it should be, but a long string that contains all the elements from the byte array as a decimal number, separated by a comma:

Code: Select all

86,248,41,110,...

How should I create the blob in this case to save the file as a correct binary file?

MarcelV