Forum Component: add/edit reply/topic with image uploaded from device

Rishi B Posted in Component Development 6 years ago

I have the latest version of the Forum component. It works fine for inserting images that are stored on the web, but doesn't allow for uploading images from the user's device. The control that is used, Summernote (www.summernote.org), actually does have built-in functionality for image uploads, but that requires some server-side processing to properly store the image and all that jazz. A very fast alternative that I found is the UploadCare plugin for Summernote (www.uploadcare.com). I don't want to say anything I shouldn't because I know Forum is a paid component, so I'll leave it at this... it can be integrated very easily, all the changes go in Forum/plugins/default/forum/js.php and it's pretty much just copy+pastable after you sign up and get an API key. If anyone needs more specifics, contact me offline (rishibhat[at]gmail).

Replies
us Rishi B Replied 6 years ago

Hey Z-Man,

Yeah, I did consider that as well. The main thing I don't like about that solution is it still requires an extra step for the user (uploading to their photo album, then grabbing the url). Also, users may not want their forum post images showing up on the news feed or elsewhere on the site for privacy reasons. The Summernote control (www.summernote.org), which is already used by the Forum component, provides a way to do this pretty easily as I mentioned earlier (tbh I'm a little surprised this wasn't already implemented since Forum is a paid component, but no worries). Just add javascript initialization code for onImageUpload to Forum/plugins/default/forum/js.php, and then add server-side processing code to store your image file. The JS would be something like:

onImageUpload: function(files, editor, welEditable) {
                sendFile(files[0], editor, welEditable);
            }
        });
        function sendFile(file, editor, welEditable) {
            data = new FormData();
            data.append("file", file);
            $.ajax({
                data: data,
                type: "POST",
                url: "Your URL POST (php)",
                cache: false,
                contentType: false,
                processData: false,
                success: function(url) {
                    editor.insertImage(welEditable, url);
                }
            });

And the PHP code to process the uploads:

if ($_FILES['file']['name']) {
            if (!$_FILES['file']['error']) {
                $name = md5(rand(100, 200));
                $ext = explode('.', $_FILES['file']['name']);
                $filename = $name . '.' . $ext[1];
                $destination = '/uploads/' . $filename; //change this directory
                $location = $_FILES["file"]["tmp_name"];
                move_uploaded_file($location, $destination);
                echo 'http://test.yourdomain.al/uploads/' . $filename;//change this URL
            }
            else
            {
              echo  $message = 'Ooops!  Your upload triggered the following error:  '.$_FILES['file']['error'];
            }
        }
German Michael Zülsdorff Replied 6 years ago

Thanks for sharing that interesting idea.

Speaking for myself, I'm always thinking twice before using a third party service for storing stuff- so why not simply retrieve the image(s) from one of my own Ossn photo albums? Actually, it's quite easy:

The same will work with the Editor used in the Blog component, SitePages, etc.