Download file using API not working - javascript

I have an issue with my API call to my download method.
Here is the JS code I'm using, it's used with knockout:
self.downloadFile = function(file) {
// Ajax Call Get All Leave Records
$.ajax({
type: "POST",
url: "/api/v1/CompanyFilesApi/DownloadFile",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: ko.toJSON(file),
success: function (data) {
console.log("Here is your file");
},
error: function (error) {
alert(error.status + " <--and--> " + error.statusText);
}
});
// Ends Here
};
And here is my API solution:
public HttpResponseMessage DownloadFile(FileModel file)
{
var path = file.FilePath;
var result = Request.CreateResponse(HttpStatusCode.OK, file.FileName);
var stream = new FileStream(path, FileMode.Open, FileAccess.Read);
result.Content = new StreamContent(stream);
result.Content.Headers.ContentType =
new MediaTypeHeaderValue("application/octet-stream");
return result;
}
The file parameter contains the file path and name.
Can anyone tell me what I'm doing wrong?
The response is always ok but it goes on the error branch and the file is not open. The files are PDF, Excel, Word.

EDIT 2:
You can use target="_blank" instead of download to open the pdf in a new tab.
To modifify the 'a' tag :
$("#your-a-tag-id").attr("href", "data:application/octet-stream;base64," + fileDataString);
EDIT:
This could also help you
link
One solution would be to encode to base64 and use it as such :
...
dataType: "application/octet-stream;base64"
...
then put the response data in a href
<a href="data:application/octet-stream;base64,/*YOUR FILE DATA*/" download="your filename">
I'm not sure how to deal with that in your API though.

Related

Ajax url is undefined

I'm making a function to get a xml file and edit it. I've never done that before so I searched a good way to get an xml file. I decided to use ajax, but the file is never returned because the url is undefined.
EDIT :
I edited the code and made the treatment in the success function. Now there is no problem with this file.
Here is the update of the ajax part :
$.ajax({
type: 'GET',
url: 'allrtp.xml',
dataType: 'xml',
success: function(xml) {
//file = $.parseXML(xml);
// Editing the file to have the good dates
$(xml).find('StartDateTime').text(start);
$(xml).find('EndDateTime').text(end);
var strFile;
if (window.ActiveXObject) {
strFile = xml.xml;
} else {
strFile = (new XMLSerializer()).serializeToString(xml);
}
var encoded64 = Base64.encode(strFile); // Encoded in base64
var encodeURL = encodeURIComponent(encoded64); // Encoded URL
var AR = urlAR + encodeURL; // The URL to open
window.open(AR, '_blank');
}
})
Now all is working well about the xml file, I have a little problem with the window.open, which open my url but with %31 at the beggining, but it's another problem.
Thank you for your help !
file is undefined because you are declaring it inside a ajax success function
function openRecords(start, end) {
// Extraction of the xml file
var file;
$.ajax({
type: 'GET',
url: 'allrtp.xml',
dataType: 'xml',
success: function(xml) {
file = $.parseXML(xml);
},
error: function(ex) {
console.log(ex);
}
})
// Test
var start = '2016-02-15T12:57:00+01:00';
var end = '2019-02-16T13:57:00+01:00';
setTimeout(function(){
// Editing the file to have the good dates
file.find('StartDateTime').text(start);
file.find('EndDateTime').text(end);},1500);
}
Add an error callback:
error: function (ex) {}
Many things can be happening, you will get more info with the error callback. Probably you are querying an incorrect url. Do not trust that undefined upon url, see what returns your jquery ajax function. Maybe you should be querying something like '\files\xxx.xml'.
can you give me a picture of Network in your broswer? I want to know the URL is send or not:
1. F12 open your console
2. select the Network tab
3. refresh the broswer
4. check the request is send or not

Asp / ajax call web service and GET xml

