Download file, after generating it based on user input - javascript

I have a button on my web app which when clicked generates a text file based on user inputs.
For this i use ajax that send parameters to spring backend. This works. What I want is on the same button when clicked generated file to be downloaded on user computer.
Can this be done without storing the file on server and generating link ?

Maybe data-URI can help you for presenting a download link to the user:
<a href="data:text/plain,this is some text" download="some-filename.txt" target="_blank">Download<a>
for more information see Mozilla: Data-URI
credits to the original answer

Related

Open default mail box with attachment using jsp

I am trying to open the default mail box with the pdf attachment, using my jsp button with the following script in jsp
<span>Email </span>
But it is able to open the default mail box with blank email, but not able to get the attachemnt from the url: ${pageContext.request.contextPath}/report_generate_pdf_ajax_call
I took the help of following link Link1 and Link2Link3 but I haven't got success with my result.
Any help regarding in this context will be appriciated.
No, you can not add an attachment to a message with the mailto.
mailto: only supports header values or text/plain content.
There is no provision for it in the mailto: protocol, and it would be
a gaping security hole if it were possible. The best idea to send a
file is:
Have the user to choose a file
Upload the file to a server and the server return a random file name after upload
Build a mailto: link that contains the URL to the uploaded file to the server in the message body
So probably you can use apache commons for this but there will be a place on the server where all the user files will be located that will require cleaning from time to time somehow.
For more info kindly see here

Need to download a file from webpage to local drive

I has a requirement like when user clicks on a download button instead of showing the content in browser, i want to save it to the localdisk(perticular location) of the user desktop. Is it possible to do??
If yes,Please help me with possibilities..
Thanks in advance
No a website can't decide where it can save something. Everything goes to download folder by default. You have to be using some sort of plugin with permissions or make like browser addon/extension.
If you want to prompt download then you could set send headers in php:
Content-Disposition: attachment; filename="fname.ext"
and
Content-Type: application/force-download
Or you could set attribute download to link in html
<a href="file.abc" download>Click Me</a>
Utility of HTTP header "Content-Type: application/force-download" for mobile?
http://en.wikipedia.org/wiki/List_of_HTTP_header_fields
http://www.php.net/manual/en/function.header.php
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes
You shall just point the file name like this to download.
But you cannot decide the path by your code.
Download the File
Note : Do not try this in jsfiddle or in codepen because they will rename the link with their custom so that the file will be displayed within their output. So, try it in your web server or in your localhost.

How to post a file to a form using javascript automatically

I have some client-side JavaScript which will output a jpeg file based on HTML5 canvas manipulation, if the user performs an action such as clicking the "OK" button.
I would like the jpeg output to be automatically loaded into the "Upload Front Side" field in a form, as if the user uploaded the file from his or her own hard drive.
However, I can't seem to get it to work.
Here is the form:
<div class="property-wrapper">
<label for="upload-front">Upload Front Side</label>
<input id="upload" class="file" type="file" enctype="multipart/form-data" id="Front-Side" name="properties[Front Side]" onchange="readURL(this);" accept="image/*" />
</div>
<script>
document.getElementById('upload').value="http://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Turkish_Van_Cat.jpg/353px-Turkish_Van_Cat.jpg"
</script>
The problem is browsers have several restrictions on what can be done programatically with file upload due to security reasons, have a look at this answer.
The file upload functionality is potentially exploitable, and some browsers will for example not open the explorer box if for example the file upload input field is hidden with display:none.
Most browsers will not allow programatic clicks to a file upload element and require the user to click them instead, to prevent attacks where someone sends a link to a page that immediately steals content from the user's hard drive.
So the functionality you mention does not seem to be feasible due to common browser security restrictions. There are usually no error messages or warnings, it just doesn't work.
An alternative to using the file upload browser input component could be to encode the contents of the file in Base64 and send in the body of an ajax POST for example.
Are you asking how to upload to a server, via a form, the graphic image you extracted from the canvas of your page? This would be useful, I hope to see this answered.
I would start by enabling the user to download/export the image. This might be done with a blob. Ive done this for text data exports, works nicely.
Maybe there is a way to apply the same tricks, just feed the blob/buffer to the server.
Another path might be to "PUT" the file at the server.
Hope this helps.
I would ajax POST a base64 encoded string of the image and forget the whole file upload thingy. You can upload the canvas code directly and reconvert it server side if you need a preview or something or see what other outputs are available from your canvas/image converter code.
I am assuming you are uploading to same server so you would not have cross domain issue but otherwise you can setup your server to accept cross domain ajax request very easily.

Getting full file path of a clients file using a file dialog box

I am trying to allow users to upload pictures to the server.
I am trying to create a similar system to any website that has an 'attach' file or 'upload image' feature. All I need is to get the full path of the file select by the file dialog.
I tried using this for the file dialog with no success:
<input type="file">
This method does not provide the full file path, due to security reasons. My question is how can I create a similar input dialog to websites like tinypic, photobucket, etc.. that can help users input the full file path of a given image, into an input field?
I am aware that this cannot be done using the method above for security reasons, however, I have seen this done before on various websites without any problems, I was wondering what I had to do to implement a similar file dialog that helps fill in the text, which is a full file path, of an input field?
It is not possible to get the file full path on local machine using browser and javascript.
However, as you would like to upload the file to the server, the easy possibility I see is to use html form with input type file. You will receive the file on your http server when the form is submitted.
Here is a very good url http://www.cs.tut.fi/~jkorpela/forms/file.html that explains the whole process nicely.

How can i convert html content(having images also) to a document file using javascript?

I am trying to capture some content of a div in html (both text and images) and I want to convert that to a doc file so that i can mail it. I am using html5 javascript and jQuery.
I have to convert it on the client side.
Here's your solution http://www.phpdocx.com/. You'll need a server side language to do that, the example uses PHP.
Since you have such strict requirements:
Email the user a link with a version of the report you want the user to see when they open the doc.
Tell the user to open MS Word, Click File, Open, Then paste the link in.
The user can then save it as a .doc file where ever they want.
Note: By the way this is the wrong answer, Although you've already turned it down, slash197's answer is the correct way to do this and the way i would normally suggest.
That or just email the report as html.

Categories