Help with React-Native upload to Cloudinary

[mbrimmer83]

I am struggling with this example, the main difference is I am using Expo and thus expo-image-picker. When passing the file to upload it attempts to upload to Cloudinary but the response is an error "Unsupported source URL": "path/to/file/on/device". I think this is because the URL should contain the data. Something similar to what is mentioned here.

I have tried building an input object based on the types declares for UploadInfo and I get "Error: Unknown type of file added: object"

useRequestPreSend(async () => {
    const response = await utils.media.signedUpload.fetch({
      public_id: `${CLOUDINARY_FOLDER}/${uuidv4()}`
    })

    return {
      options: {
        destination: {
          ...pick(['url'], response),
          params: {
            ...pick(
              ['signature', 'api_key', 'timestamp', 'public_id'],
              response
            )
          }
        }
      }
    }
  })

  useItemFinishListener((item) => {
    const response = JSON.parse(item.uploadResponse.data)
    console.log(`item ${item} finished uploading, response was: `, response)
  })

  useItemErrorListener((item) => {
    console.log('Error', JSON.stringify(item))
  })

  useItemStartListener((item) => {
    console.log(`item ${item} starting to upload,name = ${item}`)
  })

  const handleCreateImage = useCallback(
    async (cloudinaryId: string) => {
      await mutate({ cloudinaryId })
    },
    [mutate]
  )

  const handleFileUpload = useCallback(
    (file: string) => {
      uploady.upload(file)
    },
    [uploady]
  )

  const handleChooseFile = useCallback(async () => {
    try {
      Keyboard.dismiss()
      const result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        allowsEditing: false,
        quality: 1
      })

      if (result.canceled) return null

      const uploadFile = path<ImagePicker.ImagePickerAsset | undefined>(
        ['assets', 0],
        result
      )

      if (!uploadFile) return null

      // If file size can't be found, fall back to cloudinary limits
      const isOk = isLessThanTheMB(uploadFile?.fileSize || 1, IMAGE_SIZE_MAX_MB)

      if (!isOk) {
        setError(
          'The file size is too large. Max size is' + IMAGE_SIZE_MAX_MB + 'MB'
        )
        return null
      }

      handleFileUpload(uploadFile.uri)
    } catch (e) {
      setError(`${e}`)
    }
  }, [handleFileUpload])

I think I have this working by using this to build the file path with the data

export const mimeMap = {
  jpg: 'image/jpeg',
  jpeg: 'image/jpeg',
  png: 'image/png'
}

const getFileInfo = (filePath: string, base64: string) => {
  const splitFileName = filePath.split('.')
  const extention = splitFileName[splitFileName.length - 1].toLowerCase()

  const mimeType = mimeMap[extention]
  return `data:${mimeType};base64,${base64}`
}

[mbrimmer83]

I think better documentation on the uploader arguments and what is expected for the sender to work would be helpful here.

[yoavniran]

hey @mbrimmer83
I'd like to understand the issue better.
From what I read, this seems like a specific issue with native-uploady + Cloudinary. Is that correct? In that case, I'd be happy to add your example for anyone finding themselves with a similar requirement.

You mentioned "better documentation" - What exactly do you feel is missing or unclear?

Thanks!

[mbrimmer83]

Hello, @yoavniran Sorry I missed your response. I find it difficult to figure out what needs to be done when working with @rpldy/native-uploady. For instance, right now I have a different problem than the one above. I need to upload a blob to a different server from my mobile app. It appears that the way this would normally work is to use @rpldy/chunked-sender, but there isn't a clear way I can see to do this and I'm not familiar enough with the library to see it.
My first idea was to do this:

import { createUploader } from "@rpldy/uploader";
import createChunkedSender from "@rpldy/chunked-sender";
import NativeUploady from "@rpldy/native-uploady";

// Create the chunked uploader
const uploader = createUploader({
  destination: { url: "http://my-upload-url.com" },
  enhancer: createChunkedSender()
});

function MyApp() {
  return (
    <NativeUploady uploader={uploader}>
      {/* Your UploadButton or other components go here */}
    </NativeUploady>
  );
}

But this isn't working for me. It appears there isn't a way to upload a blob with the native library. I think in general the problem I don't know how to get everything to play nicely together and there is many examples for native.

[mbrimmer83]

