我正在使用活动存储，它给了我一个强大的参数错误

Question

So I'm trying to add audio mp3 to my back end using rails API, active storage, and a react frontend. It seems that the associations are messed up or not getting read? I've tried switching all the code around help please

I set up my models

class Audible < ApplicationRecord
    has_many :reviews
    has_one_attached :track
    end

I set up my strong params

def audible_params
  params.require(:audible).permit(:title, :by, :language, :audio_file, :track, :belongs_to)        
end

---

but gives me this error, below that is my params im getting back

ActionController::ParameterMissing (param is missing or the value is empty: audible):
      
    app/controllers/audibles_controller.rb:49:in `audible_p
    in the console I get a xhr.js:175 POST http://localhost:3001/audibles 400 (Bad Request)
    dispatchXhrRequest @ xhr.js:175
    xhrAdapter @ xhr.js:20
    dispatchRequest @ dispatchRequest.js:40
    Promise.then (async)
    request @ Axios.js:64
    Axios.<computed> @ Axios.js:89
    wrap @ bind.js:11
    AddAudible._this.handleOnSubmit @ AddAudible.js:52
    callCallback @ react-dom.development.js:3920
    invokeGuardedCallbackDev @ react-dom.development.js:3969
    invokeGuardedCallback @ react-dom.development.js:4029
    invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4044
    executeDispatch @ react-dom.development.js:8279
    processDispatchQueueItemsInOrder @ react-dom.development.js:8311
    processDispatchQueue @ react-dom.development.js:8324
    dispatchEventsForPlugins @ react-dom.development.js:8335
    (anonymous) @ react-dom.development.js:8546
    batchedEventUpdates$1 @ react-dom.development.js:22238
    batchedEventUpdates @ react-dom.development.js:3718
    dispatchEventForPluginEventSystem @ react-dom.development.js:8545
    attemptToDispatchEvent @ react-dom.development.js:6028
    dispatchEvent @ react-dom.development.js:5946
    unstable_runWithPriority @ scheduler.development.js:654
    runWithPriority$1 @ react-dom.development.js:11326
    discreteUpdates$1 @ react-dom.development.js:22255
    discreteUpdates @ react-dom.development.js:3730
    dispatchDiscreteEvent @ react-dom.development.js:5912
    AddAudible.js:56 Error: Request failed with status code 400
        at createError (createError.js:17)
        at settle (settle.js:19)
        at XMLHttpRequest.handleLoad (xhr.js:65)

Parameters: {"title"=>"test number 2 for track audio", "by"=>"jonathan", "language"=>"english", "audio_file"=>"some file", "track"=>#<ActionDispatch::Http::UploadedFile:0x00007f8032ad32e8 @tempfile=#<Tempfile:/var/folders/pp/lqs349x52gq18t6lndp551mc0000gn/T/RackMultipart20210304-52429-km6crs.mp3>, @original_filename="a52260a3-3686-4fef-b5e2-264482172dcc.mp3", @content_type="audio/mpeg", @headers="Content-Disposition: form-data; name=\"track\"; filename=\"a52260a3-3686-4fef-b5e2-264482172dcc.mp3\"\r\nContent-Type: audio/mpeg\r\n">}
    Completed 400 Bad Request in 0ms (ActiveRecord: 0.0ms | Allocations: 115)

import axios from "axios";
        import React, { Component } from "react";
        import {
          Form,
          FormGroup,
          FormLabel,
          FormControl,
          Button,
          Container,
          Row,
          Col,
        } from "react-bootstrap";
        import { Link } from "react-router-dom";
        import AudioP from "./AudioP";
        
        //import DropZone from "./DropZone";
        
        export class AddAudible extends Component {
          state = {
            title: "",
            by: "",
            language: "",
            audio_file: "",
            track:""
          };
        
          handleOnChange = (e) => {
            const { name, value } = e.target;
            this.setState({
              [name]: value,
            });
          };
        
          handleFileUpload = (e) => {
            console.log("handle file", e)
            this.setState({
              track: e.target.files[0]
           })
          }
        
          handleOnSubmit = (e) => {
            e.preventDefault();
        
            const formData = new FormData()
        
            formData.append('title', this.state.title);
            formData.append('by', this.state.by);
            formData.append('language', this.state.language);
            formData.append('audio_file', this.state.audio_file);
            formData.append('track', this.state.track);
        
            axios
              .post("http://localhost:3001/audibles", formData)
              .then((res) => console.log(res,formData))
              .then((data) => this.props.history.push("/"))
              .catch((err) => console.log(err));
          };
        
        
          render() {
            return (
              <>
                <div
                  style={{
                    margin: "40px",
                    padding: "3%",
                    marginLeft: "20%",
                    width: "60%",
                    height: "100%",
                    backgroundColor: "white",
                    border: "1px solid gray",
                    fontFamily: "monospace",
                    boxShadow:"10px 20px",
                    borderRadius:"20px"
                  }}
                >
                  <h1 className="animate__animated animate__bounceInLeft">Add Audible</h1>
                  <p>
                    {" "}
                    Here we clearly, add new audibles. its simple you can either import
                    one that you have recorded else where. BUT, you can also record
                    straight from here.
                  </p>
                </div>
                <Container style={{ margin: "3%", marginLeft: "380px" }}>
                  <Row>
                    <Col xs={12}>
                      <Form onSubmit={this.handleOnSubmit}>
                        <FormGroup>
                          <FormLabel> Title </FormLabel>
                          <FormControl
                            type="text"
                            placeholder="Enter Title"
                            value={this.state.title}
                            onChange={this.handleOnChange}
                            name="title"
                          ></FormControl>
                          <FormLabel> By: </FormLabel>
                          <FormControl
                            type="text"
                            placeholder="Created By"
                            value={this.state.by}
                            onChange={this.handleOnChange}
                            name="by"
                          ></FormControl>
                          <FormLabel> Language: </FormLabel>
                          <FormControl
                            type="text"
                            placeholder="Language read in"
                            value={this.state.language}
                            onChange={this.handleOnChange}
                            name="language"
                          ></FormControl>
                          <FormLabel> Audible: </FormLabel>
                          <FormControl
                            type="text"
                            placeholder="Delete me after track works"
                            value={this.state.audio_file}
                            onChange={this.handleOnChange}
                            name="audio_file"
                            ></FormControl>
                          <FormLabel> Tracks: </FormLabel>
                          <Form.File id="formcheck-api-regular">
                        <Form.File.Input  type="file"
                            accept=".mp3,audio/*"
                            placeholder="Audio file here"
                            multiple={false}
                            onChange={this.handleFileUpload}
                            name="track"/>
                        </Form.File>
                        </FormGroup>
                        <Button type="submit"> Submit </Button>
                        <Link to="/" className="btn btn-danger ml-2">
                          Cancel
                        </Link>
                      </Form>
                    </Col>
                  </Row>
                </Container>
                <div style={{
                  margin: "40px",
                  padding: "3%",
                  marginLeft: "20%",
                  marginBottom:"9%" ,
                  width: "60%",
                  height: "100%",
                  backgroundColor: "white",
                  border: "1px solid gray",
                  fontFamily: "monospace",
                  boxShadow:"5px 10px",
                  borderRadius:"20px"
                }}>
                <h1 className="animate__animated animate__bounceInRight">Record audio</h1>
                  <p>
                    {" "}
                    Here we can record our book, then simply add to the new audible. This feature is coming soon!
                  </p>
                <AudioP/>
                {/* <DropZone/> */}
                </div>
              </>
            );
          }
        }
        
        export default AddAudible;

Answer 1

The problem is your form data/the params you're submitting. Your params look like this:

params =  {"title"=>"test number 2 for track audio", "by"=>"jonathan", "language"=>"english", "audio_file"=>"some file", "track"=> ... }

but Rails is expecting a nested hash looking like this:

 params = {"audible" => {"title"=>"test number 2 for track audio", 
                         "by"=>"jonathan", 
                         "language"=>"english", 
                         "audio_file"=>"some file", 
                         "track"=> ... }

So in your React part you can do something like this

...

let data = {
  title: this.state.title,
  by: this.state.by,
  language: this.state.language,
  audio_file: this.state.audio_file,
  track: this.state.track
}
formData.append('audible', JSON.stringify(data))

...