My code returns : interne server error
var parameters = "<?xml version='1.0' encoding='utf-8'?>" +
"<soap:envelope xmlns:xsi='ttp://www.w3.org/2001/xmlschema-instance' xmlns:xsd='http://www.w3.org/2001/xmlschema' xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'>" +
"<soap:body>" +
"<listeVille xmlns='http://..../b1'>" +
"<ville>"+ "Test" +"</ville>" +
"</listeVille>" +
"</soap:body>" +
"</soap:envelope>";
$.ajax({
type: "POST",
url: _URL_SITE + "webservices/b1.asmx",
dataType: "xml",
data: parameters,
contentType: "application/soap+xml; charset=utf-8",
headers: {
Accept: '*/*',
SOAPAction: 'http://.../webservices/b1/ListeVille' },
success: function (xml) {
alert('test');
//var _xmldoc
//_xmldoc = new activexobject("microsoft.xmldom");
//_xmldoc.async = "false";
//_xmldoc.loadxml(xml);
},
error: function () {
alert('error');
}
});
And my web service :
<WebMethod(True)> Public Function ListeVille(ByVal ville As String) As System.Xml.XmlDocument
Dim _xml As System.Xml.XmlDocument = New System.Xml.XmlDocument
Dim _hsh As New ParameterCollection
Try
_hsh.Add("#Ville", "")
_xml.LoadXml(_hsh)
Catch ex As Exception
AjoutJournal(ex)
End Try
Return _xml
End Function
I try to call my web service and get a xml file.
For information, don't focus on my function ListeVille, it returns the great value.
Thanks!
You are getting an Internal Server Error which means that there is an Exception in your server Side Code.
If you enable the Remote Errors then you can see the errors on the remote machine. Otherwise, if you debug the code on the machine, you can see the exception Details.
Moreover, the usage of XmlDocument.LoadXml Method doesn't seem to be correct as posted in your question. The Parameter to the LoadXml is a String containing the XML document to load. Try to pass in a valid XML. You can find more details on msdn here

ASP.NET - Saving recorded videos using C#

I've been trying to solve this for days and I can't find out what's going wrong. I'm a beginner on C# and javascript so that might be a big factor. So I record a video from my webcam using RecordRTC.js. Getting the recordedBlob from that, I want to save it somewhere in my Solution.
Here's my code in sending the blob in the code-behind:
recordedBuffer.replace('data:video/mp4;base64,', '')
$.ajax({
type: 'POST',
url: 'BasePage.aspx/UploadVideo',
data: '{ "video" : "' + recordedBuffer + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (data) {
alert("SUCCESS: " + data.d);
}, error: function (xhr, err) {
alert(xhr.responseText);
}
});
And then in C#:
[WebMethod()]
public static string UploadVideo(string video)
{
DateTime date = DateTime.Now;
string fileNameWitPath = MapPathStatic("~/Gallery/Videos/" + date.ToString("yyyyMMddHHmmss") + ".mp4");
//MapPathStatic is a static version I made of Server.MapPath()
using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
byte[] data = Convert.FromBase64String(video);
bw.Write(data, 0, data.Length);
bw.Close();
return fileNameWitPath;
}
}
}
The file is being created in the proper file. But when I try to play it, it said it cannot render the file. This is only 1-2 second video. So the video is being corrupted midway? What am doing wrong? Why is it not rendering correctly.
I've also found solutions using PHP to save the file but I really would like to use C# for this.
Any help or suggestions would be appreciated!

Handling FileResult from JQuery Ajax

