Download file through Angular and TypeScript - c#

I'm having an issue in downloading a file in my Angular project. The problem is that when I try to navigate to the file's URL, the file does download successfully. But how can I implement the downloading function in Angular?
[VRoute("PassportAttachments/{id}", 1)]
[HttpGet]
[AllowAnonymous]
public HttpResponseMessage GetPassportAttachmentById(int individualId, [FromUri] int id = -1)
{
try
{
var attachment = _passportAttachmentManager.FindById(id);
string attachmentPath = HttpContext.Current.Server.MapPath(
string.Format(ConfigurationManager.AppSettings["IndividualPassportsPath"], individualId.ToString()) + attachment.FileName);
//string downloadUrl = Url.Content(attachmentPath).Replace("/Api/Contacts/PassportAttachments/~", "");
//var result = new { DownloadUrl = downloadUrl, AttachmentTitle = attachment.Title };
//return Ok(result);
if (File.Exists(attachmentPath))
return new FileContentResult(attachmentPath, attachment.Title, FileResultType.ImageContentResult);
else
return null;
}
catch (Exception ex)
{
Unit.Logger.Error(ex, ToString(), ActionContext.ActionArguments.ToList());
return null;
//return NotFound();
}
}
FileContentResult constructor:
public FileContentResult(string FilePath, string ResponeFileName, FileResultType fileResultType) : base(HttpStatusCode.OK)
{
var stream = new FileStream(FilePath, FileMode.Open, FileAccess.Read);
base.Content = new StreamContent(stream);
base.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachments") { FileName = ResponeFileName };
switch (fileResultType)
{
case FileResultType.ZipContentResult:
base.Content.Headers.ContentType = new MediaTypeHeaderValue("application/zip");
break;
case FileResultType.ExcelContentResult:
base.Content.Headers.ContentType = new MediaTypeHeaderValue("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
break;
case FileResultType.PDFContentResult:
base.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");
break;
case FileResultType.ImageContentResult:
base.Content.Headers.ContentType = new MediaTypeHeaderValue("image/png");
break;
}
}
Now like I said, when I type the URL which downloads the file by myself (hence the AllowAnonymous) everything works fine. But function should I use or write to download the file using TypeScript
public DownloadAttachments(): void {
if (this.SelectedPassportAttachments != null && this.SelectedPassportAttachments.length > 0) {
if (this.SelectedPassportAttachments.length == 1) {
this.service.DownloadSinglePassportAttachment(this.SelectedPassportAttachments[0].Id, this.IndividualId).subscribe((file: any) => {
// download file (function)
});
}
else {
this.service.DownloadMultiplePassportAttachment(this.IndividualId, this.SelectedPassportAttachments.map(pa => pa.Id), this.SelectedPassportNumber).subscribe();
}
}
}

Since you are using a Content-Disposition header, the browser will automatically trigger a download dialog when it attempts to load the URL.
So you can either just navigate to the download location, or open the download location in a separate window (which will automatically close in most browsers when the download dialog appears):
// navigate to the URL:
window.location.href = downloadUrl;
// or open a new window
window.open(downloadUrl);
Note that opening a window will be blocked by popup blockers if you run window.open outside from mouse events (for example button clicks). You can avoid that by opening the window first when the download button is clicked, and then change the URL later. Something like this:
downloadAttachment() {
const downloadWindow = window.open('about:blank');
this.service.GetDownloadUrl(…).subscribe(downloadUrl => {
downloadWindow.location.href = downloadUrl;
});
}

Related

return file application.pdf to browser via asp net mvc controller shows code instead of file

I have a pdf file in a database that I loaded in the controller and directly want to return via return File
return File(document.Data, document.ContentType);
Data is the bytearray with ~76000 bytes
ContentType is the application/pdf
When I want to view the result in webbrowser (either FF or Chrome) I get to see the pdf code instead of the pdf.
%PDF-1.4 %���� 1 0 obj <>stream x��� and so on
Would appreciate any help because it must be so simple, but I can't find it.
The return is placed in ActionResult Index and I need it to be loaded right at click on page (no new page with _blank)
It is the right data, because when I use f12 in chrome and click on network and the data I get to view the pdf as a whole
Edit1:
[HttpGet]
public ActionResult Index(int Id)
{
InitMvcApplicationMenu();
...
var document = WebApi.LoadDocument(DocumentGuid.Value);
var byteArray = document.Data;
if (byteArray == null)
{
return null;
}
Stream stream = new MemoryStream(byteArray);
if (document == null)
{
return View("NoDocument");
}
Response.AppendHeader("content-disposition", "inline; filename=file.pdf");
return File(stream, document.ContentType, "document.pdf");
}
This way I get an error no file was found. When I use it the way before with
return File(document.Data, document.ContentType);
I get the bytearray as view instead of a pdf, but the file is found
Edit 2:
public ActionResult Index(int Id)
{
InitMvcApplicationMenu();
var entity = WebApi.LoadItem(Id);
var DocumentGuid = entity.ReportDocumentGUID;
if (DocumentGuid == Guid.Empty)
{
return View("NoDocument");
}
var document = WebApi.LoadItem(DocumentGuid.Value);
if (document == null)
{
return View("NoStatusReportDocument");
}
var cd = new ContentDisposition
{
FileName = document.Name,
Inline = true
};
Response.Headers.Add("Content-Disposition", cd.ToString());
return File(document.Data, document.ContentType);
}
I have a Wrapper with multiple registertabs and want to show the pdf inside the tab when the document tab is selected.
This happens here:
my.onHashChanged = function (e) {
var feature = jHash.val('feature');
my.loadTab(feature);
}
my.loadTab = function (feature) {
if (feature) {
$("#tabstrip-content").html("Loading...");
applicationUIModule.loadPartialView(feature, "Index", { Id: $("#Id").val()}
, function (data) {
}
, null
, $("#tabstrip-content")
);
}
}
my.onTabSelect = function (e) {
var feature = $(e.item).data("feature");
applicationUIModule.updateHash("feature", feature);
}
This is what you have to do:
[HttpGet]
public IActionResult document(int id)
{
var byteArray = db.instances.Where(c => c.id == id).FirstOrDefault().document;
if (byteArray == null)
{
return null;
}
Stream stream = new MemoryStream(byteArray);
Response.AppendHeader("content-disposition", "inline; filename=file.pdf");
return File(stream, "application/pdf", "document.pdf");
}

File Upload in Asp.net core 2.0 issue creating 0 byte Image

I, am using angular 5, with asp.net core 2.0. I, am trying to upload the file to the server. The code update the file to the server. But with 0 kb of data and sometime it upload the file.
The file size is not large. Its in KB.
Here is the Angular code
public QuestionPostHttpCall(_questionPhotoVM: QuestionPhotoViewModel): Observable<GenericResponseObject<QuestionPhotoViewModel[]>> {
const formData: FormData = new FormData();
formData.append('FileUpload', _questionPhotoVM.FileUpload);
formData.append('QuestionText', _questionPhotoVM.questionText);
formData.append('QuestionId', _questionPhotoVM.questionId);
const headers = new HttpHeaders().set('enctype', 'multipart/form-data');
return this._httpClientModule.post<GenericResponseObject<QuestionPhotoViewModel[]>>(this.questionPhotoUrl, formData);
}
In the controller I, can receive the file.
Here is the controller method
[HttpPost]
public JsonResult QuestionPhotoPost(IFormFile FileUpload, string QuestionText, Guid? QuestionId)
{
string TempFileName = string.Empty;
var directiveToUpload = Path.Combine(_environment.WebRootPath, "images\\UploadFile");
var http = HttpRequestExtensions.GetUri(Request);
QuestionViewModel model = new QuestionViewModel();
try
{
if (FileUpload != null)
{
TempFileName = FileUpload.FileName;
CheckFileFromFrontEnd();
}
}
catch (Exception exception)
{
}
void CheckFileFromFrontEnd()
{
if (FileUpload != null)
{
if (!System.IO.Directory.Exists(directiveToUpload))
{
System.IO.Directory.CreateDirectory(directiveToUpload);
}
if (System.IO.File.Exists(string.Format("{0}\\{1}\\{2}", _environment.WebRootPath, "images\\UploadFile", FileUpload.FileName)))
{
TempFileName = Guid.NewGuid().ToString() + FileUpload.FileName;
}
model.PictureUrl = string.Format("{0}://{1}/{2}/{3}/{4}", http.Scheme, http.Authority, "images", "UploadFile", TempFileName);
SaveFileToServer(TempFileName);
}
}
void SaveFileToServer(string FileName)
{
if (FileUpload.Length > 0)
{
using (var stream = new FileStream(Path.Combine(directiveToUpload, FileName), FileMode.Create))
{
FileUpload.CopyToAsync(stream);
}
}
}
return Json(genericResponseObject);
}
The file is uploaded to the server. But some time it upload with 0 byte and sometime it upload correctly.
The resolution of file is 570 X 400 and size of file 197KB
Where I, am doing wrong?? Please anyone let me know. Do, I need to specify max byte in somewhere ??
Your problem is that you are using an asynchronous function and not awaiting it.
You are using ASP.NET Core so you should (read "must") use the async-all-the-way pattern:
[HttpPost]
public async Task<JsonResult> QuestionPhotoPost(IFormFile FileUpload, string QuestionText, Guid? QuestionId)
{
string TempFileName = string.Empty;
var directiveToUpload = Path.Combine(_environment.WebRootPath, "images\\UploadFile");
var http = HttpRequestExtensions.GetUri(Request);
QuestionViewModel model = new QuestionViewModel();
try
{
if (FileUpload != null)
{
TempFileName = FileUpload.FileName;
await CheckFileFromFrontEndAsync();
}
}
catch (Exception exception)
{
}
async Task CheckFileFromFrontEndsync()
{
if (FileUpload != null)
{
if (!System.IO.Directory.Exists(directiveToUpload))
{
System.IO.Directory.CreateDirectory(directiveToUpload);
}
if (System.IO.File.Exists(string.Format("{0}\\{1}\\{2}", _environment.WebRootPath, "images\\UploadFile", FileUpload.FileName)))
{
TempFileName = Guid.NewGuid().ToString() + FileUpload.FileName;
}
model.PictureUrl = string.Format("{0}://{1}/{2}/{3}/{4}", http.Scheme, http.Authority, "images", "UploadFile", TempFileName);
await SaveFileToServerAsync(TempFileName);
}
}
async Task SaveFileToServerAsync(string FileName)
{
if (FileUpload.Length > 0)
{
using (var stream = new FileStream(Path.Combine(directiveToUpload, FileName), FileMode.Create))
{
await FileUpload.CopyToAsync(stream);
}
}
}
return Json(genericResponseObject);
}
To make the code more readable, I'd move those inline functions to outside, though.

Opening a file from Toast Notification

In my UWP app I am downloading a file and storing it in the location chosen by the user using FolderPicker. When the download has completed, I show a ToastNotification. I am using these two namespaces as shown in the docs.
using Microsoft.QueryStringDotNET; // for receciving arguments
using Microsoft.Toolkit.Uwp.Notifications;
the toast that I send has two buttons, 1) open the file 2) Dismiss.
I want to open the downloaded file when the user taps on the first button.
But from what I understand, toasts can only send string arguments to the application ( Correct me if wrong ). And in order to open a file, StorageFile object is needed ( path of StorageFile won't do ).
So is there any way to actually open the downloaded file from the toast ( using foreground or background activation ) ?
Code to download the file:
private async void DownloadButton_Click(object sender, RoutedEventArgs e)
{
StorageFolder selectedFolder;
try
{
selectedFolder = await ChooseFolderAsync();
}
catch
{
Toast.ShowToast("Something went wrong", ToastRow);
return;
}
Uri downloadLink = new Uri("ValidUri");
StorageFile destinationFile = await selectedFolder.CreateFileAsync(selectedAsset.name, CreationCollisionOption.GenerateUniqueName);
BackgroundDownloader downloader = new BackgroundDownloader();
downloader.SuccessToastNotification = handler.MakeToastWithButtons("Downloaded", selectedAsset.name, "Open", "Dismiss");
// downloader.SuccessToastNotification = handler.MakeToast("Downloaded", nameOfFile, string.Empty, 2);
DownloadOperation download = downloader.CreateDownload(downloadLink, destinationFile);
download.Priority = BackgroundTransferPriority.High;
download.CostPolicy = BackgroundTransferCostPolicy.Always;
var toast = handler.MakeToast("Downloading...", selectedAsset.name, selectedAsset.contentSize, 12);
toast.Group = "downloadStartedTag";
ToastNotificationManager.CreateToastNotifier().Show(toast);
Progress<DownloadOperation> progressCallback = new Progress<DownloadOperation>(handler.DownloadProgress);
try
{
await download.StartAsync().AsTask(cts.Token, progressCallback);
}
catch (Exception ex)
{
var errorCode = BackgroundTransferError.GetStatus(ex.HResult);
toast = handler.MakeToast("Download failed", selectedAsset.name, TextFormatter.CamelToHumanCase(errorCode.ToString()), 12);
toast.Group = "downloadFailedTag";
ToastNotificationManager.CreateToastNotifier().Show(toast);
return;
}
finally
{
ToastNotificationManager.History.Remove("downloadStartedTag");
}
}
Method that creates toast:
public ToastNotification MakeToastWithButtons(string heading, string line1, string button1, string button2)
{
ToastVisual visual = new ToastVisual()
{
BindingGeneric = new ToastBindingGeneric()
{
Children =
{
new AdaptiveText() {Text = heading},
new AdaptiveText() {Text = line1},
}
}
};
ToastActionsCustom actions = new ToastActionsCustom()
{
Buttons =
{
new ToastButton("Open", new QueryString()
{
{ "action", "open" }
//maybe file path can be given here in some argument
}.ToString())
{
ActivationType = ToastActivationType.Foreground
},
new ToastButton("Dismiss", new QueryString()
{
{ "action", "dismiss" }
//more details about the file can be given here
}.ToString())
{
ActivationType = ToastActivationType.Background
}
}
};
ToastContent toastContent = new ToastContent()
{
Visual = visual,
Actions = actions,
// Arguments when the user taps body of toast
Launch = new QueryString()
{
{ "action", "nothing" }
}.ToString()
};
// And create the toast notification
var toast = new ToastNotification(toastContent.GetXml());
toast.ExpirationTime = DateTime.Now.AddDays(2);
toast.Group = "DownloadCompleteGroup";
return toast;
}
One way to do this is to store the destinationFile created by the background download in the FutureAccessList, which will provide you with a token you can add to the payload data of the toast:
// using Windows.Storage.AccessCache;
string token = StorageApplicationPermissions.FutureAccessList.Add(destinationFile);
// add the token to your toast payload
Then when the user clicks the toast, you can redeem the token to get the file back:
var file = await StorageApplicationPermissions.FutureAccessList.GetFileAsync(token);
Now you can do things with the file. Note that the token is good "forever" - as long as the file exists on disk, the token will work after your app restarts or even a reboot.
When you are done with the file (including if the download fails or the user cancels, etc.) you should remove the token from FutureAccessList so that the list doesn't fill up:
StorageApplicationPermissions.FutureAccessList.Remove(token);
This means you likely want to persist the token in your app's settings as well, just in case the user ignores the toast.

How to open PDF file in iOS?

i try to open a existing PDF file on a iOS device.
This file have to be open with the default PDF reader.
In this moment i use the "dependency service" to run native code.
public void Save(string filename, byte[] byPDF)
{
string strPfad = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.Personal), filename);
if(File.Exists(strPfad))
{
File.Delete(strPfad);
File.WriteAllBytes(strPfad, byPDF);
}
else
File.WriteAllBytes(strPfad, byPDF);
var viewer = UIDocumentInteractionController.FromUrl(NSUrl.FromFilename(strPfad));
var controller = GetVisibleViewController();
viewer.PresentOpenInMenu(controller.View.Frame, controller.View, true);
}
private UIViewController GetVisibleViewController(UIViewController controller = null)
{
controller = controller ?? UIApplication.SharedApplication.KeyWindow.RootViewController;
if (controller.PresentedViewController == null)
return controller;
if (controller.PresentedViewController is UINavigationController)
{
return ((UINavigationController)controller.PresentedViewController).VisibleViewController;
}
if (controller.PresentedViewController is UITabBarController)
{
return ((UITabBarController)controller.PresentedViewController).SelectedViewController;
}
return GetVisibleViewController(controller.PresentedViewController);
}
If I run this code is nothing happend (only the file becomes written).
I just used a standard UIViewController and passed the path (where the pdf is saved on the device) to the controller and loaded it up in a UIWebview.
public class PdfController : UIViewController
{
public PdfController(string pdfPath)
{
NavigationItem.LeftBarButtonItem = new NavBarButton("Back", (sender, args) =>
{
NavigationController.PopViewController(true);
});
var webView = new UIWebView(View.Bounds);
View.AddSubview(webView);
webView.LoadRequest(new NSUrlRequest(new NSUrl(pdfPath, false)));
webView.ScalesPageToFit = true;
}
}
But you will need to download it first and pass it to this controller
This snippit will allow you download the pdf and save it.
Public void DownloadPDF()
{
Utility.AddNetworkConnection();
var webClient = new WebClient();
loadingView = new LoadingView();
loadingView.Show("Downloading PDF");
webClient.DownloadDataCompleted += (s, e) =>
{
Utility.RemoveNetworkConnection();
File.WriteAllBytes(_pdfPathLocation, e.Result); // writes to local storage
InvokeOnMainThread(() =>
{
loadingView.Hide();
_pdfImageElement.SetValueAndUpdate("Open PDF");
var a = new UIAlertView("Done", "File downloaded and saved", null, "OK", "Open PDF");
a.Show();
a.Clicked += OpenPdf;
});
};
var url = new Uri(_wreck.PdfURL);
webClient.Encoding = Encoding.UTF8;
webClient.DownloadDataAsync(url);
}

