Custom File Preview

[MikeMawira]

Hello, I would like the app to display a preview image for files that are not photos. How do we go about that? I appreciate your timely feedback. Thank you.

[MikeMawira]

I mean like showing the the type of file as .xls .pdf .docx. I have attached a file to illustrate my problem. Any help is greatly appreciated.

[monecchi]

The tutorial project is indeed a great starting point, but it uses custom components for the Chat Message which lacks that kind of check...

By having a look at the default react-chat-engine MyMessage component here, it uses two helper functions getFileName() & isImage() to handle the file type check and another two render functions to return different content depending on the file type: renderImages() & renderFiles() .

You could borrow or mimic those functions and implement them on both MyMessages and TheirMessages Components...

MyMessage: https://github.com/adrianhajdin/chat_application/blob/main/src/components/MyMessage.jsx
TheirMessage: https://github.com/adrianhajdin/chat_application/blob/main/src/components/TheirMessage.jsx

Edit the above components in order to include the file type check.

Within the src directory create a new folder called helpersor utils... you name it, then create a new file and call it file.js, original file.js here

// src/utils/file.js
const images = ['jpg', 'jpeg', 'png', 'gif', 'tiff']

export const isImage = (fileName) => {
    const dotSplit = fileName.split('.')
    return dotSplit.length > 0 && images.indexOf(dotSplit[dotSplit.length - 1].toLowerCase()) !== -1
}

export const getFileName = (fileUrl) => {
    const slashSplit = fileUrl.split('/')
    const nameAndHash = slashSplit[slashSplit.length - 1]
    return nameAndHash.split('?')[0]
}

Go ahead and edit src/components/MyMessage.jsx

As we're sending a single file or image, we're goint to check for it on the component itself.

import { getFileName, isImage } from './utils/file.js';

const MyMessage = ({ message }) => {
  const attachment = message.attachments[0];
  const fileName = getFileName(attachment.file ? attachment.file : attachment.name);
  if (isImage(fileName)) {
    return (
      <img
        src={message.attachments[0].file}
        alt="message-attachment"
        className="attachment-image"
        style={{ float: 'right' }}
      />
    );
  } else {
    return (
      <div
        className="attachment-file"
        style={{ float: 'right' }}
        onClick={() => window.open(attachment.file)}
      >
        <FontAwesomeIcon icon="fa-solid fa-file-zipper" />{' '}{getFileName(attachment.file)}
      </div>
    );
  }

  return (
    <div className="message" style={{ float: 'right', marginRight: '18px', color: 'white', backgroundColor: '#3B2A50' }}>
      {message.text}
    </div>
  );
};

export default MyMessage;

By now you'd be be able to style the atachments differetly depending on the file type. There's a lot to improve here though. I hope it helps.