uploading images using Angular 4 and carrierwave - ruby-on-rails

Question

I am trying to make an app that uses an angular 4 front end with a rails back end. I am currently trying to figure out how to upload images to my rails back end server using carrierwave. I am very stuck, there is very little information out there on how to implement Angular 4 with rails and carrierwave. I cannot figure out how to get it to upload the image to the rails server, when I inspect the rails console I get the below message. from what I can tell there is nothing being posted for some reason and I do not know why this is. If anyone who knows more about angular and rails could help that would be great.
rails console message when I try to upload image:
Processing by ImagesController#create as HTML
Parameters: {"images"=>{}}
Completed 400 Bad Request in 1ms (ActiveRecord: 6.0ms)
HTML
<input type="file" #selectFile id="selectFile" name="selectFile" class="btn btn-success">
<input type="button" class="btn btn-primary" (click)="uploadImage()" value="Upload Image">
upload-image.component.ts
export class UploadImageComponent{
#ViewChild('selectFile') selectFile;
constructor(private uploadService: UploadService) {}
uploadImage(){
let files = this.selectFile.nativeElement.files[0];
this.uploadService.uploadImage(files).subscribe(data => {return true},
error => {
console.log("error uploading image");
return Observable.throw(error);
})
}
upload-service.ts
#Injectable()
export class StallionService {
headers: Headers;
options: RequestOptions;
private imagesUrl = 'http://localhost:3000/images';
constructor(private http: Http) {
this.headers = new Headers({'Content-Type':'application/json'});
this.options = new RequestOptions({headers: this.headers});
}
uploadImage(image: File){
console.log(image);
const formData = new FormData();
formData.append("img", image);
console.log(formData);
return this.http.post(this.imagesUrl, formData,
this.options).map((res: Response) => res.json());
}
}

Answer 1

I can't see any errors in your code and i am a bit surprised that no params are shown in your rails console.
But i can show you how i did.
A simple solution (in Angular 2):
With the way you've set it up, i've found that it's very complex to save an image like that with Carrierwave and Angular.
A simpler solution is to use Base64 and the gem Carrierwave Base64 and Angulars FormGroup and FormController.
You could then use FileReader on change to set your file-input to the value:
<!-- part of a FormGroup called imageForm -->
<input formControlName="file" (change)="setImageFile($event)" type="file" id="selectFile" name="selectFile" class="btn btn-success">
And then in your component:
setImageFile(event) {
this.image_file = event.target.files[0];
if(this.image_file) {
const file_reader = new FileReader();
file_reader.readAsDataURL(this.image_file);
file_reader.onload = (e: any) => {
this.imageForm.get('file').setValue(file_reader.result);
}
}
}
And then on your upload you can send imageForm.value in your post request.
With the base64 gem you have to change one line (read on the GitHub page) but otherwise things will work as before and you are now able to save the image to the AWS etc..
I hope you get the idea - it worked for me! :)