I was finally able to get the upload to work, although I still have a few issues. The file upload would error on the server until I added the sendWithFormData: false options. However the upload is a little slow now and it's a small file, like under 50 mb. Is there a way to speed it up? I also get some typescript errors when passing my Blob to the upload function.

  useRequestPreSend(async () => {
    const response = await utils.media.signedMuxUpload.fetch()

    return {
      options: {
        method: 'PUT',
        sendWithFormData: false,
        destination: {
          ...pick(['url'], response)
        }
      }
    }
  })

[mwaleed-39]

I faced some issue in react native. when we pressed upload image, the error message shows:
CODE:

import React, { useState } from 'react'
import { Alert, Button, View,StyleSheet } from 'react-native'
import * as ImagePicker from 'react-native-image-picker'
import {launchImageLibrary} from 'react-native-image-picker'

const options ={
title: 'Select Image',
type: 'library',
options: {
maxHeight:200,
maxWidth:200,
selectionLimit: 1,
mediaType: 'photo',
includeBase64: false,
}
}

const Request = () => {
const opengallery = async()=>{
const image = await ImagePicker.launchImageLibrary(options);
console.log(image)
}

return (

)
}
export default Request;

const styles = StyleSheet.create({
container:{
flex:1,
alignItems:'center',
justifyContent:'center'
}
})

when we pressed upload button, the error message shows:

Possible Unhandled Promise Rejection (id: 1):
TypeError: Cannot read property 'launchImageLibrary' of null
TypeError: Cannot read property 'launchImageLibrary' of null

I create API:
app.post('/finerequest', (req, res, next) => {

const file = req.files.image;
cloudinary.uploader.upload(file.tempFilePath, (err, result) => {
console.log(result)
const requestId = req.body.request_id
const fine = new Fine({
_id: new mongoose.Types.ObjectId,
request_id: requestId,
image: result.url
})
fine.save()
.then(result => {
res.status(200).json({
message: "Fine and Vehicle Repair Request added",
response: result
})
})
.catch(err => {
res.status(500).json({
message: "Fine and Vehicle request not added",
error: err
})
})
})
})
How to call this API, when we upload image in front end side, the image will be stored in mongodb

[mbrimmer83]

    const result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Videos,
        allowsEditing: false,
        quality: 1
    })

[mbrimmer83]

Oh wait, you are using react-native-image-picker and I am using expo-image-picker

[mwaleed-39]

I faced some issue in react native. when we pressed upload image, the error message shows: How to call this API, when we upload image in front end side, the image will be stored in mongodb I create API: app.post('/finerequest', (req, res, next) => { const file = req.files.image; cloudinary.uploader.upload(file.tempFilePath, (err, result) => { console.log(result) const requestId = req.body.request_id const fine = new Fine({ _id: new mongoose.Types.ObjectId, request_id: requestId, image: result.url }) fine.save() .then(result => { res.status(200).json({ message: "Fine and Vehicle Repair Request added", response: result }) }) .catch(err => { res.status(500).json({ message: "Fine and Vehicle request not added", error: err }) }) }) }) CODE: import React, { useState } from 'react' import { Alert, Button, View,StyleSheet } from 'react-native' import * as ImagePicker from 'react-native-image-picker' import {launchImageLibrary} from 'react-native-image-picker' const options ={ title: 'Select Image', type: 'library', options: { maxHeight:200, maxWidth:200, selectionLimit: 1, mediaType: 'photo', includeBase64: false, } } const Request = () => { const opengallery = async()=>{ const image = await ImagePicker.launchImageLibrary(options); console.log(image) } return ( ) } export default Request; const styles = StyleSheet.create({ container:{ flex:1, alignItems:'center', justifyContent:'center' } }) when we pressed upload button, the error message shows: Possible Unhandled Promise Rejection (id: 1): TypeError: Cannot read property 'launchImageLibrary' of null TypeError: Cannot read property 'launchImageLibrary' of null Again and again same error show, we Image picker library, I think it has been deprecated

…

On Mon, Jul 17, 2023 at 12:19 AM Matthew Brimmer ***@***.***> wrote: Oh wait, you are using react-native-image-picker and I am using expo-image-picker — Reply to this email directly, view it on GitHub <#511 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A6W6U3EKJH6CNRCMI5QXN7TXQQ5FVANCNFSM6AAAAAAWYM3UDM> . You are receiving this because you commented.Message ID: ***@***.***>