File upload function

[Presleyderrick]

upload does not seem to work for me, how can I import upload because when I don't I get " Cannot find name 'upload'. "

[tamaracloudinary]

Hi there, make sure your code is set up correctly, you can use the upload example here: https://github.com/cloudinary/cloudinary-react-native#usage
If it's set correctly and there is an issue, can you please share your code here?
Thanks
-Tamara

[Presleyderrick]

Hi, this is my code import { PermissionsAndroid, Text, View } from 'react-native' import React, { Component, useState } from 'react' import {Cloudinary} from ***@***.***/url-gen'; import { launchCamera } from 'react-native-image-picker'; const cld = new Cloudinary({ cloud: { cloudName: '<your_cloud_name>' }, url: { secure: true } }); const uploademp =()=> { const [photoPath, setPhotoPath] = useState<string | undefined>( undefined); const cloudinaryUpload = async () => { const options: UploadApiOptions = { upload_preset: 'sample_preset', unsigned: true, } await upload(cld, {file: photoPath , options: options, callback: (error: any, response: any) => { //.. handle response }}) }; const openCamera = async () => { const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.CAMERA, ); if (granted === PermissionsAndroid.RESULTS.GRANTED) { const result = await launchCamera(options); // const currentDate = new Date(); // const formattedDate = format(currentDate, 'yyyyMMddHHmmss'); // const newPhotoPath = `e_permit${formattedDate}.jpg`; try { if (result && result.assets && result.assets[0]) { // const newPath = `${RNFS.DocumentDirectoryPath}/${newPhotoPath}`; // await RNFS.moveFile(result.assets[0].uri, newPath); setPhotoPath(result.assets[0].uri); // console.log("response is:", uri); const base64Image = result.assets[0].base64; // console.log('Error renaming photo:', base64Image); const source = { base64Image }; cloudinaryUpload(); } else { console.log('result.assets is undefined or empty.'); } } catch (error) { console.log('Error:', error); } } }; { return ( <View> <Text>uploademp</Text> </View> ) } } export default uploademp and this is what I am receiving from my error Cannot find name 'upload'.ts(2304) any Kindly advise on where the error seems to emanate from since I cannot be able to find any import statement for the upload Regards, Presley Derrick. [image: Mailtrack] <https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11&> Sender notified by Mailtrack <https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11&> 08/15/23, 12:47:32 PM

…

On Tue, 15 Aug 2023 at 12:09, tamaracloudinary ***@***.***> wrote: Hi there, make sure your code is set up correctly, you can use the upload example here: https://github.com/cloudinary/cloudinary-react-native#usage If it's set correctly and there is an issue, can you please share your code here? Thanks -Tamara — Reply to this email directly, view it on GitHub <#10 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASYXCJIYCLO33RRUKTIZHJTXVM4ERANCNFSM6AAAAAA3PKNULA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[tamaracloudinary]

In your code, you have to update the 'upload_preset' with your own, the cloud name with your own and import Cloudinary this way: import {Cloudinary} from '@cloudinary/url-gen';. Also, implement what happens inside the upload function.
Please try these and let me know how it goes.
Thanks,

• Tamara

[Presleyderrick]

Hello, This is what I have import { PermissionsAndroid, Text, View } from 'react-native' import React, { Component, useState } from 'react' import {Cloudinary} from ***@***.***/url-gen'; import { launchCamera } from 'react-native-image-picker'; const cld = new Cloudinary({ cloud: { cloudName: 'dtauszhrv' }, url: { secure: true } }); interface UploadApiOptions { upload_preset: string; unsigned: boolean; } const uploademp =()=> { const [photoPath, setPhotoPath] = useState<string | undefined>( undefined); const cloudinaryUpload = async () => { const cloudoptions: UploadApiOptions = { upload_preset: 'e-permit', unsigned: true, } await upload(cld, {file: photoPath , options: options, callback: (error: any, response: any) => { //.. handle response }}) }; const openCamera = async () => { const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.CAMERA, ); if (granted === PermissionsAndroid.RESULTS.GRANTED) { const result = await launchCamera(options); // const currentDate = new Date(); // const formattedDate = format(currentDate, 'yyyyMMddHHmmss'); // const newPhotoPath = `e_permit${formattedDate}.jpg`; try { if (result && result.assets && result.assets[0]) { // const newPath = `${RNFS.DocumentDirectoryPath}/${newPhotoPath}`; // await RNFS.moveFile(result.assets[0].uri, newPath); setPhotoPath(result.assets[0].uri); // console.log("response is:", uri); const base64Image = result.assets[0].base64; // console.log('Error renaming photo:', base64Image); const source = { base64Image }; cloudinaryUpload(); } else { console.log('result.assets is undefined or empty.'); } } catch (error) { console.log('Error:', error); } } }; { return ( <View> <Text>uploademp</Text> </View> ) } } export default uploademp I am still getting the same error, Kindly advice on a solution Regards, Derrick Presley [image: Mailtrack] <https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11&> Sender notified by Mailtrack <https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11&> 08/21/23, 02:28:12 PM

