How do I convert this form to send using XHR in AngularJS

Question

I can submit an image to my s3 bucket with this form. I would like to know how to accomplish the same using XMLHTTPRequest and FormData. This is inside an AngularJS app.

This works

<form action="https://abucket.s3.amazonaws.com/" enctype="multipart/form-data" id="the-form" method="post">                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
<input id="file" name="key" type="hidden" value="raw/${filename}" />                                                                                                                                      
<input id="image_uploader_aws_access_key_id" name="AWSAccessKeyId" type="hidden"     value="ABC" />
<input id="image_uploader_acl" name="acl" type="hidden" value="public-read" />
<input id="image_uploader_policy" name="policy" type="hidden" value="MYBASE64POLICY" /> 
<input id="image_uploader_signature" name="signature" type="hidden" value="MYSIG" />                                                                                                                      
<input id="image_uploader_image" name="file" type="file" />                                                                                                                                           
<input name="commit" type="submit" value="Upload" />                                                                                                                                                                                                                                                                   

How to make this work - getting 400 Bad Request

var xhr = new XMLHttpRequest();                                                                                                                                                                   
xhr.open('POST', 'https://abucket.s3.amazonaws.com', true);                                                                                                                                   
var fd = new FormData();                                                                                                                                                                          
fd.append('file', file);                                                                                                                                                                          
fd.append('key', 'raw/${filename}');                                                                                                                                                              
fd.append('AWSAccessKeyId', 'MYAWSKEY');                                                                                                                                             
fd.append('acl', 'public-read');                                                                                                                                                                  
fd.append('success_action_redirect', "https://abc.com/upload_success")                                                                                                        
fd.append('policy', "MYBASE64POLICY")                                                                                                                                                                   
fd.append('signature',"MYSIG");                                                                                                                                            
fd.append('Content-Type', undefined);                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
xhr.send(fd);   

Answer 1

You can try to create the form by javascript and submit it without any AJAX:

var form = angular.element('<form>',{
        action:"https://abucket.s3.amazonaws.com/",
        //... 
        method:"POST",
        css: {display:"none"} // For keeping layout unchanged
});
form.append( angular.element('<input type="hidden">').attr('name','key').val('raw/${filename}'));
// --- Create other input similar to above's one -----

//Then submit it  
form.appendTo("body")   // Firefox: does not submit the form unless it's a part of the DOM
      .submit()
      .remove();   // Removing temporarily created "form" from the DOM