Téléchargement de fichiers de trombones angulaires 4 Rails 5

Je travaille sur un projet utilisant un frontend Angular 4 et un backend api Rails 5. J'essaie de télécharger une vidéo à l'aide d'un trombone, mais je ne sais pas pourquoi elle n'est pas enregistrée dans la base de données. Tous les paramètres sont là dans le journal qu'il ne sauvegarde toujours pas. J'ai modifié le contrôleur en supprimant l'instruction require et refactorisé le code frontal plusieurs fois. Il existe plusieurs techniques que j'ai essayées à partir de diverses sources qui n'ont pas fonctionné et je dessine un blanc sur ce qui se passe exactement. Toute contribution serait vivement appréciée.

c'est un journal de ce que je vois

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)

modèle

<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>

composant

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'])
                }
            )
    }
}

un 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())
    }

Contrôleur sauvegardé

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