How can I send a word doc/pdf file using react-native-gifted-chat?

[AJ-Benoit]

Issue Description

I would like to be able to send word doc/pdf files using react native gifted chat. I have had a look at a few links which suggests using the renderActions() function in react-native-gifted-chat but it does not specify how I can implement this method. Do you know how I can implement this function? Would I need to import a package like document picker or file picker in the function? If so, how can I use this? I'm fairly new to react native. Can someone please help here?

Steps to Reproduce / Code Snippets

This is what I have so far in the renderActions() function:

    renderActions(props) {
      return(
             <Actions
                  {...props}
                  options={{
                      ['Document']: async (props) => {
                       try {
                         const result = await DocumentPicker.pick({
                           type: [DocumentPicker.types.doc || DocumentPicker.types.docx || DocumentPicker.types.pdf],
                         });                   
                         console.log("resulting file: "+result);
                         console.log("string result? "+JSON.stringify(result));
                       } catch(e){
                           if(DocumentPicker.isCancel(e)){
                             console.log("User cancelled!")
                           } else {
                             throw e;
                          }
                        }

                       },
                      Cancel: (props) => {console.log("Cancel")}
                  }}
                  icon={() => (
                     <Ionicons
                         name={'add'}
                         size={28}
                         color={'#0077ff'}
                         style={{left:0, bottom:0}}                           
                    />
                 )}
                 onSend={args => console.log(args)}
              />
           )
         }

I am not too sure how to append this doc to the gifted-chat object and then be able to send the doc file. Can someone please assist in how I can attach a doc file and send? After selecting the file, how do I add this to the chat box and be able to send the file? Can someone please help here? I would really appreciate it.

Thanks.

Expected Results

I would like to send word doc/pdf files via react-native-gifted-chat.

Additional Information

• Nodejs version: "13.9.0"
• React version: "17.0.1"
• React Native version: "0.64.2"
• react-native-gifted-chat version: "0.16.3"
• Platform(s) (iOS, Android, or both?): both
• TypeScript version: "3.10.1"

[lucswart]

You can. You're able to add parameters to the message object. For example you have this message object:

 const newMessage = {
    _id: data.send_at,
    text: data.messagetext,
    createdAt: data.send_at,
    (...),
    file_type: data?.file_type,
    file_id: data?.file_id,
}

Then render a custom view:

const renderCustomView = (props) => {
  if (props?.currentMessage?.file_type) {
    (...)
  }
  else {
    (...)
  }
}

[AJ-Benoit]

Hi @lucswart thank you for your quick response. Would I need to replace my renderActions() function with the renderCustomView you provided above? Is that where I would need to add the Document Picker and how do I pass this object to the gifted chat object? Can you provide more detail on the renderCustomView function please?

[lucswart]

I actually just read your question again, I explained how to render it for example. Sending is actually pretty similar.

1. No, you need to change the renderCustomView attribute from GiftedChat. Like this:

   <GiftedChat
   renderCustomView={renderCustomView}
   (... all your other attributes)
   />

2. You need a Document Picker. I use react-native-document-picker for that and rn-fetch-blob to download the files from the chat.

3. The renderCustomView function looks first if the message has a file_type, if it does then it renders a custom view. I added for example an TouchableOpacity so we have a button to download the file. If it doesn't have file_type, then we just return null. You can ofcourse use different parameters to your liking.

For sending you can add an onPress to the action with this attribute: onPressActionButton. You can then open a modal or something like that and then be sure to add the custom parameter to the newMessage object.

[AJ-Benoit]

@lucswart I sent you an email. I'll give this a try.

[AJ-Benoit]

@lucswart I'm still quite confused with the renderCustomView function. Do you mind walking me on creating this function? For step 2 where do I place the document picker and download the file? Would I keep this in the renderActions? I'm still fairly new to react-native. Thanks

[AJ-Benoit]

Can someone please help on implementing the renderCustomView function? The renderActions function I created above allows me to pick a document but once I've picked it I'm not sure what I do with it. I'm guessing I would need to download the document I pick. But where do I perform this download? In the renderActions function? How does the renderCustomView function know I have selected a file? When is this function called?

[AJ-Benoit]

Also, where do I create the message object? I am using Firebase Realtime Database to store for the messages.

[lucswart]

@AJ-Benoit , let's first start with the question; how do you store the files?

[AJ-Benoit]

So I store the files in firebase storage. I download the file and store them in firebase storage:

    renderActions(props: Readonly<ActionsProps>) {
         return(
             <Actions
                 {...props}
                   options={{
                   ['Document']: async (props) => {
               try {

                 const result = await DocumentPicker.pick({
                    type: [DocumentPicker.types.pdf],
                  });

                console.log("resulting file: "+result);
                console.log("string result? "+JSON.stringify(result));
                console.log("Filename at best: "+result[0].name)

                let imageRef = storage().ref(`docFiles/${result[0].name}`);
                let filename = result[0].uri;
                const response = await fetch(filename);
                const blob = await response.blob();
                await imageRef.put(blob);
                 var dwnload = await imageRef.getDownloadURL();

                console.log("Download file: "+dwnload);

                global.pdfFile = dwnload;
                console.log("pdf file: "+JSON.stringify(global.pdfFile));

            } catch(e){
                if(DocumentPicker.isCancel(e)){
                    console.log("User cancelled!")
                } else {
                    throw e;
                }
            }
        },
        Cancel: (props) => {console.log("Cancel")}
           }}
           icon={() => (
              <Ionicons
                  name={'add'}
                  size={28}
                  color={'#0077ff'}
                  style={{left:0, bottom:0}}

              />
            )}
           onSend={args => console.log(args)}
           />
    )
}

