How to Upload a File Using Prototype JS AJAX Call

ajaxprototype-jsvarien-file-uploader

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

Best Answer

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.

Related Topic