Cannot POST to `/v3/models` from React Native

api
upload

(Jmilamwalters) #1

Hello, all!

So, for more than a little while now, I have worked to make a POST request to https://api.sketchfab.com/v3/models from React Native; alas, I am convinced it simply cannot be done. To elaborate, my goal is to enable uploading of a mesh file (in this case, a .PLY) from local storage on an Android device to Sketchfab.

In short, I'm wondering whether anyone here has managed to upload to Sketchfab's models API using React Native?

My stack consists of:

  • React, v. 16.0.0-alpha.12
  • React Native, v. 0.45.1
  • React Native Fetch Blob, v. 0.10.6, enabling file system support
  • Axios, v. 0.16.2, an HTTP client

To preface, I do not believe it is an authentication issue, as I am able to make authenticated calls to other API endpoints. Rather, the trouble I've been experiencing seems particular to POST requests made to https://api.sketchfab.com/v3/models.

As it stands, I'm able to:

And as far as uploading goes, I am able to:

  • Encode locally-stored .PLY file as base64;
  • Package the file as FormData; and
  • POST to a public test server;

The results of which are available for inspection here:

Provided the link expires after 48 hours, I am also enclosing screenshots for review. In the second slide (separate request), I have drawn attention (in pink) to:

  • POST parameter of modelFile
  • Content-Type header, specifying multipart/form-data
  • The access token passed in with the request, which I hitherto validated against https://api.sketchfab.com/v3/me


On the other hand, when I attempt the same request against https://api.sketchfab.com/v3/models, I return a status code of 400 (screenshot of error object likewise enclosed):

Here's the snippet of code I am using to make the request:

/**
 * @param {String} token - The access token generated by OAuth 2.0
 * @param {String} filepath - The local storage path of the file to POST
 */
postModelToSketchfab = (token: string, filepath: string) => {
  const url = 'https://api.sketchfab.com/v3/models';
  // Use React Native library `react-native-fetch-blob` to read the mesh file
  // at `filepath`, and encode as `base64`. Relevant API documentation
  // available here:
  // https://github.com/wkh237/react-native-fetch-blob/wiki/File-System-Access-API#readfilepath-encodingpromise
  RNFetchBlob.fs.readFile(filepath, 'base64').then(payload => {
    const body = new FormData();
    body.append('modelFile', payload)
    // Use Promise-based HTTP client `axios` to dispatch POST request; docs re:
    // API available here:
    // https://github.com/mzabriskie/axios#axios-api
    axios({
      url,
      method: 'POST',
      headers: {
        Accept: 'application/json',
        Authorization: `Bearer ${token}`,
        'Content-Type': 'multipart/form-data',
      },
      data: body,
    })
      .then(res => {
        console.log(res)
      })
      .catch(err => {
        console.error(err);
      });
  });
};

Has anyone here ever succeeded in accomplishing a comparable feat? Perhaps someone notices a problem with my code or my approach?

Any information concerning this matter will be greatly appreciated. Thank you!


(Shaderbytes) #2

is the string "Bearer " not meant to be "Token " ?


(Jmilamwalters) #3

Thanks, @shaderbytes.

As I understand, Sketchfab's development guide advises the authorization header assume the following form:

Authorization: Bearer [ACCESS_TOKEN]

Reference: https://sketchfab.com/developers/oauth#making-authenticated-calls

Which, I believe, conforms to spec.


(Shaderbytes) #4

ok sorry I see , it is like you say with OAuth 2.0 implementation. "Token" is the value when you are not using OAuth and using you api id.

cheers