1

I'm trying to perform a basic Laravel 5 post request which simply do the following:

  • Save some data into a database
  • Stores a file (image) into public storage under a name which is a possible combo of 20 random numbers following '.jpg'
  • Save a url (which is used to locate the image in an img tag. I'm aware this isn't the best approach so feel free to post)

However, when performing an ordinary post request with no special headers from angular 6 to laravel 5, for some reason the File keeps converting into an empty array. (Before and after shots are below)

Before:

0: Object { id: 0, body: null, file: File }

After:

0: Object { id: 0, body: null, file: [] }

The File is full and is used to create a preview on a canvas before submitting so It works. The console is logging this data the line before posting and returning the $req Request before performing any php code in Laravel.

So the only place anything could get lost in translation is the in between. Code is as follows:

Angular 6:

postToLaravel(object) {
  console.log(object.message);
  this.http.post(this.url + '/add/message', object).subscribe(res => {
    console.log(res);
  });
}

Laravel 5:

function addMessage(Request $req) {
    return $req->messages;

The empty array keeps pushing nothing to storage under a name its registered as a jpg file but no image is shown.

On the component that images are uploaded we have the following block take place after a (change)="" event:

onFileSelected(e: any) {
    this.sectedFile = e.target.files[0];
    this.isImage = true;
    this.messageService.addImage(this.id, this.sectedFile);
    this.preview();
  }

The service function just finds the right object and adds a file:

addImage(id, file) {
    var index = this.data.findIndex(x => x['id'] == id);
    this.data[index]['body'] = null;
    this.data[index]['file'] = file;
  }

And when the submit button is pressed it just takes all the variables in the service and compacts them into an object. this object contains messages which is an array of further objects (the objects are as shown at the top) (If that made sense)

pushMessageToServer() {
  this.messageService.postToLaravel({
    title: this.title,
    location: this.location,
    gender: this.gender,
    age: this.age,
    deadline: this.deadline,
    messages: this.data
  });
}

Is there something I'm missing here?

Let me know should You need any extra info.

Crap_at_everything
  • 44
  • 5
  • How does your javascript part look like, that needs to be fixed first – utdev Oct 10 '18 at 15:42
  • can you update your answer with that code, so that it's more readable – utdev Oct 10 '18 at 15:51
  • Ok I am not familiar with Angular, but the code you pasted above does not have a submit function where exactly do you post (xhr) the data to the server (Laravel) – utdev Oct 10 '18 at 16:05
  • I have provided the submit block you asked for at the end. It basically just compiles all the local variables into an object and posts that in a http post request to Laravel – Crap_at_everything Oct 10 '18 at 16:15
  • ok can you console.log the posted data in your javascript promise and also `dd($req->all())` in your controller method and see if you get the correct data? – utdev Oct 10 '18 at 16:47
  • You need to set the encoding type to `multipart/form-data`. Are you using a [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData)? – Marco Florian Oct 10 '18 at 16:48
  • @MarcoFlorian I was not using FormData no. After some research should I convert all my data into a single FormData and post it with the content-type header as "multipart/form-data"? Or should I just put all my images into a new FD each and post that in place of the File in each object. – Crap_at_everything Oct 10 '18 at 17:28
  • https://stackoverflow.com/questions/40214772/file-upload-in-angular – Marco Florian Oct 10 '18 at 17:38
  • @MarcoFlorian Even setting the headers and attempting to send very basic form data is still throwing the same issue when it reaches the api. Do you have any thoughts on this? – Crap_at_everything Oct 10 '18 at 19:40
  • https://laracasts.com/discuss/channels/laravel/file-upload-always-comes-up-as-empty-when-accessed-in-controller-1?page=1 – Marco Florian Oct 10 '18 at 20:20
  • try $req->get('messages'); or $req->input('messages'); – user3647971 Oct 10 '18 at 22:02
  • Another way to check for data in laravel is `has()` method. `if($req->has('messages')){` – user3647971 Oct 10 '18 at 22:07

1 Answers1

0

Turns out images in FormData are passed through and displayed as empty objects in the console. I just needed to know how to grab them. Thanks for your help everyone

Crap_at_everything
  • 44
  • 5