…

On Mon, 21 Aug 2023 at 13:03, tamaracloudinary ***@***.***> wrote: In your code, you have to update the 'upload_preset' with your own, the cloud name with your own and import Cloudinary this way: import {Cloudinary} from ***@***.***/url-gen';. Also, implement what happens inside the upload function. Please try these and let me know how it goes. Thanks, - Tamara — Reply to this email directly, view it on GitHub <#10 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASYXCJI2T3EJA3NEZUVLQEDXWMW6HANCNFSM6AAAAAA3PKNULA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[tamaracloudinary]

Hello,

Please proceed with the changes I suggested. Once you've done that, please let me know if the issue persists.

Best regards,
Tamara

[Presleyderrick]

Hi, I made the suggested changes please send me the code example perhaps there's something I am missing from mine. Just edit mine as it is and re-send it to me then I will let you know if it works. Thanks. Regards.

…

On Tue, Aug 22, 2023, 12:05 PM tamaracloudinary ***@***.***> wrote: Hello, Please proceed with the changes I suggested. Once you've done that, please let me know if the issue persists. Best regards, Tamara — Reply to this email directly, view it on GitHub <#10 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASYXCJNUR6AVHV5L77YEYCDXWRY6BANCNFSM6AAAAAA3PKNULA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[tamaracloudinary]

This is the relevant part you should change in your code:

import {Cloudinary} from '@cloudinary/url-gen';
import { launchCamera } from 'react-native-image-picker';

  const cld = new Cloudinary({
    cloud: {
      cloudName: 'dtauszhrv'
    },
    url: {
      secure: true
    }
  });


    const cloudinaryUpload = async () => {
            const options: UploadApiOptions = {
              upload_preset: 'e-permit',
              unsigned: true,

            }

    await upload(cld, {file: photoPath , options: options,callback: (error: any, response: any) => {
                    //.. handle response
                }})
        };

[Presleyderrick]

What should I change it to. The issue is with the upload line

…

On Tue, Aug 22, 2023, 2:59 PM tamaracloudinary ***@***.***> wrote: This is the relevant part you should change in your code: `import {Cloudinary} from ***@***.***/url-gen'; import { launchCamera } from 'react-native-image-picker'; const cld = new Cloudinary({ cloud: { cloudName: 'dtauszhrv' }, url: { secure: true } }); const cloudinaryUpload = async () => { const options: UploadApiOptions = { upload_preset: 'e-permit', unsigned: true, } await upload(cld, {file: photoPath , options: options,callback: (error: any, response: any) => { //.. handle response }}) }; ` — Reply to this email directly, view it on GitHub <#10 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASYXCJJXZFTOABA2R4OXQH3XWSNJZANCNFSM6AAAAAA3PKNULA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[tamaracloudinary]

You still didn't change your import to: import {Cloudinary} from '@cloudinary/url-gen';.

[Presleyderrick]

Hi, This is my full code, If you can take a look at the other camera option it has imports for its options settings and launch settings, please recheck the options for the upload since I am still having the same issue import { PermissionsAndroid, Text, TouchableOpacity, View } from 'react-native' import React, { useState } from 'react' import {Cloudinary} from ***@***.***/url-gen'; import { ImageLibraryOptions, launchCamera } from 'react-native-image-picker'; const cld = new Cloudinary({ cloud: { cloudName: 'dtauszhrv' }, url: { secure: true } }); const uploademp =()=> { const [photoPath, setPhotoPath] = useState<string | undefined>( undefined); const cloudinaryUpload = async () => { const options: UploadApiOptions = { upload_preset: 'e-permit', unsigned: true, } await upload(cld, {file: photoPath , options: options,callback: (error : any, response: any) => { if (error) { console.log("Error:", error); } else { console.log("Response:", response); } }}) }; const imageoptions: ImageLibraryOptions = { mediaType: 'photo', maxWidth: 500, maxHeight: 500, includeBase64: true }; const openCamera = async () => { const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.CAMERA, ); if (granted === PermissionsAndroid.RESULTS.GRANTED) { const result = await launchCamera(imageoptions); // const currentDate = new Date(); // const formattedDate = format(currentDate, 'yyyyMMddHHmmss'); // const newPhotoPath = `e_permit${formattedDate}.jpg`; try { if (result && result.assets && result.assets[0]) { // const newPath = `${RNFS.DocumentDirectoryPath}/${newPhotoPath}`; // await RNFS.moveFile(result.assets[0].uri, newPath); setPhotoPath(result.assets[0].uri); // console.log("response is:", uri); const base64Image = result.assets[0].base64; // console.log('Error renaming photo:', base64Image); const source = { base64Image }; cloudinaryUpload(); } else { console.log('result.assets is undefined or empty.'); } } catch (error) { console.log('Error:', error); } } }; { return ( <View> <Text>uploademp</Text> <TouchableOpacity onPress={openCamera}> <Text>Say cheese</Text> </TouchableOpacity> </View> ) } } export default uploademp Attatched are images showing what error I am receiving. I am using a tsx file [image: Mailtrack] <https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11&> Sender notified by Mailtrack <https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11&> 08/23/23, 08:07:45 AM

