Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel – The messages I send in the chat are displayed, but the files are not displayed

I’m developing a chat application with Laravel and ReactJS. I can send messages and files. However, when I send a file, only the file’s path appears. How can I view a small preview of the file? Thank you in advance for your help.

I view my files and messages in this component.

class Message extends React.Component {
    static contextType = ChatContext;

    constructor(props) {
        super(props);

        this.state = {
            message: (this.props.message !== undefined ? this.props.message : ""),
            is_me: false
        };
    }

    render() {
        const { session } = this.context;
        const { message } = this.state;

        let date = "";
        let is_me = false;
        if (message.from.id === session.id) {
            is_me = true;
        }
        if (message.created_at) {
            date = moment(message.created_at).fromNow();
        }


        if(message.data !== null && JSON.parse(message.data) !== undefined){
            var data = JSON.parse(message.data);
            message.message = ("<img src='"+data.file_path+' style="max-size:100px;"/>' ?? data.file_path);
        }


        return (
            <div className={`chat ${is_me ? 'is-me' : 'is-you' }`}>
                {is_me ? null:(
                <div className="chat-avatar">
                    <div className="user-avatar bg-purple">
                        <span>{message.from.name.charAt(0)}{message.from.surname.charAt(0)}</span>
                    </div>
                </div>
                )}
                <div className="chat-content">
                    <div className="chat-bubbles">
                        <div className="chat-bubble">
                            <div className="chat-msg">{message.message}</div>
                        </div>
                    </div>
                    <ul className="chat-meta">
                        <li>{message.from.name}</li>
                        <li>{date}</li>
                        {!is_me ? null: (
                        <li>{Lang.get('agent.seen')}</li>
                        )}
                    </ul>
                </div>
            </div>
        );
    }
}

My component is like this. The submitted files look like this "<img src=’message-files/SGwmtyDNrK49387jtSWuPAGs2H4tvfdMGC503og4.png style="max-size:100px;"/>". I want to view this file.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I made the change you said and I got this error "Error parsing message data: ReferenceError: createElement is not defined".

    I wrote the "?? data.file_path" section to see the path of the sent file. It is purely for control purposes. I also store my files in the 'data' column in the database.

    ”How can I view a small preview of the file?” Coming to this question, I am not very good at speaking English so I may not be able to explain.

    enter image description here

    What I want to explain in this article is that I want the file or document to look like this.


  2. 0

    You cannot use a string as an element.

    if(message.data !== null && JSON.parse(message.data) !== undefined){
    var data = JSON.parse(message.data);
    message.message = ("<img src='+data.file_path+' style='max-size:100px;' />" ?? data.file_path); /* <—- not allowed. message.message is simply a string. */
}

    Instead you must create an img element which will be responsible for showing the images (provided the img url is correct [1]).

    if(message.data !== null && JSON.parse(message.data) !== undefined)
{
    var data = JSON.parse(message.data);
    message.message = createElement('img', {src: data.file_path, style: 'max-size:100px;'}); /* <—- now message.message is a usable element. */
}

    Aside:

    • Why the ?? data.file_path? It is part of your code.
    • What do you mean by ”How can I view a small preview of the file?”

    [1] I mentioned this because it is a very tricky part to get right.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search