In my TypeScript Service I am calling this ajax post API that is returning ResponseMessage. The code is running fine I just dont see the PDF file in my download folder or it is not opening chrome built in PDF reader? Is there something I am missing for this to work. Is there anything I need in the TypeScript Service for returning a file that will open built in PDF reader?
html view
<button type="button" class="btn btn-default" (click)="printItems()">Print</button>
TypeScript Service
printItems(versionKeys: string[]): JQueryPromise<any> {
return $.ajax({
type: "post",
contentType: "application/json",
data: JSON.stringify(versionKeys),
url: this.apiUrls.PrintTemplates
});
}
Controller Class
[HttpPost]
[ApplicationApiAuthorize("Administrator, ContentManager")]
public IHttpActionResult PrintTemplates([FromBody] List<string> versionKeys)
{
var templates = versionKeys
.Select(v => TemplatesDataService.GetTemplate(v))
.ToList();
var templateIds = templates.Select(b => b.Id).ToList();
var templateFile = TemplatesDataService.PrintTemplate(templateIds);
var result = new HttpResponseMessage(HttpStatusCode.OK)
{
Content = new ByteArrayContent(templateFile.Content)
};
result.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment")
{
FileName = templateFile.FileName
};
result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
var response = ResponseMessage(result);
return response;
}
If you want to open pdf in default browser pdf reader then follow these steps.
1- Change return mimetype from "application/octet-stream" to "application/pdf". "application/octet-stream" means it is binary file and needs to be downloaded.
2- Change Post to Get.
3- Open a new window with a link or javascript and call your action.
[HttpGet]
[ApplicationApiAuthorize("Administrator, ContentManager")]
public IHttpActionResult PrintTemplates([FromQuery] List<string> versionKeys)
{
var templates = versionKeys
.Select(v => TemplatesDataService.GetTemplate(v))
.ToList();
var templateIds = templates.Select(b => b.Id).ToList();
var templateFile = TemplatesDataService.PrintTemplate(templateIds);
var result = new HttpResponseMessage(HttpStatusCode.OK)
{
Content = new ByteArrayContent(templateFile.Content)
};
result.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment")
{
FileName = templateFile.FileName
};
result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");
var response = ResponseMessage(result);
return response;
}
Create a link
Print
Or use javascript (I'm not an expert in typescript but it should be easy to convert it)
var win = window.open('http://yourUrl.com/Print?versionKeys=1&versionKeys=2', '_blank');
if (win)
win.focus();
else
alert('Please allow popups for this website');
Related
I have angular project as my client side and .Net 6 web api project as my backend. I am still new to both technologies. I am creating a website and there is a functionality that I am trying to add and haven't been successful so far. I want to upload images into a .Net web api project images folder using angular. I also want to later access those images from angular project. I want to store the path of the image files in the database. I have tried to check for the code on the internet without success. Your assistance will be appreciated.
First, submit your's files from frontend with FormData
postWithFile(url: string, obj: any, files: File[]) {
let cloneHeader: any = {};
let options: any = {
headers: new HttpHeaders(cloneHeader),
observe: 'response',
responseType: 'json'
};
let formData: FormData = new FormData();
if (typeof obj == 'object') { // obj is external submit data
formData.append('data', JSON.stringify(obj));
} else {
formData.append('data', obj);
}
if (files && files.length > 0) {
files.forEach((ds, index) => {
formData.append('file_' + index, ds, ds.name);
});
}
return this._http
.post(this.host + url, formData, options)
.pipe(map((res: any) => {
return res.body;
}));
}
And backend handle request with HttpContext.Current.Request.Files, save images to server and store path of images in database
[HttpPost]
public ResponseMessage<bool?> UploadImages()
{
var response = new ResponseMessage<bool?>();
try
{
if (!Request.Content.IsMimeMultipartContent())
throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
ExternalDataModel model = MessageConvert.DeserializeObject<ExternalDataModel>(HttpContext.Current.Request["data"]); // obj in frontend
//
List<string> listImages = new List<string>();
DateTime now = DateTime.Now;
string buildPath = $"{string.Format("{0:00}", now.Year)}\\{string.Format("{0:00}", now.Month)}\\{string.Format("{0:00}", now.Day)}"; // change by your's folder path
foreach (string file in HttpContext.Current.Request.Files)
{
var fileContent = HttpContext.Current.Request.Files[file];
int fileLength = fileContent.ContentLength;
if (fileContent != null && fileLength > 0)
{
var stream = fileContent.InputStream;
byte[] imgByteArray;
using (MemoryStream memoryStream = new MemoryStream())
{
stream.CopyTo(memoryStream);
imgByteArray = memoryStream.ToArray();
}
string fileName = $"format_file_name_if_need_{fileContent.FileName}";
string RelativeFolder = $"{buildPath}";
string AbsoluteFolder = Path.Combine("FOLDER_IN_SERVER_FULL_PATH", RelativeFolder);
if (!Directory.Exists(AbsoluteFolder))
{
Directory.CreateDirectory(AbsoluteFolder);
}
string pathSave = Path.Combine(RelativeFolder, fileName);
FileHelper.SaveFileFromBinaryArray(pathSave, imgByteArray);
listImages.Add(pathSave);
}
}
// model.listImages = listImages; // assign to model to save to DB
//
// var data = _bus.uploadImage(model);
// if (data)
// {
// response.Data = true;
// response.MessageCode = MessageCodes.UpdateSuccessfully;
// }
}
catch (Exception ex)
{
response.MessageCode = ex.Message;
}
return response;
}
I have spent the whole day trying to get this to work, I have looked at the following:
https://www.talkingdotnet.com/upload-file-angular-5-asp-net-core-2-1-web-api/
https://code-maze.com/upload-files-dot-net-core-angular/
and many more than I can count.
All I want is to send an a form and an image. The errors am getting are:
Missing content-type boundary
Incorrect Content-Type
The function evaluation requires all threads to run
In angular
register(user: UserViewModel, logo: File) {
// We use formData because we can't send file as an object
const formData = new FormData();
formData.append("user", JSON.stringify(user));
formData.append("logo", logo);
console.log(formData);
return this.http.post<UserRegisterViewModel>(`${UserAPI.API_User}/${"register"}`, formData).pipe(map(user => {
return user;
}));
}
Than my c# code looks like so
[HttpPost, DisableRequestSizeLimit]
[AllowAnonymous]
[Route("register")]
//[Consumes("application/json", "multipart/form-data")]
public async Task<IActionResult> RegisterAsync()
{
IFormFile logo = null;
try
{
// Get the logo
logo = Request.Form.Files[0];
// Get the user json string
var userJson = Request.Form["user"];
If you want to fetch the file from Request.Form . you can follow below code sample :
Client side :
const formData = new FormData();
formData.append('file', fileToUpload, fileToUpload.name);
this.http.post('https://localhost:5001/api/upload', formData, {reportProgress: true, observe: 'events'})
.subscribe(event => {
if (event.type === HttpEventType.UploadProgress)
this.progress = Math.round(100 * event.loaded / event.total);
else if (event.type === HttpEventType.Response) {
this.message = 'Upload success.';
this.onUploadFinished.emit(event.body);
}
});
Server side :
[HttpPost, DisableRequestSizeLimit]
public IActionResult Upload()
{
try
{
var file = Request.Form.Files[0];
var folderName = Path.Combine("StaticFiles", "Images");
var pathToSave = Path.Combine(Directory.GetCurrentDirectory(), folderName);
.....
}
catch (Exception ex)
{
....
}
}
Or you can get file with FromForm:
Client side :
let fileToUpload = <File>files[0];
const formData = new FormData();
formData.append('file', fileToUpload, fileToUpload.name);
this.http.post('YourURL', formData, {headers: {
'Accept': 'application/json',
'Content-Disposition' : 'multipart/form-data'
},reportProgress: true, observe: 'events'})
.subscribe(event => {
....
});
Then server side will be :
[HttpPost, DisableRequestSizeLimit]
public IActionResult Upload([FromForm(Name = "file")] IFormFile file)
{
}
This fixed it, I had a break point on
logo = Request.Form.Files[0];
For some reason there is a bug in VS2017 and 2019.
https://developercommunity.visualstudio.com/content/problem/146887/vs2017-v4-requestform-debug.html
below is C# WEB API Code to generate Excel :
public class FileExportController : ApiController
{
[HttpGet]
public HttpResponseMessage Get()
{
var callerContext = CallerContext.DefaultCallerContext;
ReportingInput userInput = new ReportingInput();
userInput.ClientOneCode = "AVON";
string handle = Guid.NewGuid().ToString();
var #event = new GetJobReprotDataBlEvent(callerContext, userInput);
WebApiApplication.ApplicationInitializerObj.EventBus.Publish(#event);
XLWorkbook wb = new FileExportEngine().ExportExcel(#event.ReportData); //this is returning XLWorkbook
string fileName = "JobReport_" + DateTime.Now.ToString("yyyy -MM-dd HH':'mm':'ss") + ".xlsx";
using (MemoryStream memoryStream = new MemoryStream())
{
wb.SaveAs(memoryStream);
var result = new HttpResponseMessage(HttpStatusCode.OK)
{
Content = new ByteArrayContent(memoryStream.ToArray())
};
result.Content.Headers.ContentDisposition =
new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment")
{
FileName = fileName
};
result.Content.Headers.ContentType =
new MediaTypeHeaderValue("application/octet-stream");
return result;
}
}
When I call this API from browser, I am able to generate excel file.
http://localhost/ETLScheduler/api/FileExport -- this is working when hit direct in browser
Now I want to use consume this API in angular 5 application.I have a button.On click button I call the component method downloadFile() to download the file.
Below is the code :
downloadReport() {
this._service.downloadJobReport('AVON');
}
where downloadJobReport() is in my service file as below :
downloadJobReport(clientCode: string) {
return this._http.get(APIs.downloadJobReport);
}
When I am running the application and click on Download button, I am getting nothing, I mean file is not downloading. Can anyone have idea,how should I update my angular code to consume the API.
Thanks in advance.
As you mentioned above in comments you are using below angular code to download file:
downloadFile(data: Blob) {
const contentType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
const blob = new Blob([data], { type: contentType });
const url = window.URL.createObjectURL(blob);
window.open(url);
}
As I also have tried this code, it is working in chrome browser but not working in IE and edge.
You may update your method somthing like below:
var downloadFile=function (file_name, content) {
var csvData = new Blob([content], { type: 'text/csv' });
if (window.navigator && window.navigator.msSaveOrOpenBlob) { // for IE
window.navigator.msSaveOrOpenBlob(csvData, file_name);
} else { // for Non-IE (chrome, firefox etc.)
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
var csvUrl = URL.createObjectURL(csvData);
a.href = csvUrl;
a.download = file_name;
a.click();
URL.revokeObjectURL(a.href)
a.remove();
}
};
you can refer below link for more information:
Open links made by createObjectURL in IE11
Problem is, that Angular expects JSON as a result. You need to configure your GET request so, that it expects something different.
public downloadJobReport(clientCode: string)): Observable<Blob> {
return this._http.get(APIs.downloadJobReport, { responseType: 'blob' });
}
Just a tiny question, you pass an argument clientCode to the downloadJobReport, but never use it. Maybe wise to leave that out?
I have a canvas element in a web site that I'm uploading using the FormData API. Here's how I do it:
upload: function (e) {
var file = this.imagePreview.ui.canvas.get(0).toDataURL("image/jpeg")
.replace('data:image/jpeg;base64,', '');
if (file) {
var formData = new FormData();
formData.append('file', file);
$.ajax({
url: app.getApiRoot + 'UserFiles/',
type: "post",
data: formData,
processData: false,
contentType: false,
error: function () {
$("#file_upload_result").html('there was an error while submitting');
}
});
}
}
where I'm replacing the whole data:image/jpeg;base64, business as per this post.
On the backend I have the following multipart controller:
public async Task<IHttpActionResult> PostUserFile()
{
string imageDir = ConfigurationManager.AppSettings["UploadedImageDir"];
var PATH = HttpContext.Current.Server.MapPath("~/" + imageDir);
var rootUrl = Request.RequestUri.AbsoluteUri.Replace(Request.RequestUri.AbsolutePath, String.Empty);
if (Request.Content.IsMimeMultipartContent())
{
var streamProvider = new CustomMultipartFormDataStreamProvider(PATH);
await Request.Content.ReadAsMultipartAsync(streamProvider).ContinueWith(t =>
{
if (t.IsFaulted || t.IsCanceled)
{
throw new HttpResponseException(HttpStatusCode.InternalServerError);
}
var files = streamProvider.FileData.Select(i =>
{
var info = new FileInfo(i.LocalFileName);
return new UserFile(User.Identity.GetUserId(), info.Name, rootUrl + "/" + imageDir + "/" + info.Name, info.Length / 1024);
});
db.UserFiles.AddRange(files);
db.SaveChangesAsync();
});
return Ok();
}
else
{
throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotAcceptable, "This request is not properly formatted"));
}
}
Where I implement a CustomMultipartFormDataStreamProvider as follows:
public class CustomMultipartFormDataStreamProvider : MultipartFormDataStreamProvider
{
public CustomMultipartFormDataStreamProvider(string path)
: base(path)
{ }
public override string GetLocalFileName(Headers.HttpContentHeaders headers)
{
var name = !string.IsNullOrWhiteSpace(headers.ContentDisposition.FileName) ?
headers.ContentDisposition.FileName :
"NoName";
// This is here because Chrome submits files in quotation
// marks which get treated as part of the filename and get escaped
return name.Replace("\"\"", string.Empty);
}
}
Sadly, the FileData on the streamProvider fed into the ReadAsMultipartAsync method is empty:
And another thing I find interesting is that the uploaded binary file is escaped, as I notice from the watch window:
The %2f is the escape sequence for the / character.
I simply can't pinpoint the problem. Anyone have any suggestions?
Mixing ContinueWith and async/await leads to problems, just do await Request.Content.ReadAsMultipartAsync(streamProvider); and everything in the .ContinueWith would just go after the await like normal code.
Or remove async/await and add:
return Request.Content.ReadAsMultipartAsync(streamProvider).ContinueWith...
Also you can look this link: Sending HTML Form Data in ASP.NET Web API: File Upload and Multipart MIME
I have Angular SPA which downloads a file from ASP.NET Web API 2 using the following approach:
Angular Code
$scope.downloadFile = function(httpPath) {
// Use an arraybuffer
$http.get(httpPath, { responseType: 'arraybuffer' })
.success( function(data, status, headers) {
var octetStreamMime = 'application/octet-stream';
var success = false;
// Get the headers
headers = headers();
// Get the filename from the x-filename header or default to "download.bin"
var filename = headers['x-filename'] || 'download.bin';
// Determine the content type from the header or default to "application/octet-stream"
var contentType = headers['content-type'] || octetStreamMime;
try
{
// Try using msSaveBlob if supported
console.log("Trying saveBlob method ...");
var blob = new Blob([data], { type: contentType });
if(navigator.msSaveBlob)
navigator.msSaveBlob(blob, filename);
else {
// Try using other saveBlob implementations, if available
var saveBlob = navigator.webkitSaveBlob || navigator.mozSaveBlob || navigator.saveBlob;
if(saveBlob === undefined) throw "Not supported";
saveBlob(blob, filename);
}
console.log("saveBlob succeeded");
success = true;
}
catch(ex)
{
console.log("saveBlob method failed with the following exception:");
console.log(ex);
}
if(!success)
{
// Get the blob url creator
var urlCreator = window.URL || window.webkitURL || window.mozURL || window.msURL;
if(urlCreator)
{
// Try to use a download link
var link = document.createElement('a');
if('download' in link)
{
// Try to simulate a click
try
{
// Prepare a blob URL
console.log("Trying download link method with simulated click ...");
var blob = new Blob([data], { type: contentType });
var url = urlCreator.createObjectURL(blob);
link.setAttribute('href', url);
// Set the download attribute (Supported in Chrome 14+ / Firefox 20+)
link.setAttribute("download", filename);
// Simulate clicking the download link
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
link.dispatchEvent(event);
console.log("Download link method with simulated click succeeded");
success = true;
}
catch(ex) {
console.log("Download link method with simulated click failed with the following exception:");
console.log(ex);
}
}
if(!success)
{
// Fallback to window.location method
try
{
// Prepare a blob URL
// Use application/octet-stream when using window.location to force download
console.log("Trying download link method with window.location ...");
var blob = new Blob([data], { type: octetStreamMime });
var url = urlCreator.createObjectURL(blob);
window.location = url;
console.log("Download link method with window.location succeeded");
success = true;
} catch(ex) {
console.log("Download link method with window.location failed with the following exception:");
console.log(ex);
}
}
}
}
if(!success)
{
//Fallback to window.open method
console.log("No methods worked for saving the arraybuffer, using last resort window.open");
window.open(httpPath, '_blank', '');
}
})
.error(function(data, status) {
console.log("Request failed with status: " + status);
// Optionally write the error out to scope
$scope.errorDetails = "Request failed with status: " + status;
});
};
httpPath is a url of my Web API Controller. The controller has the following code:
Web API Code
[HttpGet]
[Authorize]
public async Task<HttpResponseMessage> DownloadItems(string path)
{
try
{
Stream stream = await documentsRepo.getStream(path);
HttpResponseMessage result = Request.CreateResponse(HttpStatusCode.OK);
result.Content = new StreamContent(stream);
result.Content.Headers.ContentDisposition =
new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment")
{
FileName = "document.zip",
};
result.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream");
result.Content.Headers.ContentLength = stream.Length;
return result;
}
catch (Exception e)
{
return Request.CreateResponse(HttpStatusCode.InternalServerError, e);
}
}
The above setup works perfectly well in all browsers (a .zip file is downloaded), except IE11.
For unknown reason, IE11 downloads the file without .zip extension
Any idea what could be wrong with my API Controller?