how to post httppostedfile to webapi

How do I post a httppostedfile to a webapi?
Basically I want the user to select an excel file and I want to post it to my webapi.
The gui is made with classic asp.net and the webapi is made with new .NET apicontroller.
I have done some api coding before but then I used JSON and that doesn't seem to work very good with this kind of object.
Can someone please just point me in the right direction so that I can continue to search for info. Right now I don't even know what to search for.
I solved this by doing this:
In my controller:
using (var client = new HttpClient())
using (var content = new MultipartFormDataContent())
{
client.BaseAddress = new Uri(System.Configuration.ConfigurationManager.AppSettings["PAM_WebApi"]);
var fileContent = new ByteArrayContent(excelBytes);
fileContent.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
{
FileName = fileName
};
content.Add(fileContent);
var result = client.PostAsync("api/Product", content).Result;
}
And here is my ApiController:
[RoutePrefix("api/Product")]
public class ProductController : ApiController
{
public async Task<List<string>> PostAsync()
{
if (Request.Content.IsMimeMultipartContent())
{
string uploadPath = HttpContext.Current.Server.MapPath("~/uploads");
if (!System.IO.Directory.Exists(uploadPath))
{
System.IO.Directory.CreateDirectory(uploadPath);
}
MyStreamProvider streamProvider = new MyStreamProvider(uploadPath);
await Request.Content.ReadAsMultipartAsync(streamProvider);
List<string> messages = new List<string>();
foreach (var file in streamProvider.FileData)
{
FileInfo fi = new FileInfo(file.LocalFileName);
messages.Add("File uploaded as " + fi.FullName + " (" + fi.Length + " bytes)");
}
return messages;
}
else
{
HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.BadRequest, "Invalid Request!");
throw new HttpResponseException(response);
}
}
}
public class MyStreamProvider : MultipartFormDataStreamProvider
{
public MyStreamProvider(string uploadPath)
: base(uploadPath)
{
}
public override string GetLocalFileName(HttpContentHeaders headers)
{
string fileName = headers.ContentDisposition.FileName;
if (string.IsNullOrWhiteSpace(fileName))
{
fileName = Guid.NewGuid().ToString() + ".xls";
}
return fileName.Replace("\"", string.Empty);
}
}
I found this code in a tutorial so i'm not the one to be credited.
So here i write the file to a folder. And because of the mysreamprovider i can get the same name of the file as the file i first added in the GUI. I also add the ending ".xls" to the file because my program is only going to handle excel files. Therefor i have added some validation to the input in my GUI to so that i know that the file added is an excel file.

Categories

Resources