ConnectyCube / connectycube-reactnative-samples

Chat and Video Chat code samples for React Native, ConnectyCube
https://connectycube.com
Apache License 2.0
125 stars 111 forks source link

send attachment functionality in Chat not working #105

Closed snehc closed 2 years ago

snehc commented 4 years ago

Hi Team,

I am using this ConnectyCube library for chat. But when I am trying to send attachment I am getting issue and not able to understand what is the exact issue in this. Can you please help me out in getting it resolved? Here is the issue I am facing- "TypeError: undefined is not an object (evaluating 'response.url')"

[Sat Aug 08 2020 13:34:32.985] LOG {"prepareAttachment": {"height": 400, "name": "ea15c4bd-b7fd-4727-a8df-3534b92a4b06.jpg", "size": 71620, "type": "image/jpeg", "uid": "file:///storage/emulated/0/Android/data/com.instantpeople/files/Pictures/ea15c4bd-b7fd-4727-a8df-3534b92a4b06.jpg", "url": "file:///storage/emulated/0/Android/data/com.instantpeople/files/Pictures/ea15c4bd-b7fd-4727-a8df-3534b92a4b06.jpg", "width": 300}} [Sat Aug 08 2020 13:34:32.986] LOG {"file": {"caption": "", "duration": null, "height": 400, "name": "ea15c4bd-b7fd-4727-a8df-3534b92a4b06.jpg", "path": "file:///storage/emulated/0/Android/data/com.instantpeople/files/Pictures/ea15c4bd-b7fd-4727-a8df-3534b92a4b06.jpg", "size": 71620, "type": "image/jpeg", "uri": "file://file:///storage/emulated/0/Android/data/com.instantpeople/files/Pictures/ea15c4bd-b7fd-4727-a8df-3534b92a4b06.jpg", "width": 300}} [Sat Aug 08 2020 13:34:32.987] LOG [Request][5] POST https://api.connectycube.com/blobs.json {"data": {"blob": {"content_type": "image/jpeg", "name": "ea15c4bd-b7fd-4727-a8df-3534b92a4b06.jpg"}}, "type": "POST", "url": "https://api.connectycube.com/blobs.json"} [Sat Aug 08 2020 13:34:33.961] LOG [Response][5] {"blob": {"account_id": 3316, "app_id": 2595, "blob_object_access": {"blob_id": 343785, "expires": "2020-08-08T09:04:33Z", "id": 343785, "object_access_type": "Write", "params": "https://s3.amazonaws.com/cb-shared-s3?Content-Type=image%2Fjpeg&Expires=Sat%2C%2008%20Aug%202020%2009%3A04%3A33%20GMT&acl=authenticated-read&key=0e2f7092e9a64b5ebd7a805c48367ed600&policy=eyJleHBpcmF0aW9uIjoiMjAyMC0wOC0wOFQwOTowNDozM1oiLCJjb25kaXRpb25zIjpbeyJidWNrZXQiOiJjYi1zaGFyZWQtczMifSx7ImFjbCI6ImF1dGhlbnRpY2F0ZWQtcmVhZCJ9LHsiQ29udGVudC1UeXBlIjoiaW1hZ2UvanBlZyJ9LHsic3VjY2Vzc19hY3Rpb25fc3RhdHVzIjoiMjAxIn0seyJFeHBpcmVzIjoiU2F0LCAwOCBBdWcgMjAyMCAwOTowNDozMyBHTVQifSx7ImtleSI6IjBlMmY3MDkyZTlhNjRiNWViZDdhODA1YzQ4MzY3ZWQ2MDAifSx7IngtYW16LWNyZWRlbnRpYWwiOiJBS0lBSUczV1BUN1JBTFlPWlc2US8yMDIwMDgwOC91cy1lYXN0LTEvczMvYXdzNF9yZXF1ZXN0In0seyJ4LWFtei1hbGdvcml0aG0iOiJBV1M0LUhNQUMtU0hBMjU2In0seyJ4LWFtei1kYXRlIjoiMjAyMDA4MDhUMDgwNDMzWiJ9XX0%3D&success_action_status=201&x-amz-algorithm=AWS4-HMAC-SHA256&x-amz-credential=AKIAIG3WPT7RALYOZW6Q%2F20200808%2Fus-east-1%2Fs3%2Faws4_request&x-amz-date=20200808T080433Z&x-amz-signature=f568225bf93ec1ccd68bb5618ccd68be8fce9872c05e3dab68c6e8ae2428b298"}, "blob_status": null, "content_type": "image/jpeg", "created_at": "2020-08-08T08:04:33Z", "id": 343785, "name": "ea15c4bd-b7fd-4727-a8df-3534b92a4b06.jpg", "public": false, "set_completed_at": null, "size": null, "uid": "0e2f7092e9a64b5ebd7a805c48367ed600", "updated_at": "2020-08-08T08:04:33Z"}} [Sat Aug 08 2020 13:34:33.975] LOG [Request][6] POST https://s3.amazonaws.com/cb-shared-s3 {"contentType": false, "data": {"Content-Type": "image/jpeg", "Expires": "Sat, 08 Aug 2020 09:04:33 GMT", "acl": "authenticated-read", "file": {"caption": "", "duration": null, "height": 400, "name": "ea15c4bd-b7fd-4727-a8df-3534b92a4b06.jpg", "path": "file:///storage/emulated/0/Android/data/com.instantpeople/files/Pictures/ea15c4bd-b7fd-4727-a8df-3534b92a4b06.jpg", "size": 71620, "type": "image/jpeg", "uri": "file://file:///storage/emulated/0/Android/data/com.instantpeople/files/Pictures/ea15c4bd-b7fd-4727-a8df-3534b92a4b06.jpg", "width": 300}, "key": "0e2f7092e9a64b5ebd7a805c48367ed600", "policy": "eyJleHBpcmF0aW9uIjoiMjAyMC0wOC0wOFQwOTowNDozM1oiLCJjb25kaXRpb25zIjpbeyJidWNrZXQiOiJjYi1zaGFyZWQtczMifSx7ImFjbCI6ImF1dGhlbnRpY2F0ZWQtcmVhZCJ9LHsiQ29udGVudC1UeXBlIjoiaW1hZ2UvanBlZyJ9LHsic3VjY2Vzc19hY3Rpb25fc3RhdHVzIjoiMjAxIn0seyJFeHBpcmVzIjoiU2F0LCAwOCBBdWcgMjAyMCAwOTowNDozMyBHTVQifSx7ImtleSI6IjBlMmY3MDkyZTlhNjRiNWViZDdhODA1YzQ4MzY3ZWQ2MDAifSx7IngtYW16LWNyZWRlbnRpYWwiOiJBS0lBSUczV1BUN1JBTFlPWlc2US8yMDIwMDgwOC91cy1lYXN0LTEvczMvYXdzNF9yZXF1ZXN0In0seyJ4LWFtei1hbGdvcml0aG0iOiJBV1M0LUhNQUMtU0hBMjU2In0seyJ4LWFtei1kYXRlIjoiMjAyMDA4MDhUMDgwNDMzWiJ9XX0=", "success_action_status": "201", "x-amz-algorithm": "AWS4-HMAC-SHA256", "x-amz-credential": "AKIAIG3WPT7RALYOZW6Q/20200808/us-east-1/s3/aws4_request", "x-amz-date": "20200808T080433Z", "x-amz-signature": "f568225bf93ec1ccd68bb5618ccd68be8fce9872c05e3dab68c6e8ae2428b298"}, "dataType": "text", "type": "POST", "url": "https://s3.amazonaws.com/cb-shared-s3"} [Sat Aug 08 2020 13:34:35.615] LOG [Response][6] [Sat Aug 08 2020 13:34:35.735] WARN Possible Unhandled Promise Rejection (id: 0): TypeError: undefined is not an object (evaluating 'response.url') processAjaxError@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:154640:21 http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:154618:36 tryCallOne@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:28865:16 http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:28966:27 _callTimer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:32405:17 _callImmediatesPass@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:32441:19 callImmediates@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:32659:33 callImmediates@[native code] callImmediates@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2719:35 http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2505:34 guard@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2702:15 flushedQueue@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2504:21 flushedQueue@[native code] callFunctionReturnFlushedQueue@[native code]

