Uploading files

The upload files documentation is a little unclear to me on usage. When I try the sample code from the documentation I can select a file and when I click upload the file is gone and I can no longer see it.

Where are the files stored when uploaded? Is it stored in the database?

How would someone go about setting up a file upload for a specific record such as an order (so you could store supporting documentation such as a pdf or excel file.).

Hi Josh,

Indeed our article shows just how to post the file to the server, for more info how to save it please check this article:

Best Regards,

Hi Josh, do you want to save to a database? I've done this by adding a "file" field in the form, if you check this field, it passes the "dataURL" of the file, so I'm using up until now a varchar (max) in the database.
To display these downloadable values ​​I've made a template with
<a href="this.safeURL(item.Annexo)">download</a>
being that the "safeURL" is a function using the sanitizer to say that url is safe
You have a question of mine here too, is there a way to use the varbinary of sql server to save it? I believe that my way will become obsolete with large files

1 Like

Hi enchev,

I'm trying to upload files to a varbinary(max) field in sql server but it isn't working.
When I submit the add page the model of page in the backend is null:

Do you guys have this functionality in the roadmap?

Products.ProductPicture in our Sample database is exactly varchar (MAX) and upload is working correctly.

I said varbinary(max) not varchar.

Hmm I see. At the moment only varchar is supported, we will research if we can add support for varbinary as well.

Thanks for your help!

You can extend your model with not mapped property and use it to convert between string and binary:

  public partial class Product
    public string ProductPictureAsString
        return System.Text.Encoding.Default.GetString(ProductPicture);
        ProductPicture = System.Text.Encoding.Default.GetBytes(value);

public partial class Startup
    partial void OnConfigureOData(ODataConventionModelBuilder builder)
        // Expose additional property
        var product = builder.EntitySet<MyApp.Models.Test.Product>("Product");
        product.EntityType.Property(i => i.ProductPictureAsString);

Source code of the app can be found here:

Thanks korchev, I will test this as soon as possible.

I'm enchev :slight_smile:

Sorry!! Thanks enchev!

Finally made it back to this feature to uploading files. I can submit and store the files in the database with no problem. I still cannot get the files out. I did use the dataURL that was suggested but it doesn't do a thing.

This is what I used in the grid based on the suggestion from SeaderGamer but all I get is a blank page when I click on the link. -

<a href="this.safeURL(item.Attachment)">download</a>

I don't think this will work as there isn't any safeURL method by default and also the current data item is available as ${data} instead of item.

Try the following instead:

  1. Create a page property with Name getExtension and Value:
    (dataURI) => {
      return dataURI.substring(dataURI.indexOf('/') + 1, dataURI.indexOf(';base64'));
    It will determine the attachment extension based on its content type (e.g. png, jpg, pdf etc).
  2. Change the Template of the column to
    <a href="${data.Attachment}" download="Attachment.${getExtension(data.Attachment)}">download</a>

Here is what this does:

  1. The first step creates a function that determines the type of the file - we need it to set the proper extension when the user tries to download it. Radzen stores files in a database as data URL. A data URL begins with the type of the file e.g. image/png, text/html etc.
  2. We set the Template of the column in way to allow modern browsers to save a file.

This works for downloading images but not for other file types such as Excel (xlsx) or PDF's. It is also not keeping the filename when I am downloading it. It saved the image as Attachment.png

Also after testing this in Internet Explorer as well, the links do not work at all even for the Image attachment.

Radzen doesn't keep the filename in the database during uploads - only the data. If you want to persist the original filename you will need to upload the files with your own code and persist the file name in a separate column of your database (Radzen doesn't do that by default).

For other file types (XLSX, PDF) you will need to change slightly the column template to

<a [href]="data.Attachment | safe" download="Attachment.${getExtension(data.Attachment)}">download</a>

Indeed older browser versions don't support the download attribute of the <a> element and will need additional code. I will have to research further how to support that.

So close I can taste it. Images and PDF now work but Excel does not. The extension type is recorded as .sheet


I had already implemented saving my file names and sizes in the database using the new select property you guys recently implemented. I saved the filenames in the database as a field called fileName. Honestly the name is just a nice to have, although I'm sure my users won't think the same lol.

Thanks again,


If you already store the filename you can just use it :slight_smile:

<a [href]="data.Attachment | safe" download="${data.FileName}">download</a>

Just replace ${data.FileName} with the name of the column you use to store the filename. Then you don't need the getExtension property (which can't seem to correctly determine the extension for excel files).

1 Like