0

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

  • 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 – develophper Apr 7 '15 at 15:28
  • @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. – Geek Num 88 Apr 7 '15 at 23:02
2

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.

  • ahh .. after a long time . i got that answer :) – Amit Bera Jan 4 '17 at 7:52
1

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);

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.