React-native and laravel form Data problem

Question

So I am using react-native to create an app trying to upload files to a server. So far I think i got everything working on app side but I am running into a problem on the backend using laravel 8. I am guessing the append method turns everything into an arrays so when using Log::debug on the request it looks like this :

[2022-03-09 22:01:49] local.DEBUG: array (
  '_parts' => 
  array (
    0 => 
    array (
      0 => 'document',
      1 => 
      array (
        'uri' => 'file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252Fapp-32d08ef3-f12b-49b0-876b-8394e2c8806f/DocumentPicker/1f62818a-b25d-46ee-8cb5-6fab5e5073a9.PNG',
        'name' => 'Mobile Test.PNG',
        'type' => 'image/png',
      ),
    ),
    1 => 
    array (
      0 => 'description',
      1 => 'Mobile',
    ),
    2 => 
    array (
      0 => 'mobile',
      1 => true,
    ),
  ),
)

On the website part I am using angular and the request looks more like a json object than what I am getting from the react native one. Code used in react native :

let formData = new FormData();
    formData.append("document", {
      uri: document.uri,
      name: document.name,
      type: document.mimeType,
    });
    formData.append('description', description)
    formData.append('mobile', true)
    axios
      .post("http://10.0.2.2:8000/api/fileupload", formData, {
        headers: {
          Authorization: `Bearer ${token}`,
        })

Is there a way to prevent this from happening in the app side of the project or is there something i can do on the laravel side to convert this into objects? Thank you for reading and any advice is a lot appreciated. Update: console logging the information before making the request prints out this:

FormData {
  "_parts": Array [
    Array [
      "document",
      Object {
        "name": "Mobile Test.PNG",
        "type": "image/png",
        "uri": "file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252Fapp-32d08ef3-f12b-49b0-876b-8394e2c8806f/DocumentPicker/ec049e85-fbae-43b5-b365-686997284142.PNG",
      },
    ],
    Array [
      "description",
      "Uploaded from android",
    ],
  ],
}

So am I right to assume that the .append method is what is turning my file object into an array and causing the problem here?

score 0 · Answer 1 · answered Mar 20 '22 at 11:04

0

Problem was solved by removing the content type header and allowing axios to assign it itself.

answered Mar 20 '22 at 11:04

Matter212

37
5

score -1 · Answer 2 · answered Mar 09 '22 at 22:33

-1

$_POST which is what Laravel reads POST data from will always be an array per the PHP standard for this global variable. Ref: https://www.php.net/manual/en/reserved.variables.post.php

Essentially given the above, you are actually asking how to convert an array into an object in PHP which is answered in several ways here: How to convert an array to object in PHP?

answered Mar 09 '22 at 22:33

James Taylor

249
1
5

Sorry it's late to try and test it atm but will let you know tomorrow of the results. – Matter212 Mar 09 '22 at 23:32
Sadly that didn't help much since I still have a hard time properly destructuring it and passing the right arrays to the right functions – Matter212 Mar 10 '22 at 07:28
> is the .append method what is turning my file object into an array? I addressed the question you asked. If what you are really looking for is how to send files via axios you should reference https://stackoverflow.com/questions/42907747/how-to-send-a-file-via-axios-to-laravel and then to process them in Laravel reference https://stackoverflow.com/questions/41990023/how-to-save-uploaded-image-to-storage-in-laravel – James Taylor Mar 10 '22 at 15:26
I know how to do that. Problem is the request i am getting on the back end is unusual file uploads shouldn't be structured like that. But i am very new to react native and app development at general I am not sure where I am making the mistake – Matter212 Mar 10 '22 at 17:30

React-native and laravel form Data problem

2 Answers2