I am trying to download pdf file under my project folder (\src\app\files\pdf\iBATIS.pdf) when clicking the button. When clicking button, [Failed- no file] is shown and no file is downloaded. What do I need to do to be able to download this file? Could you please help me.
When I moved the pdf file under (\src\assets) folder, the pdf file is successfully downloaded. Why the file cannot be downloaded under (\src\app\files\pdf\iBATIS.pdf)?
html
button type="button" (click)="downloadPDF()" => Click button
ts ( ts file path is src\app\pdfdownload\pdfdownload.component.ts)
downloadPDF(){
let link=document.createElement("a");
link.download="ibatis.pdf";
link.href="../files/pdf/iBATIS.pdf";
link.click();
}
*, First of all, * according to my knowledge, asset folder in the project is given to access data and download stuff.
If the file is already on the server, then you can try these following ways to download:
f1() {
window.open('path', '_blank');
}
or:
f1() {
window.open('/assets/files/blabla.pdf', '_blank');
}
or:
<a download="filename" target="_blank" href="/assets/files/blabla.pdf">
Click here to download image
</a>
and if you want to do this in angular then I think you should try $http method of angular like following
$http({method: 'GET', url: '/someUrl'}).
success(function(data, status, headers, config) {
var anchor = angular.element('<a/>');
anchor.attr({
href: 'data:attachment/csv;charset=utf-8,' + encodeURI(data),
target: '_blank',
download: 'filename.csv'
})[0].click();
}).
error(function(data, status, headers, config) {
// handle error
});
might this work for you!!!
Related
We are using IOS file upload dialog in order to use video files with our service using react.
All video files are working in android platforms and all browsers in linux and MacOS. However, when we use video files with upload dialog in IOS IPhones such as Iphone 14 Pro Max, then the compress process starts and following that the dialog rejects the video file.
We have been debugging with browserstack using a real phone in a simulator, however no luck until this point.
When we select the file, it firstly runs a compression activity then changes the name of the file to an intermediate file name (as below, the original file name is different), and then upload procedure fails.
Below is the react part which triggers upload mechanism which works with every platform and operating system with exception of IOS.
export const UploadVideo = async (file, signedurl, uploading) =>
{
let resultState = { state: '', data: {} };
if (SERVER_STATUS !== 'localhost')
{
await axios({
method: 'put',
url: signedurl,
data: file,
headers: { 'Content-Type': 'application/octet-stream', },
onUploadProgress: uploading
}).then(function (response)
{
resultState.state = 'success';
}).catch(function (error)
{
resultState.state = 'error';
resultState.data.message = error.message;
window.toastr.error(error.message);
})
} else resultState.state = 'success';
return resultState;
}
The error message I notice here, OS Status error -9806 refers to, according to osstatus.com a secure transport result code. More specifically this one, on Apple's documentation
My take here is that the system is not trusting this URL, I would suggest adding your URL to trusted domains under NSAppTransportSecurity in the Info.plist file. More info on how to do that here.
This is not a solution I would go for for a production app tho, you might want to have a valid certificate for your production URL and app.
Hope this helps.
I have an Electron app that's trying to load a local audio file into an HTML5 <audio> element. The path itself is fine file:///../song.mp3 and I've set webSecurity to false, but I'm still getting Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME. From that same error, if I copy the address and paste it into my browser, I get the correct file.
Are there any other settings I need to change to get this to work?
Appreciate your time
I think this is a bug. The URL scheme of the file is not enabling as a URL scheme.
You can use this code below inside of app.on('ready'....:
protocol.registerFileProtocol('file', (request, cb) => {
const url = request.url.replace('file:///', '')
const decodedUrl = decodeURI(url)
try {
return cb(decodedUrl)
} catch (error) {
console.error('ERROR: registerLocalResourceProtocol: Could not get file path:', error)
}
})
it will be fixed
here I have a function that reacts to a button click
and gains a file from my backend.
onDownload() {
this.http.get('http://localhost:8080/backend/invoice/1/download',
{responseType: 'blob'})
.subscribe(res =>
console.log(res))
}
So far, I am happy because inside the chrome console I dont get any errors.
The response looks like this in the console:
The return type of the Java backend was InputStream (method annotation #Produces(MediaType.MULTIPART_FORM_DATA))
Then I found
https://stackblitz.com/edit/angular-blob-file-download?file=app%2Fapp.component.ts
and looked at ngOnInit() in app.component.ts
ngOnInit() {
const data = 'some text';
const blob = new Blob([data], { type: 'application/octet-stream' });
this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(blob));
}
Currently, I think my frontend receives a blob.
So, I can start in the line starting with "this.fileUrl="
and input my blob.
Inside the .html, I have a button to start the onDownload() function
and another tag to save the file on my local hard drive.
<div>
<button (click)="onDownload()">Herunterladen</button>
</div>
<a [href]="safeResourceUrl" download="file.txt">DownloadFile</a>
Meanwhile, I change the onDownload() method to
onDownload() {
this.http.get('http://localhost:8080/backend/invoice/1/download',
{responseType: 'blob'})
.subscribe(res => this.safeResourceUrl=this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(res)))
}
After I click "Herunterladen" and then the DownloadFile link I get either
a .txt file that I cannot read
or, if I change the file name to .pdf in the a tag inside the .html,
I get a "failed to load pdf document"
All I want is to get my original pdf that I stored in my database and that was sent from the backend.
Has anyone had the same problem before? Thank you for your help.
I changed my function to
onDownload() {
window.open(`http://localhost:8080/backend/invoice/${this.invoice.invoiceNr}/download`, 'blank');
}
Now it works:)
I am trying to create a chrome kiosk app that will open a webpage that contains links in a webview and then load the links within the same webview. However, the links on the webpage that I am working with are target="_blank" and I am getting the error <webview>: A new window was blocked wehn they are clicked. I found a solution to this here and tried to implement its suggestion like this:
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create(
'window.html',
{ 'width': 1000, 'height': 1000 },
function(win) {
win.contentWindow.onload = function() {
var webview = win.contentWindow.document.querySelector('#webview');
webview.addEventListener('newwindow', function(e) {
chrome.app.window.create(e.targetUrl,window.open()
});
};
}
);
});
However, I would like to have the link open not in the browser, but in the same webview that the link was launched from.
Is there some way to capture the target URL, strip it of its target="_blank" attribute, and then load the URL in the original webview?
An event listener in the content script will capture the URL when the newwindow event is fired. Once the URL is captured, it's a simple thing to set the URL as the webview's source.
var webview = document.querySelector('#webview');
webview.addEventListener('newwindow', function (e) {
//prevent the link from attempting to open a new window
e.preventDefault();
webview.src = e.targetUrl;
});
Because this script doesn't open any new windows, it doesn't have to be run specifically in the app's background script.
I have built 1 app that has to run on iOS, android and Windows Phone. all work fine apart from iOS. My app takes a photo using the camera, resizes that image and saves the image.
On iOS, these images were being saved into the tmp directory of the application, which was being deleted, so now i save the images into the Documents folder.
I then save the path to this image into my sqlite database. On my html page, i reference the file using the url, such as
var/mobile/application/GUID-HERE/Documents/imageName.jpg
Now it seems that when i rebuild my application in xCode, the application guid is changed, so all my file references that have been previously saved, are now invalid.
So
Can i reference the documents folder relatively from my HTML page?
OR
Can i stop my application changing this GUID?
Use the toInternalURL() property of the File plugin. After you save your image, you can get a local url without that GUID and save that to your database instead. The url has this format
cdvfile://localhost/persistent/path/to/file
Documentation
An example:
(mostly from file-transfer docs. requires file and file-transfer plugins)
resolveLocalFileSystemURL(cordova.file.documentsDirectory, function success(entry) {
download(entry.toInternalURL() + "image.jpg");
});
var download = function(localUrl) {
var fileTransfer = new FileTransfer();
var uri = encodeURI("https://cordova.apache.org/images/cordova_bot.png");
fileTransfer.download(
uri,
localUrl,
function(entry) {
document.body.innerHTML = entry.toInternalURL();
var img = document.createElement("img");
img.setAttribute('src', entry.toInternalURL());
document.body.appendChild(img);
},
function(error) {
console.log("error code" + error.code);
},
false,
{
headers: {
"Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
}
}
);
}