im trying to upload an image on my website in the card using bootstrap but every since i run the code an image of a folder is showing up instead of the image.I'm using React.js
I am following this website https://www.pdftron.com/blog/react/how-to-build-a-react-pdf-viewer/ to implement pdf.js using iframe in React
However, in this tutorial, the pdf is a local file in public folder.
<PDFViewer backend={WebviewerBackend} src='/myPDF.pdf' />
How do I use a third party url as the src? For example, I want to display pdf in this url https://arxiv.org/pdf/0905.3531.pdf
This is what I implemented:
downloadFile=(file)=>{
var element=document.createElement('a');
element.style.display= "none";
element.setAttribute('href', file.fileUrl)
element.setAttribute("target", "_blank");
document.body.appendChild(element)
element.click()
document.body.removeChild(element)
}
This is working fine for .ai files but not for .pdf or .jpeg. Instead of downloading the file, the browser opens it in a separate window. I want to enable download file feature and not open file. How do I fix this issue? Is there an alternative way to download the file from url from browser?
Try to use download attribute instead of href.
See element a DOC.
PrintJs package is also not working. if there is any other way either by some package or downloading the file to local storage of browser Do suggest.
I know it would be great if the file wouldn't link to local resource, but using phonegap/steroids framework, FILE_URI returns "file:///Users/" path which I can use for uploading to S3 or else, but Angular won't show it in the template.
Is there a possible solution? I tried adding config to my app
.config(function ($compileProvider){
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
})
but it seems that doesn't have impact on the error.
I can base64 encode my images (then works), but I would like to avoid this if possible.
thanks
See the Camera example in the Steroids Kitchensink app, where the Cordova File API is used to move the picture from the tmp folder to the Steroids app's User Files folder. Since Steroids's localhost looks for assets both in the App folder and User Files folder, you can use an absolute path, e.g. src="/my_image.png". See also the App Structure on Device guide for more information on the App and User Files folder.