Send images in OssnMessages Download 2.1

5.0
Breton Rafael Amorim 9 months ago

An improvement on OssnMessages component to allow the user to attach images. Images also appear properly into OssnChat component, but isn't possible (yet) send images through this component.

If FancyBox component is enabled, images can be open in fullscreen mode.

Disclaimer

OSSN message system has 2 components. The OssnMessages is used in mobile version and OssnChat is the small chatbox at bottom of the page. At this version, this component only works with OssnMessage. Maybe someone here can help me to develop this part of the component :-)

Screenshots

Screenshot of OssnMessages component
Screenshot of OssnMessages component

Screenshot of OssnChat component
Screenshot of OssnChat component

Changes

  • Version 2.1
    -Fixed JS error, found by Michael Zülsdorff
  • Version 2.0
    -Added desandro/imagesloaded JS file and other stuffs to fix scroll down page on load don't work propperly issue
    -Added code to delete file when user delete message. Files from deleted messages will keep into server. Sorry
    -Added code to delete file if user leave or reload page. Working in Chrome, Firefox, Edge.
    -Added button to delete an image before send. If user select another image, the old is deleted too.
    -JS file splited in two, to not inflate head section.
    -Before upload is complete, send button is disabled
    -Added TESTS.md, with test sequence used on this version
    -Images now are stored in OSSN_DATA/messages/photos/{user id} folder. Sorry for don't do this in previous versions ( Issue #1 )
    -When user is deleted, folder and files are removed too.
  • Version 1.2.1
    -Add credits to Open Social Website Core Team and OpenTeknik LLC for code used
    -Improved friendly name of component. "Allow to send images in OssnMessages" doesn't sound good to me :-)
  • Version 1.2
    -Fixed error when disable OssnMessage component, found by Michael Zülsdorff
    -Fixed warning log entry when selecting an image, found by Michael Zülsdorff
    -Add translation in Spanish. Thanks, (Hugo Cuellar)[https://github.com/Erassus]
  • Version 1.1
    -Fixed cache. Tested in both scenarios (cache on and off). Thanks again @Tamás
    -Fixed path, after Arsalam suggestion. However images sent using version 1.0 of component wont appear anymore. It's necessarily an issue to fix?
    -Fixed notification message sent/received image
  • Version 1.0
    -First release, with few tests. Use in production by your own risk.
Comments
Breton Rafael Amorim Replied 7 months ago

Michael

You're right. Yesterday I saw in this error too. Working to fix until saturday.

After solve the search case, I will see image replacement issue.

Regards

German Michael Zülsdorff Replied 7 months ago

Rafael,
please add some length checking to

$('#message-append-'+$to).imagesLoaded( function() {
        $('#message-append-'+$to).animate({ scrollTop: $('#message-append-'+$to)[0].scrollHeight+1000}, 1000);
    });

I'm getting a script error bcause of undefined scrollHeight on every page which has NO message box ;)

German Michael Zülsdorff Replied 7 months ago

Great improvements, Rafael!
Still one sequence getting orphan pics, tested on Ossn 6.2dev, Goblue, Linux chrome 101:

  • open messages/all
  • click photo icon, select pic1 --> getting preview and pic1 is saved
  • click photo icon, select pic2 --> preview disappears and pic2 is saved
  • enter text and send -> getting text-only message and pic2 still in folder
Breton Rafael Amorim Replied 7 months ago

@Michael
Thanks for reporting the forgotten console.log command. Removed in 2.0 version.

@Pariter
This behaviour isnt a bug. But it's also not proper behavior either. In fact, when page is ready, an scrolldown command to show the last part of conversation is started. However, image takes a few seconds to load, and when loading is finished, the bottom of page is bellow off defined from previous command. To solve this issue, in version 2.0, I imported https://github.com/desandro/imagesloaded component to make a new scrolldown on the page after image loading.

us Pariter Retirap Replied 8 months ago

Disregard previous message, and delete post if you can. Something may have happened on my side. Working through the issue. Serves me right for submitting a bug, and not vetting it completely.

us Pariter Retirap Replied 8 months ago

First off, I just want to thank you for producing this component. It has helped us tremendously. I love this community and how much work has been dedicated to making this product what it is.

I'm reporting a usability bug. This error happens in the latest edition of chrome, with OSSN 6.1 Premium, White Theme. When exchanging photos, the text doesn't follow the most recent post, or photo. You have to manually scroll down to see the newest message. If you close the window, and reopen, it remains in the same state from where the first image was sent. It only seems to happen with the dynamic chat popup tab. The example below reflects an example of what I'm speaking of. There is new conversation happening below those images, and the window hasn't updated it's relative position. I haven't investigated further than this, I just found it it a moment a go.
enter image description here

German Michael Zülsdorff Replied 8 months ago

1.2.1:
please disable console.log("to:"+$to);

Breton Rafael Amorim Replied 8 months ago

Michael

Thank you for point me mi mystake. I forgot to check the basics :-)

And sorry for make you check the code at 00:30.

Uploading version 1.2 today

German Michael Zülsdorff Replied 8 months ago

At this version, this component only works with OssnMessage. Maybe someone here can help me to develop this part of the component :-)

Honestly I did not understand from the very beginning why there are two almost similar channels in parallel at all? That's why I would rather drop development on one of them completely. :)

German Michael Zülsdorff Replied 9 months ago

aha ...., debugging $_FILES gives

[23-Mar-2022 00:41:07 Europe/Berlin] FILES 27 <pre>Array
(
    [uploadImageInMessage] => Array
        (
            [name] => image-message1.png
            [type] => image/png
            [tmp_name] => /tmp/phpgSYJUe
            [error] => 0
            [size] => 7691
        )

)

so, it should be

&& $_FILES['uploadImageInMessage']['size'] !== 0

Component

Developer: Rafael
License ossnv4
Type: Communication
Requires Ossn Version : 6.1
Latest Version: 2.1
Last Updated 7 months ago
Repository Url View Repository

Versions