createAssetFromFiles in React Native

[harrywrok]

trafficstars

I m trying to create asset but can't see the image i uploaded(Image is broken). For "file" value, i used RNFetchBlob to "wrap" or "readStream".

Code

const stream = await RNFetchBlob.fs.readStream(uri.replace('file://', ''), 'base64')
const selectedImg = await RNFetchBlob.wrap(uri.replace('file://', ''))

const image = {
    fields: {
      title: {
        'en-US': testFile
      },
      file: {
        'en-GB': {
          contentType: 'image/jpeg',
          fileName: testFileName,
          file: selectedImg, // or stream
        }
      }
    }
  }

contentful.createAssetFromFiles(image)

SDK Response

{
   "fields":{
      "file":{
         "en-US":["Object" ]
      },
      "title":{
         "en-US":"testFile"
      }
   },
   "metadata":{
      "tags":[  ]
   },
   "sys":{
      "createdAt":"2021-12-22T20:49:41.405Z",
      "createdBy":{
         "sys":[ "Object" ]
      },
      "environment":{
         "sys":[ "Object" ]
      },
      "id":"6jQR6q4SrOFbiukeeeee4R",
      "publishedCounter":0,
      "space":{
         "sys":[ "Object" ]
      },
      "type":"Asset",
      "updatedAt":"2021-12-22T20:49:41.405Z",
      "updatedBy":{
         "sys":["Object" ]
      },
      "version":1
   }
}

There is no error in SDK's response but i cant see the image on Contentful

Test Device

• Ios -> Simulator(14.5)
• Android -> real device(Android 10)

Can you help me what is wrong here?

[luizfonseca]

@harrywrok I'm not 100% sure, but you probably need to call contentful.processForAllLocales -- as in, you need to process the upload data, as seen in this test: https://github.com/contentful/contentful-management.js/blob/22f1e5ecfa98146426a6e9c43ab7adf4eccab78a/test/integration/asset-integration.js#L126-L147

[harrywrok]

@luizfonseca after calling await asset.processForAllLocales({ processingCheckWait: 5000 }) processedAsset.fields.file['en-US'] -> {"contentType": "image/jpeg", "details": {"size": 129}, "fileName": "img.jpg", "url": "//images.ctfassets.net/vi16v6goahak/63vC7xvOxVlmNvgg6JzurN/a0be483480e50d27631b6fc49e05ed3e/img.jpg"}

There is no error in response and i cant see images again.

[luizfonseca]

@harrywrok Not sure if you've solved this, but can you double check if the blob/stream is being passed correctly? If you access that image, you will find in your inspector it's just a partial encoded string instead.

I'm not familiar with the library you are using, but I'd imagine that you need to consumer the stream with .onData: https://github.com/joltup/rn-fetch-blob/wiki/File-System-Access-API#readstreampath-encoding-buffersize-interval-promisernfbreadstream

A file stream will NOT open automatically, invoke this method to start read chunks from the file. https://github.com/joltup/rn-fetch-blob/wiki/Classes#open

[luizfonseca]

@harrywrok otherwise, maybe readFile is what you want https://github.com/joltup/rn-fetch-blob/wiki/File-System-Access-API#readfilepath-encodingpromise

[Spring3]

Closing for inactivity