Currently implementing the PDF-Lib Library for my project to modify PDFs
Source: https://pdf-lib.js.org/#examples
And it is working very well, but the modified PDFs are saved on the server.
I am searching for the opportunity that the pdfs which modified will directly downloaded for the user.
Thanks!
If you follow the examples where the ones that download to client like https://jsfiddle.net/Hopding/64zajhge/1/ have
<script src="https://unpkg.com/downloadjs#1.4.7"></script>
</head><body>
...
Instructions
<button onclick="modifyPdf()">Modify PDF</button>
...
<script>
async function modifyPdf()
...
// Trigger the browser to download the PDF document
download(pdfBytes, "pdf-lib-output.pdf", "application/pdf");
however that may need some secured configuration, way beyond this single question.
Related
I made some png using canvas.toDataURL().
I want to save it to folder that have some png using download dialog.
But I don't know how to make folder and to use download dialog.
Please advise me.
Pretty sure there's no way to create an arbitrary folder on your client's computer. It seems to me like that would be a massive security problem.
If you want to create a link to download a file, just use the download attribute on your a tag.
<a href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4
c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABoSU
RBVDhPvYxLFoAwCAN7/0sjJRFCW135nIWSX4d1xgaDm6b32FlMinjr0Aaa1
gDHE21QIsAN1MFR2pniw4ED2Rrv/D+g3sh0fvMCUWgw0EEKEDVCSwo10HhB
01bSABwc/gWUAK3E7AJgQR/9VKyAfgAAAABJRU5ErkJggg=="
download="myimage.png">Download this image</a>.
I'm using HTML5 File API to get some document(.doc/.docx/.pdf) uploaded. And I want to show that document preview before uploading it to server. Is there any way to do such thing on client side?
P.S. Google Docs Viewer isn't ok, because it requires document to be accessible from the internet.
I have tried to create little example and that would display PDF Preview before uploading PDF file.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript PDF Viewer Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function PreviewImage() {
pdffile=document.getElementById("uploadPDF").files[0];
pdffile_url=URL.createObjectURL(pdffile);
$('#viewer').attr('src',pdffile_url);
}
</script>
</head>
<body>
<input id="uploadPDF" type="file" name="myPDF"/>
<input type="button" value="Preview" onclick="PreviewImage();" />
<div style="clear:both">
<iframe id="viewer" frameborder="0" scrolling="no" width="400" height="600"></iframe>
</div>
</body>
</html>
Not sure if anyone still checks this thread, but i thought i'd share what i did.
Directly showing a preview isn't possible, but you can create a blob object of the selected file. Something like this (jQuery):
$('#input').change(function (event) {
var file = URL.createObjectURL(event.target.files[0]);
$('element').append('' + event.target.files[0].name + '');
});
This link will open a new browser tab and shows/downloads the file. This isn't really pretty but it works.
Here's an example: https://jsfiddle.net/j9gw023b/3/
No. This is not possible.
You want the browser to view a datafile it shouldn't. You have Office or PDF viewers (OK, granted, PDF ssems to be inside browsers now...) to view your data files.
If you want to show a preview in the browser, you have to upload it first and store it in a "for-preview" dir or something. When OK, move it to its final destination, otherwise, delete.
The File API will allow you to read the data from the file, but then you have the trouble of parsing it and rendering it. Mozilla have released a JavaScript PDF viewer, but I'm not aware of anything for MS Office files.
Back in the days you were able to do something like that:
<object data="word.doc">You do not have Word installed on your machine</object>
Not sure if this is still supported, but if so, you could use JS to inject that object onto the page to preview it.
Ajax upload your file,then after uploaded return path name and preview it.
blueimp's jQuery-File-Upload was great for me.
you can view its basic plugin.
https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin
You can do it with pdf, here is the tutorial:
https://usefulangle.com/post/87/javascript-preview-pdf-during-upload
Don't know if it is possible for doc/docx
You can do it using this web component: https://avipunes.github.io/file-viewer/
This web component under the hood uses some microsoft embedding endpoint:
https://view.officeapps.live.com/op/embed.aspx?src=${fileURI}
you can see an example here:
https://view.officeapps.live.com/op/embed.aspx?src=https://file-examples-com.github.io/uploads/2017/02/file_example_XLS_10.xls
I have this situation where we have media files stored on a global CDN. Our web app is hosted on it's own server and then when the media assets are needed they are called from the CDN url. Recently we had a page where the user can download file attachments, however some of the file types were opening in the browser instead of downloading (such as MP3). The only way around this was to manually specify the HTTP response to attach the file but the only way I could achieve this was to download the file from CDN to my server and then feed it back to the user, which defeats the purpose of having it on the global CDN. Instead I am wondering if there is some client side solution for this?
EDIT: Just found this somewhere, though I'm not sure if it will work right in all the browsers?
<body>
<script>
function downloadme(x){
myTempWindow = window.open(x,'','left=10000,screenX=10000');
myTempWindow.document.execCommand('SaveAs','null','download.pdf');
myTempWindow.close();
}
</script>
<a href=javascript:downloadme('/test.pdf');>Download this pdf</a>
</body>
RE-EDIT: Oh well, so much for that idea -> Does execCommand SaveAs work in Firefox?
Does your CDN allow you to specify the HTTP headers? Amazon cloudfront does, for example.
I found an easy solution to this that worked for me. Add a URL parameter to the file name. This will trick the browser into bypassing it's built in file mappings. For examaple, instead of http://mydomain.com/file.pdf , set your client side link up to point to http://mydomain.com/file.pdf? (added a question mark)
is there a way to load the full binary of an image in javascript?
what i want to do is to allow the user to preview an image before uploading it.
ie the user selects an image on his local drive (C:\image.jpg) , view it, and decides to upload or cancel.
i tried to set the source to the image path, but it didn't work since it is outside the webapplication project folder.
any help?
thx for your posts, but i ended up creating a temp folder on the server that stores the uploaded image using ajax. and when the user saves the data, the image is moved to another location, and the temp folder is deleted.
You can do something like this:
<img id="preview" src="" style="display:none;" />
<form>
....
<input type="file" id="file" />
....
</form>
<script type="text/javascript">
var file = document.getElementById("file");
var img = document.getElementById("preview");
file.onchange = function(){
img.src = file.value;
img.style.display = 'block';
};
</script>
There is no easy way, what You could do:
Preload image with some ajax file uploader to temp area and then let user decide
Use some third party written solution (f.ex. some flash component)
Here there is also similar question:
is it possible to preview local images before uploading them via a form?
You need server cooperation to access the image binary data. You won't be able to use the "Upload Form" to access the file info without uploading it to a server.
You could however do something like tell the user to paste the source binary data of the image in a textarea or something, then you can use JavaScript to load that binary data and display the actual image.
This is available in some browsers via the HTML5 file access API. Here is the Firefox documentation for file access.
As answered several times, you can't do this with plain HTML/JavaScript due to security restrictions. You need to send the image anyway. You can however handle this using a Java Applet since it runs entirely at the client machine and offers more control than HTML/JS. There are several free and ready-to-use ones. JumpLoader looks good and some major sites also uses it. With Flash it should also be possible, but I am not sure which ones offers this functionality. Check/tryout some Flash Multi File Uploaders.
I need to know how to get full path from fileupload using javascript,
I tried using the following coding but of no use
<input type="file" id="picField" onchange="preview(this)">
<script type="text/javascript">
function preview(test){
var source=test.value;
alert(source);
}
</script>
but in the alert message, i am getting only
Filename.extension
I am not getting full path, but it is showing full path in File Upload box please help how to solve this problem
Thanks
This is a browser security restriction, in modern browsers you cannot get the full client file-system path of the selected file, nor set a path programmatically...
Maybe for security reason, javascript doesn't allow this to happen. And if you come to think of it, Server side pages cannot access your local files. Not that I have a solution for your question.
Actually, there is some kind of solution.
Albeit, it will help only if you can run Electron desktop app on local machine: https://stackoverflow.com/a/59990858/9390914