0

I am building a react native app for iOS devices, where we use Contentful as the related Headless CMS. Within this app there is a form to upload a case study which includes an image selected from either the camera or the device gallery.

The react-native-image-crop-picker module has been added to use the camera functionality. The code for this is as follows

const fromLibrary = () => {
    ImagePicker.openPicker({
      width: 300,
      height: 400,
      includeBase64: 'true',
      cropping: true,
    }).then(image => {
      setImage(image);
    });
  };

  const fromCamera = () => {
    ImagePicker.openCamera({
      width: 300,
      height: 400,
      includeBase64: 'true',
      cropping: true,
    }).then(image => {
      setImage(image);
    });
  
  };

The image object is then based to the createUpload function from the contentful-management api

const uploadAsset = image => {

  client
      .getSpace('xxxxxxxx')
      .then(space => space.getEnvironment('xxxxx'))
      .then(environment => {
      console.log('uploading...');
         environment.createUpload({
            file: image.data,
            contentType: image.mime,
            fileName: image.filename,
          }) .then ( upload => { 
            
            console.log(upload)
           return environment.createAsset({
            sys: {
              contentType: {
                sys: {
                  type: 'Link',
                  linkType: 'ContentType',
                  id: upload.sys.id,
                },
              },
            },
            fields: {
              title: {
                'en-US': image.filename,
              },
              file: {
                'en-US': {
                  fileName: image.filename,
                  contentType: image.mime,
                  uploadFrom: {
                    sys: {
                      type: 'Link',
                      linkType: 'Upload',
                      id: upload.sys.id,
                    },
                  },
                },
              },
            },
          })
          
        })
        .then(asset => {return asset})
        .then(asset => asset.processForLocale('en-US', { processingCheckWait: 2000 }))
        .catch(console.error);
     //   .then(asset => asset.publish())

      }) .catch(console.error);

};

This returns the expected response but when i look in the contentful space, there is no processed upload. see image

View of filed process in Contentful

I have been stumped by this for a few days and any advice on how to upload from camera/gallery to contentful would be greatly appreciarted.

I have follwed the details in this content community post

I have investigated further and looking at the contentful documentation it says to use the createReadStream from the fs module. Which when i try to use is undefined.

carnellp
  • 1
  • 1

0 Answers0