We Keep Coding

Download file, after generating it based on user input

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

I want to upload a file by ajax but I don't want the server direct link appears

Everyone know when upload a file by ajax we must add the direct link to the php file which will upload the file, ex: url: site.com/upload.php.
What I want is that this link site.com/upload.php will not be the direct link to upload the file, but it will be just redirection to the up.php file which will be upload the file actually.
The aim is I want to disappear the link which responsible for upload the client file.
Is this idea can be implemented ?

IMHO If your target with that is security, You're targeting the wrong phase.
Instead of protecting the PHP File location, you can protect the file itself.
the UP.PHP can have some "filename" protection using mod rewrite (How to remove .php or .html extension from single page?)
The UP.PHP can have authentication and authorization through your site auth/autho system, and if you want it public, do it keeping FORM ID pair or something.
The address of the UP.PHP will look something like: site.com/upload/receiver and will point to your file, if you want to protect even this address, you should use anything else but JS Ajax, like flash, java, or anything else.
Just follow any how to do it step-by-step.
https://www.google.com.br/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#safe=off&q=flash+file+uploader+example
Use SSL encryption...

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.

Using Javascript to send an HTTP attachment to the user (open browser's Save as... dialog)

I'm new to web development, so I apologize if this question is noobish. I want to serve a file that is on the server's hard drive to the user when requested (ie, send an HTTP attachment to trigger the browser's "Save as..." dialog) in Javascript. The user clicks on a button on the page, the server generates a customized data file based on some of his/her account settings (and other parameters), and then the "Save as..." dialog should pop up. How should I go about implementing this in Javascript?
edit: for your reference, the server has Glassfish and Apache

Jane,
The save-as dialog only appears on page load. You need to redirect your user either directly to the file you want them to save, or to a server-side page that serves up the file.
Once you know the address of the file, do something like
window.location = http://yourserver.com/generatedfiles/file_2342342.txt
Alternatively, do something like this:
window.location = http://yourserver.com/getgeneratedfile.aspx?fileID=2342342
...which would redirect the user to a page that feeds the generated file. You then need to specify the content-disposition and filename in the header that comes from that page, as mentioned in Gandalf's reply.
Edit: Ah, you're using Apache. Probably won't have ASPX files on there then.

Set the Http Response header:
Content-Disposition: attachment; filename=myfile.txt
Or something like this
Save this page

#aric's answer is correct; however, window.location will cause load/unload events to get fired which may not be desirable for your application. In this case, you can likely direct a hidden iframe to the url to cause the save dialog to appear without losing your page's state.
Also, 'SaveAs' is probably an IE specific value for document.execCommand as it doesn't exist in Firefox.