So I want to upload a file to the server using ajax, so the form is not submitted. Cffile requres the filefield attribute, but as there is no form object passed to coldfusion that doesn't work. I can store the value entered by the user as a variable in javascript, and pass that variable to cf. How can I use this variable to upload my file? Thanks.
EDIT
Solved by submitting to iframe.
You can use the cffileupload tag (embeds a flash widget for uploading) , or take advantage of XMLHttpRequest level 2 (browser support) via the method explained here.
Are you uploading images?
You could try uploading to a canvas tag client side using javascript.
Then ajax post the base64 png encoded contents of the canvas.
Further reading and examples:
How to upload/POST multiple canvas elements
How to convert image into base64 string using javascript
Resizing an image in an HTML5 canvas
Resize image before upload, but upload synchronously (not ajax). Is it possible?
http://coding.pressbin.com/84/File-API-Resize-photo-before-upload/
Submit the form to a hidden iframe and handle your form upload as you normally would.
Related
I'm setting up a typical profile picture upload and crop feature for a site. I'm looking at how others have set it up and I see that many are managing to have one input type="file" and it not only allows for selecting a file but also calls the PHP or JS to display the image.
I'm completely stuck on how to make it do something after the image has been chosen.
Does any one have a link or suggestion on how to perform this?
One way you could achieve this is to convert the file into a blob, then present it using an HTML5 canvas. Example: http://www.html5rocks.com/en/tutorials/file/dndfiles/
Another option is to issue an AJAX request after the file input has been changed. Do whatever server processing you need to (crop, save, etc.) then return the AJAX call a path to the file. Then just append a new <img src='filepath.jpg' /> to the DOM.
I would upload the image using AJAX, having a API receiving the image. When image has been saved the API-method returns the path of the image.
You can then display the image using the path you recieved from your API-method.
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.
I have html stored in a hidden input on a page and I want to get the user to download it inside of an html file (or if I change the stream format to doc the html can be inside that word doc).
Is there a way jQuery can write some headers then put the html inside of the request and have a person download it?
I can then avoid submitting it to a PHP function to download it.
Not possible without using flash really - unless you us base64 limited strings in links to encode it.
i need to create a component using html5 canvas that given an image the user can paint on it and directly (via a kind of save button) upload it's customized version on the server.
Can i use html canvas for it ?
Any suggestion ?
thx in advance
You can get the image as data-url like this:
var dataUrl = document.getElementById('your-canvas').toDataURL();
You could then send this (very long string) to the server and save it to a file after decoding it (it is encoded in base64).
EDIT: Remember to submit this via POST, as suggested in the comments. GET has some length-limits in various browsers, so its likely to exceed those limits with such a huge amout of data.
Note that this is currently dead-on-arrival for Android (up to and including 2.3). Please star this issue - http://code.google.com/p/android/issues/detail?id=7901
I want to upload a file using Ajax and php. I have a form with <input type="file"> tag. I want when user browses a file and clicks on submit, the file to be uploaded without a refresh. How should I do this ? It does't matter if refresh occur but i want to upload file with help of ajax.
Use a hidden iframe and set your form's target to that iframe's name. This way, when the form is submitted, only the iframe will be refreshed.
Have an event handler registered for the iframe's load event to parse the response.
More details on my blog post: http://blog.manki.in/2011/08/ajax-fie-upload.html
I did it with this jquery plugin. It pretty much mimics standard jquery ajax functionality, but also allows you to send data using iframe. No flash involved, pure javascript.
http://malsup.com/jquery/form/
Here is a file upload example
http://malsup.com/jquery/form/#file-upload
This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere.
check this:
http://valums.com/ajax-upload/
Take a look at SWFUpload, it should do what you want.
Here some I found http://blog.insicdesigns.com/2010/02/10-best-ajax-file-uploader-for-your-web-application/
and also jquery upload
plugins