Angular 4 Rails 5 Büroklammer Datei Upload

Question

Ich arbeite an einem Projekt mit einem Angular 4 Frontend und einem Rails 5 API Backend. Ich versuche Videos mit Büroklammer zu laden, aber ich habe keine Ahnung, warum es nicht in der Datenbank gespeichert wird. Alle Parameter sind dort im Log noch nicht gespeichert. Ich habe den Controller modifiziert, indem ich die require-Anweisung herausgenommen und den Frontend-Code mehrfach überarbeitet habe. Es gibt verschiedene Techniken, die ich aus verschiedenen Quellen versucht habe, die nicht funktioniert haben, und ich zeichne eine Lücke, was genau vor sich geht. Jede Eingabe würde sehr geschätzt werden.

das ist ein Protokoll, was im sehen

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) 

Vorlage

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

Komponente

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

Unterstützt 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

Nach dem Lesen der Kommentare, überprüfte ich Rack-cors und fand, dass es aktiviert wurde. Im Anschluss überprüfte ich das Autorisierungssystem und fand nach einigen Ausgrabungen heraus, dass die Client-ID nicht übereinstimmte. Dies geschah, weil das Frontend an den falschen Endpunkt weitergeleitet wurde. Also habe ich das Problem behoben, indem ich den korrekten Endpunkt eingefügt habe und jetzt funktioniert der Code.