I think this is some issue coming from backend side. Please let me know if you need more information to understand this problem. Although I am following all the steps mentioned in the help document. But I thing the issue is coming when I am calling “ConnectyCube.storage.createAndUpload({ file })” this function.

DaveLomber commented 4 years ago

Hi @snehc

please share the code snippet how you get a file object

snehc commented 4 years ago

I am calling this send Attachment function and then all the functions I am defining here also line wise - -

  1. sendAttachment = async () => { const img = await this.onPickImage()

    var messageD = this.state.history; const opponentId = this.state.cubeUser; const date = Math.floor(Date.now() / 1000) let msg = { type: messageD.type === 3 ? 'chat' : 'groupchat', body: this.state.messageText, extension: { save_to_history: 1, dialog_id: messageD._id, sender_id: opponentId, date_sent: date, }, markable: 1 }

    msg.id = this.messageUniqueId

    this.sendMessageAsAttachment(this.state.cubeUser, msg, img)

    }

  2. onPickImage = () => { return ImagePicker.openPicker({ width: 300, height: 400, cropping: true }).then(image => { return image }) }

  3. async sendMessageAsAttachment(recipient_id, msg, attachments) {

    //create fake data for render img const attachment = preparationAttachment(attachments) console.log({prepareAttachment: attachment}); msg.extension.attachments = [attachment] msg.body = 'Image attachment' const message = new FakeMessage(msg)

    // create real data for attachment const response = await this.uploadPhoto(attachments) console.log("createUploadPhoto: ", response); const updateAttach = preparationAttachment(attachments, response.uid) msg.extension.attachments = [updateAttach] const abc = await ConnectyCube.chat.send(recipient_id, msg) console.log("ppp: ", abc); this.getMessages(); return }

  4. async uploadPhoto(params) { const file = preparationUploadImg(params) return ConnectyCube.storage.createAndUpload({ file }) }

  5. function preparationUploadImg(file) { const str = file.path.split('/') const name = str[str.length - 1] return { caption: '', duration: null, height: file.height, name, path: file.path, size: file.size, type: file.mime, width: file.width, uri: file://${file.path} } }

  6. function preparationAttachment(file, uid) { const str = file.path.split('/') const name = str[str.length - 1] return { height: file.height, name, uid: uid ? uid : file.path, url: file.path, size: file.size, type: file.mime, width: file.width, } }

These are the functions I am using for send attachment in chat.

Kachanov-dev commented 4 years ago

Hi @snehc. How does our chat example work for you, correct? It looks like you are trying to access response.url which is not correct, you need to access it as response.uid. Can you run this method async uploadPhoto(params) with such logs?

async uploadPhoto(params) { const file = preparationUploadImg(params) console.warn('[uploadPhoto][file]', file) const response = await ConnectyCube.storage.createAndUpload({ file }) console.warn('[uploadPhoto][response]', response) return response }

snehc commented 4 years ago

Hi Kachanov. I had tried the code provided by you but having same Issue - I got this -

  1. [uploadPhoto][file] {caption: "", duration: null, height: 400, name: "e192c80a-d5a0-4f98-a1a4-231c885003de.jpg", path: "file:///storage/emulated/0/Android/data/com.instan…Pictures/e192c80a-d5a0-4f98-a1a4-231c885003de.jpg", …} caption: "" duration: null height: 400 name: "e192c80a-d5a0-4f98-a1a4-231c885003de.jpg" path: "file:///storage/emulated/0/Android/data/com.instantpeople/files/Pictures/e192c80a-d5a0-4f98-a1a4-231c885003de.jpg" size: 71620 type: "image/jpeg" uri: "file://file:///storage/emulated/0/Android/data/com.instantpeople/files/Pictures/e192c80a-d5a0-4f98-a1a4-231c885003de.jpg" width: 300

  2. {type: "POST", url: "https://s3.amazonaws.com/cb-shared-s3", dataType: "text", contentType: false, data: {…}} contentType: false data: Content-Type: "image/jpeg" Expires: "Mon, 10 Aug 2020 14:30:30 GMT" acl: "authenticated-read" file: {caption: "", duration: null, height: 400, name: "e192c80a-d5a0-4f98-a1a4-231c885003de.jpg", path: "file:///storage/emulated/0/Android/data/com.instan…Pictures/e192c80a-d5a0-4f98-a1a4-231c885003de.jpg", …} key: "4caecd77a31b477dba3f3edc05e36cf400" policy: "eyJleHBpcmF0aW9uIjoiMjAyMC0wOC0xMFQxNDozMDozMFoiLCJjb25kaXRpb25zIjpbeyJidWNrZXQiOiJjYi1zaGFyZWQtczMifSx7ImFjbCI6ImF1dGhlbnRpY2F0ZWQtcmVhZCJ9LHsiQ29udGVudC1UeXBlIjoiaW1hZ2UvanBlZyJ9LHsic3VjY2Vzc19hY3Rpb25fc3RhdHVzIjoiMjAxIn0seyJFeHBpcmVzIjoiTW9uLCAxMCBBdWcgMjAyMCAxNDozMDozMCBHTVQifSx7ImtleSI6IjRjYWVjZDc3YTMxYjQ3N2RiYTNmM2VkYzA1ZTM2Y2Y0MDAifSx7IngtYW16LWNyZWRlbnRpYWwiOiJBS0lBSUczV1BUN1JBTFlPWlc2US8yMDIwMDgxMC91cy1lYXN0LTEvczMvYXdzNF9yZXF1ZXN0In0seyJ4LWFtei1hbGdvcml0aG0iOiJBV1M0LUhNQUMtU0hBMjU2In0seyJ4LWFtei1kYXRlIjoiMjAyMDA4MTBUMTMzMDMwWiJ9XX0=" success_action_status: "201" x-amz-algorithm: "AWS4-HMAC-SHA256" x-amz-credential: "AKIAIG3WPT7RALYOZW6Q/20200810/us-east-1/s3/aws4_request" x-amz-date: "20200810T133030Z" x-amz-signature: "faa1a98782c25ad82af784a20274ae01d608170184b1a2106aafd7b5bacaa9f9" proto: Object dataType: "text" type: "POST" url: "https://s3.amazonaws.com/cb-shared-s3"

  3. Possible Unhandled Promise Rejection (id: 0): TypeError: Cannot read property 'url' of undefined TypeError: Cannot read property 'url' of undefined at HTTPProxy.processAjaxError (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:154640:22) at http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:154618:20 at tryCallOne (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:28865:14) at http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:28966:17 at http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:32515:21 at _callTimer (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:32405:9) at _callImmediatesPass (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:32441:9) at Object.callImmediates (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:32659:14) at MessageQueue.__callImmediates (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2719:16) at http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2505:18

I am getting this issue in 3rd point. Getting response of '[uploadPhoto][file]' but not getting the value of '[uploadPhoto][response]' but getting this error.

Kachanov-dev commented 4 years ago

@snehc Can you please run an example of our chat, and tell me if it works for you? https://github.com/ConnectyCube/connectycube-reactnative-samples

snehc commented 4 years ago

Yes it is working.

BUt I am not getting what is the issue in my code I am also calling the same function.

Kachanov-dev commented 4 years ago

@snehc Do you do these initialization steps in your app? ConnectyCube.init(...appConfig.connectyCubeConfig); ConnectyCube.createSession(params);

snehc commented 4 years ago

Yes by doing that I am getting all my chat history and able to do conversation. I am getting this issue only for send/receive attachment.

DaveLomber commented 4 years ago

This is definitely something with file picking

Here is what I recommend to try:

1) compare your code and the code sample, line by line, and find the diff why it does not work 2) go to node_modules, react-native-connectycube, lib, cubeProxy.js file, find a line with response.url and log the response object and all the processAjaxError function params, this will help to get more idea what's wrong

snehc commented 4 years ago

Hi Dave,

I am implementing VideoCalling of Connectycube but when start calling getting these warnings and not able to proceed further -

  1. Possible Unhandled Promise Rejection (id: 0): TypeError: Cannot read property 'enumerateDevices' of undefined TypeError: Cannot read property 'enumerateDevices' of undefined

  2. Possible Unhandled Promise Rejection (id: 1): TypeError: Cannot read property 'getUserMedia' of undefined TypeError: Cannot read property 'getUserMedia' of undefined

Can you help me out in finding where I am doing wrong?

DaveLomber commented 4 years ago

@snehc please create a separated issue for this as it's a diff one

sami3898 commented 3 years ago

hey, @snehc did you solved the file uploading issue?

snehc commented 3 years ago

Hi,

No it still not resolved for me. I just wanted to confirm could there be any issue with the versions of react-native and connectycube library? As I am using - "react-native": "0.62.2" and "react-native-connectycube": "^3.6.0"

sami3898 commented 3 years ago

Hi' I'm using connectyCube version 2.0.0 and react native version 0.60.2 and i dont know how to resolve this issue I'm tired of this

On Wed, Sep 16, 2020, 2:38 PM snehc notifications@github.com wrote:

Hi,

No it still not resolved for me. I just wanted to confirm could there be any issue with the versions of react-native and connectycube library? As I am using - "react-native": "0.62.2" and "react-native-connectycube": "^3.6.0"

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ConnectyCube/connectycube-reactnative-samples/issues/105#issuecomment-693277454, or unsubscribe https://github.com/notifications/unsubscribe-auth/AH3X376W4RJMFUH6LY7RXPTSGB57TANCNFSM4PYRGQTQ .

ccvlad commented 2 years ago

Closed due to inactivity. Please create a new issue if needed.