I'm developing an app with PhoneGap (Vue, Framework7) and a WordPress backend.

I'm trying to upload a captured image to the WordPress backend through the media REST API endpoint (using axios), but I get an error back.

The image is displayed correctly in the app (using DATA_URL - base64 encoding), but when I try to upload it to the endpoint it throws an error.

const apiHost = 'https://example.com/wp-json'
let image_form_data = new FormData

// self.images[0] is the first base64 encoded image stored in a Vuex store
// self.jwToken is the JavaScript Web Token string
image_form_data.append( 'file', self.images[0] )

const imagesOptions = {
  method: 'post',
  url: apiHost + '/wp/v2/media',
  headers: {
    "Accept": "application/json",
    "Content-Type": "multipart/form-data",
    "Authorization": 'Bearer ' + self.jwToken,
    "Content-Disposition": "attachment; filename=\"uploaded_image.png\"",
    "Cache-Control": "no-cache"
  },
  data: image_form_data
}

axios( imagesOptions )
.then( (imgResp) => {
  console.log('imgResp')
  console.log(imgResp)
} )

It throws an error:

URL: https://example.com/wp-json/wp/v2/media
State: 500 Internal Server Error
Source: Network

The server is set to accept 16M file upload, so it shouldn't be a problem (but who knows?).

But I've already got error like "resource not allowed for security reasons" (bypassed with define('ALLOW_UNFILTERED_UPLOADS', true); in wp-config.php).

I could solve it earlier with a custom API endpoint and using a filereader / blob, but it is important now for me to use the "official" endpoint.

Has somebody any idea how to solve this? (I've already read a lot of posts on SO (and elsewhere), but nothing worked.)

0 Answers