Uploading files

[joshwilliam]

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.).

[enchev]

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:

Upload files in ASP.NET Core

Best Regards,
Vladimir

[SeaderGamer]

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

[Werther]

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:

[Werther]

Do you guys have this functionality in the roadmap?

[enchev]

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

[Werther]

I said varbinary(max) not varchar.

[enchev]

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

[Werther]

Thanks for your help!

[enchev]

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

  public partial class Product
  {
    [NotMapped]
    public string ProductPictureAsString
    {
      get
      {
        return System.Text.Encoding.Default.GetString(ProductPicture);
      }
      set
      {
        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:

akorchev/radzen

[Werther]

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

[enchev]

I'm enchev

[Werther]

Sorry!! Thanks enchev!

[joshwilliam]

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>

[korchev]

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.

[joshwilliam]

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

[joshwilliam]

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

[korchev]

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.

[joshwilliam]

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

Attachment.vnd.openxmlformats-officedocument.spreadsheetml.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,

Josh

[korchev]

If you already store the filename you can just use it

<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).