I have a MVC C# Controller that returns a FileResult
[HttpPost]
public FileResult FinaliseQuote(string quote)
{
var finalisedQuote = JsonConvert.DeserializeObject<FinalisedQuote>(System.Uri.UnescapeDataString(quote));
return File(finalisedQuote.ConvertToPdf(), "application/pdf");
}
Now I want to be able to download the result (I don't want it to open up in the browser)
I am calling the controller via $.ajax method in JavaScript
var postData = { quote: finalisedQuote };
var url = "/NewQuote/FinaliseQuote";
$.ajax({
type: "POST",
url: url,
data: postData,
success: function (data) {
//how do I handle data to force download
},
fail: function (msg) {
alert(msg)
},
datatype: "json"
});
How do I handle the data to force it to download?
You won't be able to use JavaScript to save the file to disk as this is blocked for security reasons.
An alternative would be to save the file in the FinaliseQuote action method (and return just an id for the file), then create another action method that responds to a GET request and returns the file. In your success function you then set window.location.href to point to your new action method (you'll need to pass an id for the file). Also make sure you set the MIME type to application/octet-stream and that should force the browser to download the file.
Controller:
[HttpPost]
public JsonResult FinaliseQuote(string quote)
{
var finalisedQuote = JsonConvert.DeserializeObject<FinalisedQuote>(System.Uri.UnescapeDataString(quote));
// save the file and return an id...
}
public FileResult DownloadFile(int id)
{
var fs = System.IO.File.OpenRead(Server.MapPath(string.Format("~/Content/file{0}.pdf", id)));
// this is needed for IE to save the file instead of opening it
HttpContext.Response.Headers.Add("Content-Disposition", "attachment; filename=\"filename\"");
return File(fs, "application/octet-stream");
}
JS:
success: function (data) {
window.location.href = "/NewQuote/DownloadFile?id=" + data;
},

Retrieve binary data from C# with Ajax

I'm a bit new in web development and I can't achieve what I'm trying to do.
I have a Database with a table called "PI_Banners", where I store some images. This table stores an ID and a VARBINARY column that contains the binary data of the image.
What I'm trying to do, is to retrieve that data with an Ajax request to a C# function, and create a "img" tag using Data URI Scheme. Then append that new image to a div
This is what I got:
Ajax call:
$(document).ready(function() {
var dto = {};
var dtoJSON = JSON.stringify(dto);
$.ajax({
async: false,
url: 'BannerRotativo.aspx/devuelveBanners',
cache: false,
dataType: 'json',
type: "POST",
data: dtoJSON,
contentType: "application/json; charset=utf-8",
success: function(data, textStatus, jqXHR) {
responsedevuelveBanners(data);
},
error: errorResponse
});
});
Being "devuelveBanners" the C# function.
C# code:
public static string devuelveBanners()
{
DataReader DR;
DR = listaBanners();
//armaJson creates the Json string from the DataReader.
string strJson = GENERAL.armaJson(DR);
return strJson;
}
public DataReader listaBanners()
{
try
{
string strComando;
sqlCommand SQLC;
DataReader DR;
strComando = "SELECT banner_img FROM PI_Banners";
//sqlCon is the connection, and is open already.
SQLC = new System.Data.SqlClient.SqlCommand(strComando, sqlCon);
SQLC.CommandType = CommandType.Text;
DR = SQLC.ExecuteReader();
return DR;
}
catch (Exception ex)
{
throw ex;
}
}
When I parse the Json string back, and create the image:
function responsedevuelveBanners(data)
{
var datos = JSON.parse(data.d);
$("#imgContainer").append("<img src='data:image/jpg;base64," + datos.Rows[0].Row[0].banner_img + "' />");
}
the image is created but doesn't show up, because it has this URL:
data:image/jpg;base64,System.Byte[]
I know I'm doing something terribly wrong trying to retrieve the json data this way, but I don't know how to achieve this!
Thanks in advance!
In order to use <img src="data:image/PNG;base64' the base64 part is because you need to return a Base64 string instead of array of bytes therefore you need to convert your byte[] to 64Base using: Convert.ToBase64String(buffer)
So using your code as example:
ImageConverter imageConverter = new ImageConverter();
byte[] resourceByteArray = (byte[])imageConverter.ConvertTo(_YourObj.GetImage(), typeof(byte[]));
Your WebApi method should be returning:
return Convert.ToBase64String(resourceByteArray);

Categories