How can i upload a file using prototype js ajax call

Question

I have create a varien custom form and want to submit the form using prototype ajax.This form contain four fields

two text field and 
two file field.

But when i submit the data using ajax of prototype js the form did not passed two field and on enctype="multipart/form-data" but does not works. Code:

<form action="bt" method="post" enctype="multipart/form-data" name="new-art-upload" id="new-art-upload">
<input type="text" name="fname" value="" class="input-text required-entry"/>
<input type="text" name="fname" value="" class="input-text required-entry" />
<input type="file" name="fileone" class="required-entry" />
<input type="file" name="filetwo" class="required-entry" />
<button type="submit" title="<?php echo $this->__('Save The Art') ?>" class="button newAdd_Sub" onclick="newartUpload.submit(this)"><span><span><?php echo $this->__('Save Art') ?></button>
</form>

Script:

<script>
 var newartUpload=new VarienForm('new-art-upload');
 newartUpload.submit=function(button,url){
 if(this.validator.validate) {
 var form=this.form;
 var oldUrl = form.action;
 if (url) {
 form.action = url;
 }
 var e=null;
 try{
 // this.form.submit();
 new Ajax.Request(this.form.action,{
 method:this.form.method,
 parameters:this.form.serialize(),
 contentType: 'multipart/form-data',
 onSuccess:function(transport){
 var response=transport.responseText.evalJSON(true);
 }.bind(this)
 });
 }catch(e){
 }
 if(e){
 throw e;
 }
 }
 }.bind(newartUpload)
</script>

I guess that it may content type and mostly content type in form/

Main issue is that files input fields are not sended to ajax request

• develophper: I thought ajax can't upload files? Any time I've had to do this I've used an iframe to store the form so it submits without reloading the whole page
• Geek Num 88: @ThomasRyan is correct Ajax cant directly upload files unless you are using the HTML5 File API, which is not supported by all browsers. Plus you need to do a raw upload instead.

Answer 1

You cannot sent files via AJAX calls (at least not on all browsers), but you can simulate an AJAX call and upload a file without a page refresh.
You can take a look at how the category image is uploaded.
You need to have an empty iframe (with id='some_iframe') in the page and submit that form to the iframe by using target='some_iframe'.
Here is a nice tutorial that shows you how to do it.

For real AJAX upload take a look at this but I don't know exactly what browsers are supported. All I know is that IE 9 or below does not allow this.

• Amit Bera: ahh .. after a long time . i got that answer :)

Answer 2

Have you tried overriding onsubmit? If yes, then DO NOT USE onclick.

I use id's in fields so I can reference getElementById, the form would have to be updated accordingly

var formsub = document.getElementById('new-art-upload');
formsub.onsubmit = function(event) { 
 event.preventDefault(); // prevent the browser from submitting the form
 // process your ajax 
 var A=new FormData();
 A.append("filenameone",document.getElementById('filenameone').value);
 A.append("filenametwo",document.getElementById('filenametwo').value); 
 A.append("fileone",document.getElementById('fileone').files[0]);
 A.append("filetwo",document.getElementById('filetwo').files[0]); 
 var C=new XMLHttpRequest(); 
 C.open("POST",URI); 
 C.onload=function() {
 alert(C.responseText); // do whatever you want after the form posted
 } 
 C.send(A);
}