CODEWITHSUNDEEP
angular
Bernard Polman
Bernard Polman

Reputation: 855

HttpRequest file download downloads a file without extension

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:

enter image description here

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;
        }

Upvotes: 1

Views: 1472

Answers (2)

V Djuric
V Djuric

Reputation: 71

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

Upvotes: 1

Pierre
Pierre

Reputation: 844

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?

Upvotes: 2

Related Questions