使用React和Rails上传图像-Paperclip和AWS S3存储桶

Question

I have a react frontend and a Rails backend. I am using the paperclip gem and aws-sdk gem in order to upload images to my app. The whole idea is that a user can upload a comment and in that comment there can be an attachment. I think maybe I am sending my backend the wrong data though because it is not working.... On the frontend i'm using file reader to make a file object and sending my rails app the file object -- but it doesn't seem to be recognizing it. If i want my rails backend to recognize this image attachment, how should the image be formatted in my frontend before i send it to my rails app?

This is how my file object is stored in the state -- on handleChange of course:

 handleFileChange = (e) => {
  debugger

 e.preventDefault();

  let reader = new FileReader();
  let file = e.target.files[0];

  reader.onloadend = () => {
    this.setState({
      file: file,
      imagePreviewUrl: reader.result
    });
  }
  reader.readAsDataURL(file)
}

then when i submit the form i use a callback that eventually sends that file object to my adapter which makes the call to the rails backend as sseen below:

  static addComment(comment, project_id, datetime, clientView, file) {
   debugger
   return fetch(path,{
     method: 'POST',
     headers: headers(),
     body: JSON.stringify({
       client_view: clientView,
       comment_text: comment,
       project_id: project_id,
       currenttime: datetime,
       commentasset: file
     })
   })
   .then( resp => resp.json())
 }

so im sending my rails the file object in the param that is commentasset... but when i hit my byebug on my rails end and check

params[:commentasset] 

it appears to be blank. Why isnt it sending back my file object?

Answer 1

You're sending a request with JSON including the file as body. Try to send request using FormData instead:

static addComment(comment, project_id, datetime, clientView, file) {
   debugger
   const body = FormData.new();
   body.append('client_view', clientView);
   body.append('comment_text', comment);
   body.append('project_id', project_id);
   body.append('currenttime', datetime);
   body.append('commentasset', file);

   return fetch(path,{
     method: 'POST',
     headers: headers(),
     body: body
   })
   .then( resp => resp.json())
 }