Angular 4 Rails 5回形针文件上传

Question

I am working on a project using a Angular 4 frontend and a Rails 5 api backend. I am trying to upload video using paperclip, but I have no idea why it is not saving to the database. All the parameters are there in the log it still not saving. I've modified the controller taking out the require statement and refactored the frontend code serveral times. There are serveral techniques I've tried from various sources that have not worked and i am drawing a blank as to what exactly is going on. Any input would be greatly appreciated.

this is a log of what im seeing

I, [2017-11-22T19:21:10.984681 #5898]  INFO -- : [6c0fdb67-31b6-43c6-8a79-e5ed2dfbec1e] Started POST "/movies" for 108.71.214.220 at 2017-11-22 19:21:10 +0000
I, [2017-11-22T19:21:11.001990 #5898]  INFO -- : [6c0fdb67-31b6-43c6-8a79-e5ed2dfbec1e] Processing by MoviesController#create as HTML
I, [2017-11-22T19:21:11.002088 #5898]  INFO -- : [6c0fdb67-31b6-43c6-8a79-e5ed2dfbec1e]   Parameters: {"video"=>#<ActionDispatch::Http::UploadedFile:0x000055a94d4e5970 @tempfile=#<Tempfile:/tmp/RackMultipart20171122-5898-17o86vd.mp4>, @original_filename="SampleVideo_720x480_1mb.mp4", @content_type="video/mp4", @headers="Content-Disposition: form-data; name=\"video\"; filename=\"SampleVideo_720x480_1mb.mp4\"\r\nContent-Type: video/mp4\r\n">, "title"=>"Test Movie", "year"=>"1998", "plot"=>"Awesomeness"}
D, [2017-11-22T19:21:11.016579 #5898] DEBUG -- : [6c0fdb67-31b6-43c6-8a79-e5ed2dfbec1e]   ^[[1m^[[36mApiKey Load (0.3ms)^[[0m  ^[[1m^[[34mSELECT  "api_keys".* FROM "api_keys" WHERE "api_keys"."client" = $1 LIMIT $2^[[0m  [["client", "z8CSVtE3qejMxs4FFwYmKA"], ["LIMIT", 1]]
I, [2017-11-22T19:21:11.021183 #5898]  INFO -- : [6c0fdb67-31b6-43c6-8a79-e5ed2dfbec1e] Redirected to http://localhost:4200
I, [2017-11-22T19:21:11.021266 #5898]  INFO -- : [6c0fdb67-31b6-43c6-8a79-e5ed2dfbec1e] Filter chain halted as :authorized rendered or redirected
I, [2017-11-22T19:21:11.021376 #5898]  INFO -- : [6c0fdb67-31b6-43c6-8a79-e5ed2dfbec1e] Completed 302 Found in 19ms (ActiveRecord: 5.5ms)

template

<div class="container">
    <h1>Movie Add Form</h1>
    <form [formGroup]="newForm" (ngSubmit)="upload()">
        <div class="form-group">
            <label for="title">Title:</label>
            <input 
                type="text" 
                name="title" 
                class="form-control" 
                formControlName="title"
            >

            <label for="year">Year:</label>
            <input 
                type="text" 
                name="year" 
                class="form-control" 
                formControlName="year"
            >

            <label for="plot">Plot:</label>
            <input 
                type="text" 
                name="plot" 
                class="form-control" 
                formControlName="plot"
            >
        </div>

        <div class="form-group">
            <input type="file" #fileInput placeholder="Upload file..." accept="video/mp4">
        </div>

        <div class="form-group">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </form>
</div>

component

export class DvdNewComponent implements OnInit {
    newForm: FormGroup
    @ViewChild('fileInput') fileInput;

    constructor(private dvdService: DvdService,
                            private router: Router) { }

    ngOnInit() {
        this.newForm = new FormGroup({
            'title': new FormControl(null, Validators.required),
            'year': new FormControl(null, Validators.required),
            'plot': new FormControl(null, Validators.required)
        })
    }

    upload() {
        const movieFile = this.fileInput.nativeElement.files[0];

        this.dvdService.uploadMovie(movieFile, this.newForm.value)
            .subscribe(
                (data) => {
                    console.log('data ' + data)
                },
                (err: HttpErrorResponse) => {
                    console.log(err)
                },
                () => {
                    this.router.navigate(['/library'])
                }
            )
    }
}

service

uploadMovie(fileToUpload: File, form): Observable<Movie> {
        const formData = new FormData();
        formData.append('video', fileToUpload)
        formData.append('title', form.title)
        formData.append('year', form.year)
        formData.append('plot', form.plot)
        const headers = new Headers();
        headers.delete('Content-Type');
        headers.append('access-token', this.tokenService.currentAuthData.accessToken)
        headers.append('client', this.tokenService.currentAuthData.client)
        const options = new RequestOptions({ headers: headers });

        return this.http.post(this.moviesURL + '/movies', formData, options)
        .map((res) => res.json())
    }

Backed controller

def create
                movie = Movie.new(movie_params)

                if movie.save
                        render json: movie, status: 201
                else
                        render json: { errors: movie.errors }, status: 422
                end
        end

def movie_params
                        params.permit(:title, :year, :plot, :video, :video_url)
                end

Answer 1

After reading the comments, I checked rack-cors and found that it was enabled. Following, I checked the authorization system and found after after some digging that the client id was not matching. This was do to the frontend being routed to the wrong endpoint. So, I fixed the problem by inserting the correct endpoint and now the code works.