How to upload a file and other data, from Vue app, to rest api backedn?

Hello, I created a REST API backend service, and I send data via axios from the frontend VUE app. The data is validated on the backend. The data sent has this format:

data: {
      attributes: {
        title,
        description,
        ...
      },
      relationships: {
        contact: {
          data: {
            id,
          },
        },
		...
      },
    },

I need now to add multiple files upload for this resource. I can create and send files using "FormData" class, but is there a way to send the data in JSON, and file, in the same request somehow. If not, how would you approach this. I was asked to change the backend as little as I can, so is there a leas painul solution for this.

vincent15000

3 years ago

Level 63

I think you have nothing special to do, but check if you send a multipart form-data.

1 like

ivymasterman

3 years ago

Best Answer

Level 3

I have tried sending JSON via FormData object, but with no success. In the end, I have created a separate route for file uploads.

Firstly I create the object via a standard Axios call. From the response, I extract the ID of the newly created object. Then I send the uploaded files to the new file upload endpoint, which contains the ID as a parameter.

1 like

Please or to participate in this conversation.