HttpRequest file download downloads a file without extension

Question

I'm still new to Angular and we have a bug related to downloading files - one of the pages has a grid with files that are downloaded to PC when clicked on. However, when the files are downloaded weirdly, like this:

I don't understand what kind of format that is. For example, I upload a .pdf file and when it downloads the file like and I try to open it, Windows asks me which program I want to use open it. The files don't get corrupt because I can open them with the correct program but if the file is a PDF or TXT, I want it to download exactly like that. We use the same method for saving and downloading files in the main ASP.NET web app and all files are downloaded normally there.

Saving document:

this.dataService
            .saveItemAndGetId('api/documents-medicine/save', data)
            .finally(() => {
                this.loaderR = false;
                this.addNewResolved.emit(true);
                this.removeClickedElement();
            })
            .subscribe(
            res => this.sharedService.handleSaveResponse(res > 0 ? true : false, this.localization.translate('documents'), '/app/documents/' + this.sharedService.globals.selectedResident.id),
            err => this.sharedService.handleError(err)
            );

Document download:

this.dataService
            .getFile('api/documents-medicine/' + data[1].id)
            .subscribe(
            res => window['saveAs'](res, data[1].fileName),
            err => this.sharedService.handleError(err)
            )

.getFile service:

DocumentModel model = this.repository.getResidentSingleDocument(id);
        if (model != null)
        {
            HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK);
            result.Content = new ByteArrayContent(model.DocumentData);
            return result;
        }

        return new HttpResponseMessage(HttpStatusCode.BadRequest);

"getResidentSingleDocument" method in repository:

try
        {
            return this.ctx.ResidentDocuments.Where(it => it.ID == Id)
                .Select(it => new DocumentModel
                {
                    Title = it.Titel,
                    DocumentData = it.ResidentDocument,
                    CreatedBy = it.CreatedBy
                }).SingleOrDefault();
        }
        catch (Exception Ex)
        {
            throw Ex;
        }

How do you return this.dataService.getFile - Please add your service code as well. — rcanpahali, Apr 02 '19 at 12:17

Pierre · Accepted Answer · 2019-04-02T12:29:33.117

2

The filename should be set at the backend.

result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
{
    FileName = "foo.txt"
};

An client solution here: Is there any way to specify a suggested filename when using data: URI?

edited Apr 02 '19 at 12:29

answered Apr 02 '19 at 12:20

Pierre

794
5
15

score 1 · Answer 2 · answered Apr 02 '19 at 15:26

1

You will have to send the extension from backend. After that you should be able to just concat the extension as string to your file name. If you concat ".pdf" it should download in valid format.

this.dataService
            .getFile('api/documents-medicine/' + data[1].id)
            .subscribe(
            res => window['saveAs'](res, data[1].fileName + '@here is the ext you got from backend@'),
            err => this.sharedService.handleError(err)
            )

answered Apr 02 '19 at 15:26

V Djuric

61
5

Why not create the whole filename on the backend instead of force the clientside to do string operations? – Pierre Apr 03 '19 at 13:13
@Pierre Well it comes down to a same thing. I just find this cleaner in case you have for example .png image or a .gif file, and for some reason all images on client have to be same extension .jpg (i had that situation), you can easily check the extension, and replace it into desired extension without any string manipulation. If you only send files that are not convertible with simple extension change like pdf/txt, your way is even cleaner. – V Djuric Apr 03 '19 at 14:50

HttpRequest file download downloads a file without extension

2 Answers2