…

On Tue, 22 Aug 2023 at 15:48, tamaracloudinary ***@***.***> wrote: You still didn't change your import to: import {Cloudinary} from ***@***.***/url-gen';. — Reply to this email directly, view it on GitHub <#10 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASYXCJKSCKAKLJCH6MZEMZDXWSTDXANCNFSM6AAAAAA3PKNULA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[tamaracloudinary]

Hi, the camera is not related to Cloudinary so we can't provide support for it, but your imports still don't include the right import for Cloudinary, please change them from:

import {Cloudinary} from ***@***.***/url-gen';

to:

import {Cloudinary} from '@cloudinary/url-gen';

[Presleyderrick]

The camera is just a reference, kindly check your mail for snapshots of the problems I'm facing and give a definitive solution, the import statement is correct as it is in your mail I have no issue with that. The problem is not with the cloudinary tag that works fine, my problem is with the UploadApiOptions and the upload from the await upload. How can I import them??
the images are the errors I receive the last image is how I've done my imports

[Presleyderrick]

I am using a tsx file not a ts. I tried it with the links provided but still same error

[ericyliu]

im having the same issue and confused as to where you are getting the upload method from the line await upload(cld, {file: photoPath , options: options,callback: (error: any, response: any) => {

The docs just don't make sense to me, and I am unable to figure out where upload is being imported from

edit after digging through this codebase, it seems like the upload method lives inside api/upload/src/uploader.tsx, but this package is not exposing it

edit2 after copying over the relevant files and trying to call the upload method, i'm now getting [TypeError: Network request failed] from this code:

const response = await new Promise<UploadApiResponse>((resolve, reject) =>
    upload(cloudinary, {
      file: base64String,
      options: {
        upload_preset: "xxxxxx",
        unsigned: true,
      },
      callback: (error, result) => {
        if (error) {
          console.log(error);
          return reject(error);
        }
        return resolve(result);
      },
    })
  );
  return response.secure_url;
};

edit3 @Presleyderrick gave up on this package for now and ended up using xhr to upload

const uploadFile = async (
  localAsset: ImagePickerAsset,
  journeyId: string,
  fileName: string
): Promise<string> => {
  if (localAsset.type === "video" && localAsset.duration > 60 * 1000) {
    alert("Video duration must be less than 1 minute.");
    throw new Error("Video duration too long.");
  }
  const apiUrl = `https://api.cloudinary.com/v1_1/{CLOUDINARY_ID}/${localAsset.type}/upload`;
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("POST", apiUrl);
    xhr.onload = () => {
      const res = JSON.parse(xhr.response);
      if (res.error) return reject(res.error);
      if (localAsset.type === "video") {
        const path = res.secure_url.split(
          "https://res.cloudinary.com/{CLOUDINARY_ID}/video/upload"
        )[1];
        return resolve(
          `https://res.cloudinary.com/{CLOUDINARY_ID}/video/upload/q_auto:good${path}`
        );
      }
      resolve(res.secure_url);
    };
    xhr.onerror = (error) => {
      reject(error);
    };
    xhr.ontimeout = (error) => {
      reject(`timeout: ${error}`);
    };
    const formData = new FormData();

    formData.append("file", {
      uri: localAsset.uri,
      type: localAsset.type === "video" ? "video/mp4" : "image/jpg",
      name: fileName,
    } as any);
    formData.append("upload_preset", "{UPLOAD_PRESET}");
    formData.append("folder", journeyId);
    formData.append("public_id", fileName);
    xhr.send(formData);
  });
};

credit to https://gist.github.com/nandorojo/7063a8d15bd3bb235949882f14674985