AJAX Image Upload mit React, Rails und Paperclip

Question

Ich suche, aber nichts kommt meiner Frage nahe, außer this php question.

In meiner reagierenden Komponente, die Rails 5 verwendet, konnte ich ein Image nur dann in S3 hochladen, wenn ich das Formular übermittele; Ich möchte nicht, die Seite aktualisieren, damit ich dachte, dass ich einfach Ajax dafür verwenden könnte:

... 

imageUpload(){ 
    var formData = $(this).serialize(); 
    $.ajax({ 
     url: '<url>', 
     type: 'POST', 
     data: formData, 
     async: false, 
     cache: false, 
     contentType: false, 
     processData: false, 
     success: function (data) { 
      console.log(data); 
     }, 
     error: function() { 
      alert("error in ajax form submission"); 
     } 
    }); 
}, 

... 

Die html:

<form encType="multipart/form-data" acceptCharset="UTF-8"> 
    <input 
    type="file" 
    name="user[evidence]" 
    id="user_evidence" 
    /> 
    <button className="success button small" onClick={this.imageUpload}>Upload</button> 
</form> 

Das geht an die Update-Methode (Ajax url findet die Methode kein Problem):

Wenn ein Bild hinzugefügt wird und die Schaltfläche geklickt wird, wird nichts in s3 hochgeladen. Ich denke, ich vermisse eine Art von remote Informationen mit dem Ajax?

EDIT:

I here eine einfache Schienen 5 App mit diesem Thema erstellt haben.

Answer 1

Sie können this nicht innerhalb Ihrer Methode verwenden, um das Formular zu referenzieren. Versuchen Sie, refs zu verwenden.

<form ref="myForm" ...> 
... 
var formData = $(this.refs.myForm).serialize(); 

Answer 2

Haben Sie versucht:

<form remote="true"...>