[lucswart]

Can you invite me to the repo so I can add comments?

[Oussamaab1998]

do you steel have problems with this functionality ?

[AJ-Benoit]

Hi,

So I've managed to send a word doc/pdf file but I am not able to preview the file like the whatsapp functionality before sending. So when selecting the doc/pdf the screen just goes back to the chat screen and then you need to type in something then press send in order to send the file. Is the whatsapp functionality achievable?

Thanks

---

From: Oussamaab1998 @.> Sent: 02 December 2021 15:28 To: FaridSafi/react-native-gifted-chat @.> Cc: AJ_Benoit @.>; Mention @.> Subject: Re: [FaridSafi/react-native-gifted-chat] How can I send a word doc/pdf file using react-native-gifted-chat? (#2111)

do you steel have problems with this functionality ?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://emea01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FFaridSafi%2Freact-native-gifted-chat%2Fissues%2F2111%23issuecomment-984733165&data=04%7C01%7C%7C834a5c9bc9b74152241208d9b5a8555d%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637740556854277439%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=bx%2FleIQBHy%2FhwxlotDug%2B6h6BFxkO1ZZ9TmRBu447s8%3D&reserved=0, or unsubscribehttps://emea01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAS6XPVKNM6UBJYY46UYWKZ3UO6GAHANCNFSM5EKVS3AA&data=04%7C01%7C%7C834a5c9bc9b74152241208d9b5a8555d%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637740556854287434%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=B8D2ZsLNytb9N8n7y8uyEIOo%2FwAqo97WuLOLJPK%2BDZ4%3D&reserved=0. Triage notifications on the go with GitHub Mobile for iOShttps://emea01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fapps.apple.com%2Fapp%2Fapple-store%2Fid1477376905%3Fct%3Dnotification-email%26mt%3D8%26pt%3D524675&data=04%7C01%7C%7C834a5c9bc9b74152241208d9b5a8555d%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637740556854297430%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=QNWQ6RtwIxFFRR17ziCPT5MvPmUO4ABYsvMKKJJIci8%3D&reserved=0 or Androidhttps://emea01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dcom.github.android%26referrer%3Dutm_campaign%253Dnotification-email%2526utm_medium%253Demail%2526utm_source%253Dgithub&data=04%7C01%7C%7C834a5c9bc9b74152241208d9b5a8555d%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637740556854297430%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=20Yw8bTrEQlCq4mdylA17b5RJucwlv2pCrbgqxnKEQA%3D&reserved=0.

[tiktocktik]

Can you share how you managed to show the file in the chat window?

[AJ-Benoit]

Attached are photos. I would like the window that shows a preview of the file to have the buttons ‘cancel’ to the left and ‘send’ to the right similar to WhatsApp.

[cid:4E3F5BCF-4186-4BD2-A7D3-3A6511D522E2-L0-001][cid:F399F858-C2AB-4C5E-8552-DC42B8C1F3EE-L0-001][cid:ACA52181-ADE7-4CA2-BB71-46E8C31AAFB2-L0-001][cid:DE7015D9-FA7F-45CA-88EE-E6F0B150A2E4-L0-001][cid:F3E53FB8-4FEF-4026-B46B-F93FE0907318-L0-001]

Sent from my iPhone

On 6 Dec 2021, at 12:11, Tarang Negandhi @.***> wrote:



Can you share how you managed to show the file in the chat window?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://emea01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FFaridSafi%2Freact-native-gifted-chat%2Fissues%2F2111%23issuecomment-986533644&data=04%7C01%7C%7C254f26eb4f034ccae8c008d9b8900c81%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637743751098448407%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=O%2FUFl%2FuL8qtyBHkI7B49VazGh91tpHGVUOe7VjT6E7Q%3D&reserved=0, or unsubscribehttps://emea01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAS6XPVIMKMTLCLWQSI5SYKLUPRV4FANCNFSM5EKVS3AA&data=04%7C01%7C%7C254f26eb4f034ccae8c008d9b8900c81%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637743751098448407%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=VbOjIPqsQH2FR6kRK2%2FOWoPoSKy8dG2QMmss5nkw7Qc%3D&reserved=0. Triage notifications on the go with GitHub Mobile for iOShttps://emea01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fapps.apple.com%2Fapp%2Fapple-store%2Fid1477376905%3Fct%3Dnotification-email%26mt%3D8%26pt%3D524675&data=04%7C01%7C%7C254f26eb4f034ccae8c008d9b8900c81%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637743751098458399%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=vwYsA7dQ%2FNXNDFupmbmJUPVwXo1iiqP9tTFRw27Ytlc%3D&reserved=0 or Androidhttps://emea01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dcom.github.android%26referrer%3Dutm_campaign%253Dnotification-email%2526utm_medium%253Demail%2526utm_source%253Dgithub&data=04%7C01%7C%7C254f26eb4f034ccae8c008d9b8900c81%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637743751098458399%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=4UvR5FEVNydZQiM482Rnf1%2F5C48Z1DIz2P%2BLB2k0r9s%3D&reserved=0.

[stale[bot]]

Sorry, but this issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. BTW Thank you for your contributions 😀 !!!

[Ahlam000]

have anyone implemented how to render the pdf file and download from chat please send it here??