friendsofflarum/upload

The file upload extension with insane intelligence for your Flarum forum.

Upload by FriendsOfFlarum

An extension that handles file uploads intelligently for your forum.

Features

• For images:
  • Auto watermarks.
  • Auto resizing.
• Mime type to upload adapter mapping.
• Whitelisting mime types.
• Uploading on different storage services (local, imgur, AWS S3 for instance).
• Drag and drop uploads.
• Uploading multiple files at once (button and drag and drop both support this).
• Easily extendable, the extension heavily relies on Events.
• Extender interface to disable or force particular adapters (see below)

Installation

Install manually:

composer require fof/upload "*"

Updating

composer require fof/upload "*"
php flarum migrate
php flarum cache:clear

Configuration

Enable the extension, a new tab will appear on the left hand side. This separate settings page allows you to further configure the extension.

Make sure you configure the upload permission on the permissions page as well.

Mimetype regular expression

Regular expressions allow you a lot of freedom, but they are also very difficult to understand. Here are some pointers, but feel free to ask for help on the official Flarum forums.

In case you want to allow all regular file types including video, music, compressed files and images, use this:

(video\/(3gpp|mp4|mpeg|quicktime|webm))|(audio\/(aiff|midi|mpeg|mp4))|(image\/(gif|jpeg|png))|(application\/(x-(7z|rar|zip)-compressed|zip|arj|x-(bzip2|gzip|lha|stuffit|tar)|pdf))

A mimetype consists of a primary and secondary type. The primary type can be image, video and application for instance. The secondary is like a more detailed specification, eg png, pdf etc. These two are divided by a /, in regex you have to escape this character by using: \/.

Disable or Force a particular adapter

In some circumstances, you may wish to either disable an adapter, or force the use of one. This is set in your root extend.php file.

For example, you may disable imgur

(new FoF\Upload\Extend\Adapters())
        ->disable('imgur'),

Chaining of multiple commands is also possible:

(new FoF\Upload\Extend\Adapters())
        ->disable('imgur')
        ->disable('aws-s3'),

You may also force an adapter:

(new FoF\Upload\Extend\Adapters())
        ->force('imgur'),

Adapter names currently available:

• local
• imgur
• qiniu
• aws-s3

Commands

MapFilesCommand

Using php flarum fof:upload you have a powerful tool in your hands to map uploads to posts and clean up unused files. To do so there are two steps to take into consideration:

• Mapping (--map) allows you to look through posts to identify whether which uploaded files have been used inside any posts, and store this information
• Clean up (--cleanup, --cleanup-before=yyyy-mm-dd) grants you to ability to remove files that have been uploaded before the given time and haven't been mapped to any (existing) posts.

The intent of this command stems from the original concept of understand what uploads are used where and to allow removal of unused, stale files. You can run this command manually or as a cronjob.

Example 1; only mapping files:

php flarum fof:upload --map

Example 2; map and clean up

php flarum fof:upload --map --cleanup --cleanup-before="a month ago"

Once you're happy with how the command operates, you can append the flag --force, which removes the need to confirm the action:

php flarum fof:upload --map --cleanup --cleanup-before="last year" --force

The following (to resume) will happen when this command is put into a recurring cronjob:

• based on the interval of the cronjob (daily, weekly or however)
• the command will go over all uploads to discover in which posts they have been used
• delete those files that have been uploaded "last year" that have not been found in posts

FAQ

• AWS S3: read the AWS S3 configuration page.
• Adding Templates: read the Custom Templates wiki page.
• Upgrading from flagrow/upload: read the wiki article.

Links

• 
• Flarum Discuss post
• Source code on GitHub
• Report an issue
• Download via Packagist

An extension by FriendsOfFlarum

upload's Issues

Dedicated upload button for each mime types.

Purpose for this request is to give user-friendly for Flarum user want to upload file.

Dedicated fonticon button for each of these mime types: video, audio, image, pdf file.

Generic fonticon (attachment) button for another mime types support by upload extension.

Please take a look at Plush Flarum text editor for example:

write aws adapter

Editing a mimetype shifts input fields around

• flagrow/upload extension version: 4.11
• flarum version: 0.1.0-beta.6
• Upload adapter causing issues: local

---

Editing a mimetype in the upload adapter mapping shifts the input fields around or deletes or adds input fields.
This seems to be caused by the updateMimeTypeKey function, which adds a new mapping and deletes the old one.

Mimetype not being saved, and error during upload

• flagrow/upload extension version: 0.4.11
• flarum version: 0.1.0-beta.6
• Upload adapter causing issues: local

---

First off, can't add mimetypes. Probably isn't being saved in database.
While trying to upload an image, the server rejects due to unallowed file type (since there's no regex string to match filetype).

Second, there's an error while trying to upload.
PHP message: PHP Warning: array_map(): An error occurred while invoking the map callback in /var/www/html/vendor/illuminate/support/Collection.php on line 469

integrate with uppy

https://uppy.io/

imgur https links

https://discuss.flarum.org/d/4154-flagrow-file-upload-the-intelligent-file-attachment-extension/139

Multiple uploads per post

Would it be possible to allow multiple uploads per post? Would be great if a member could select 10 images at once :)

Cheers! Keep up the great work.

Extendability

Add way for new methods to be added by 3rd party extensions.

Example of use: using a custom method in a private extension.

overrule avatar upload

Error after file select

Uncaught TypeError: Cannot read property 'data' of null
    at UploadButton.success (http://ubu:81/assets/forum-b5304c3d.js:35058:53)
    at http://ubu:81/assets/forum-b5304c3d.js:2539:22
    at thennable (http://ubu:81/assets/forum-b5304c3d.js:2510:5)
    at fire (http://ubu:81/assets/forum-b5304c3d.js:2530:4)
    at Deferred.self.resolve (http://ubu:81/assets/forum-b5304c3d.js:2447:5)
    at http://ubu:81/assets/forum-b5304c3d.js:2482:15
    at Array.map (native)
    at finish (http://ubu:81/assets/forum-b5304c3d.js:2480:9)
    at http://ubu:81/assets/forum-b5304c3d.js:2557:7
    at thennable (http://ubu:81/assets/forum-b5304c3d.js:2510:5)

malevolent file upload protection

tbd

management of uploaded files.

a simple management tool
1 create/delete/edit album
2 user choose album as they uploading
3 massive delete uploaded files in album

how about this idea? XD

progress indicator

it would be very useful to add some kind of visual feedback (an animation, or a percentage of some sort) to clearly show when the file upload to the server is happening.
This is even more relevant in case of large files uploads, when the user has no clear perception whether the upload is still ongoing or has stuck for some reason.

• http://tympanus.net/codrops/2013/12/12/progress-button-styles/

Image Compression and Optimization

Should allow for an option to use some sort of image optimization lib or tool so that websites can serve images faster with less bandwidth.

Fileupload on Windows

• flagrow/upload extension version: 0.4.12
• flarum version: 0.1.0-beta.6
• Upload adapter causing issues: local: ^image/.*
• Windows 10 x64 Operating System Version 10.0.14393
• Running XAMPP V3.2.2 (Running as Admin), XAMPP / PHP has no permission restrictions
• Local storage settings: Content Delivery URL (prefixes files): Empty

Incorrect URL Generated: "http://domain.eu/Forum/\assets/files\2017-04-05\1491391403-0-image.jpeg"
How the URL should look like: "http://domain.eu/Forum/assets/files/2017-04-05/1491391403-0-image.jpeg"

uploading SVG images fails

• flagrow/upload extension version: 4.11
• flarum version: 0.1.0-beta.6
• Upload adapter causing issues: local

---

Uploading SVG images fails when they are opened by the image processor. I didn't test it but looking at the code I guess also uploading any image file other that png, jpeg or gif would fail.

I think the following lines should be changed:

src/Listeners/ProcessesImages.php:

--- a/src/Listeners/ProcessesImages.php
+++ b/src/Listeners/ProcessesImages.php
@@ -43,7 +43,7 @@ class ProcessesImages
 
     protected function validateMime($mime)
     {
-        if (Str::startsWith($mime, 'image/')) {
+        if ($mime == 'image/jpeg' || $mime == 'image/png' || $mime == 'image/gif' || $mime == 'image/svg+xml') {
             return true;
         }
 

src/Processors/ImageProcessor.php:

--- a/src/Processors/ImageProcessor.php
+++ b/src/Processors/ImageProcessor.php
@@ -43,7 +43,8 @@ class ImageProcessor implements Processable
      */
     public function process(File &$file, UploadedFile &$upload)
     {
-        if ($upload->getMimeType() != 'image/gif') {
+        $mimeType = $upload->getMimeType();
+        if ($mimeType == 'image/jpeg' || $mimeType == 'image/png') {
             $image = (new ImageManager())->make($upload->getRealPath());
 
             if ($this->settings->get('mustResize')) {

[Sercurity Bug] Send all settings to frontend

Reproduce

1. Open forum site, that is build from flarum/flarum
2. Open web browser console, and run console.log(app.forum.data.attributes);

OR

1. Go to http://site.com/api/forum

Issue

I see all settings from database, it include access key of some service, eg: AWS S3, .....

Use xsendfile and/or php proxy

https://tn123.org/mod_xsendfile/

Send file requests through php and/or xsendfile module for nginx/apache.

"Something went wrong while trying to load the full version of this site"

• flagrow/upload extension version: 0.4.9
• flarum version: 0.1.0-beta.6
• Upload adapter causing issues: N/A

---

Hi,
I just created an empty Flarum forum and installed this extension. The issue is that it breaks the site after it has been enabled, returning an empty page with a text header and this notice:

Something went wrong while trying to load the full version of this site

I am able to make it work again by removing the plugin from the settings table. Also, I had installed another extension before s9e/flarum-ext-mediaembed, which loaded fine.

I'm looking to use this extension to test this SMF forum to Flarum migration tool:
https://github.com/ItalianSpaceAstronauticsAssociation/smf2_to_flarum

$do_attachments_images = true; // Requires flarum-image-upload ext.

While I'm at it, can you comment if it flagrow/upload it compatible with the query this tool is doing, and also if it would be feasible to use it to import other attachments, different from images? Here's the code section pertaining attachments

Thank you

Support uploading images to Imgur.

I'm currently still using the Image Upload extension because it supports uploading images to Imgur. It'd be great if this extension could support that as well.

Not possible to paste text when extension is enabled

• flagrow/upload extension version: 0.4.7
• flarum version: 0.1.0-beta6
• Upload adapter causing issues:

The upload extension makes it impossible to paste text into the the text field when writing a post or creating a new discussion. This happens for me on macOS in chrome and Firefox, it works fine in safari

---

...

Responsive images

Complementing the lightbox feature, multiple thumbnails of various sizes could be generated and then offered via srcset attribute.

Request: Add Lightbox option

Would like to have the images that are posted to include some lightbox functionality. Currently users have to download the image or view it in a new tab in order to see a bigger size.

I would like to see something like:

http://codepen.io/gschier/pen/HCoqh

Embedded CSS:

<style>
  .thumbnail {
  max-width: 40%;
}

/** LIGHTBOX MARKUP **/

.lightbox {
	/** Default lightbox to hidden */
	display: none;

	/** Position and style */
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
}

.lightbox img {
	/** Pad the lightbox image */
	max-width: 90%;
	max-height: 80%;
	margin-top: 2%;
}
.lightbox:target {
	/** Remove default browser outline */
	outline: none;

	/** Unhide lightbox **/
	display: block;
}
 
</style>

HTML:

<a href="#img1">
  <img src="http://insomnia.rest/images/screens/main.png" class="thumbnail">
</a>

<!-- lightbox container hidden with CSS -->
<a href="#_" class="lightbox" id="img1">
  <img src="http://insomnia.rest/images/screens/main.png">
</a>

The trick would be the code needed to generate a new #imgID for each posted image on the thread.

I am guessing this could be achieved by adding the .lightbox css to the custom css area and creating 2 sources to the image, the first one appending style="thumbnail" the other image source appending style="lightbox" ?

Thank you.

subdirectory installations have malformed url generated

see https://discuss.flarum.org/d/4154-flagrow-file-upload-the-intelligent-file-attachment-extension/54

Drop exclamation mark when not an image

https://discuss.flarum.org/d/4154-flagrow-file-upload-the-intelligent-file-attachment-extension/65

The images aren't upload to my Imgur account

• flagrow/upload extension version: 0.4.9
• flarum version: 0.1.0-beta.6
• Upload adapter causing issues: Imgur

---

When I upload an image using the extension the image is not upload to my imgur account. The upload is 'anonymous' (without associated user).

Disclaimer: Is the first time that I use Imgur, maybe I'm doing something wrong. My settings: http://imgur.com/a/EAMfd

S3 Uploading Issue for US-EAST-1 region users

Cross-posted from the Flarum discussion: https://discuss.flarum.org/d/4154-flagrow-file-upload-the-intelligent-file-attachment-extension/36

I've discovered a (possible) issue with S3 uploading and I'm not sure if it's related to this extension or the S3 library it depends on.

For example, when setting up S3, I need to specify an Access ID, Secret Key and Region endpoint (all par for the course with AWS).

However, because I use use the US East 1 region, it cannot be used in the style of s3.region.amazonaws.com/bucketname and must use s3.amazonaws.com/bucketname as per amazon's documentation: https://docs.aws.amazon.com/AmazonS3/latest/dev/UsingBucket.html#access-bucket-intro

Unfortunately, because I need to specify the region in the settings for the upload to actually work, the same region is appended to the URL which shouldn't happen in the case of their "default" region.

As far as I can tell, ideally, us-east-1 region users should be able to leave the region blank, in lieu of having to write a workaround for that specific region.

At the moment, I can edit the URL on the post to remove the region and everything works - however, other users won't know what's going on.

Either way thanks for the awesome extension and if this issue is better reported elsewhere let me know. :)

Download Counter

Is there any download counter in plan?

allow configuration of upload adapter per mime type

I'd like to be able to specify the upload adapter that should handle a specific mime type upload. For instance:

• Images (mime: image/*) should be handled by imgur
• doc-x etc should be handled by google docs (to be implemented)
• other files should be stored locally

For this to work the admin page should allow for a flexible input list where we have two columns, the first column allows specification of the mime type and the second holds a dropdown of the available adapters; the same dropdown currently shown.

file extension disallows "normal" downloads

https://discuss.flarum.org/d/4154-flagrow-file-upload-the-intelligent-file-attachment-extension/75

Due to the dash extension behavior file downloads do not work properly.

Str::slug generates file name where all foreign characters are emptied

This will prevent multi upload, perhaps I can generate a unique string with ramsey/uuid:

https://discuss.flarum.org/d/4154-flagrow-file-upload-the-intelligent-file-attachment-extension/157

2 issues : image file type change to ’.jpeg‘, and big image file upload error.

• flagrow/upload extension version: 0.4.8 and some previous
• flarum version: beta6
• Upload adapter causing issues:

issues 1 : when .jpg upload , it auto change to .jpeg .

issues 2 : when upload a image with more than 2mb , get error and upload fail .PHP configer is ok with 20mb max upload（post_max_size、upload_max_filesize）,and 40s max_execution_time.

File model has to save service and unique Id

Currently the File model is unaware where the file was saved. We have to start storing this information so we can delete these files later on.

Modify the database:

• Add column remote_id, string, nullable
• Add upload_method to phpdoc of File

Change logic to:

• Save upload_method to database
• Store the remote id to the database, eg for Imgur

allow configuration of mime types that are allowed

S3 Upload file issue. : needs to be %3A

Using Flarum Beta (current as of 1/12/2017)

Added S3 extension requirements.
Correctly added S3 creds.
Granted bucket privileges to Public.
When I upload an image, it (the image) does not display on the forum the output is:
image autopng.png(https://s3.us-west-2.amazonaws.com/oe800/2017-01-12/18:58:430-autopng.png)
(brackets removed)

The output needs to be changed.

https://s3.us-west-2.amazonaws.com/oe800/2017-01-12/18:58:430-autopng.png

to:

https://s3-us-west-2.amazonaws.com/oe800/2017-01-12/18%3A58%3A430-autopng.png

Notice the ':' is changed to '%3A'

Is there a source file / location I can make the changes to? A package I am missing?

https://github.com/flagrow/upload/blob/master/src/Adapters/Flysystem.php I believe is the file to adjust.

protected function generateFilename(File $file)
{
    $today = (new Carbon());
    $file->path = sprintf(
        "%s/%s",
        $today->toDateString(),
        $today->toTimeString() . $today->micro . '-' . $file->base_name
    );
}

I thought I could just remove the $today lines so that its just $file->base_name
I however get errors. Not much of a coder. Any help would be greatly appreciated.

Changed above code to:

protected function generateFilename(File $file)
  {
$today = (new Carbon());
      $file->path = sprintf(
          "%s",
          $today->toDateString() . $today->micro . '-' . $file->base_name    $
  }

This removed the time stamp from the forum output, but the file still gets uploaded to S3-bucket with the time stamp. Where do I make the change to remove the timestamp from the file before it gets uploaded?

Maybe have an option to disable appending a date and time stamp to the end of the file would remove future issues with characters .

Thank you. Have a happy Friday the 13th.

Identified Event doesn't appear to work

• flagrow/upload extension version: 0.4.11-0.4.12
• flarum version: 0.1.0-beta.6
• Upload adapter causing issues: Identified Event

---

The event doesn't seem to be dispatched. This code works when used with a Flarum event, but not with the Identified event.

<?php

namespace Davis\Test\Listeners;

use Flagrow\Upload\Events\Adapter\Identified;
use Davis\Test\Adapters\Custom;
use GuzzleHttp\Client as Guzzle;
use Illuminate\Events\Dispatcher;

class OverwriteAdapter
{
    public function subscribe(Dispatcher $events)
    {
        $events->listen(Identified::class, [$this, 'whenIdentified']);
    }

    public function whenIdentified(Identified $event)
    {
        $event->adapter = new Custom(
            new Guzzle([
                'base_uri' => 'http://customdomain.com',
            ])
        );
    }
}

Upload Images Error

Hello,

I'm having issues uploading files on my local server. I can see the image directory being created under /assets/files/2017-01-28 when I attempt to upload a simple JPG, however I am receiving an error message.

Oops! Something went wrong. Please reload the page and try again.

I can see in the the following response which doesn't look correct.

<br /> <fon

Any idea what the issue could be? I'm logged in as an admin, I have the Permissions for Upload files set for Admin but the issue still appear.

I'm using the latest Flarum and Flagrow/upload versions.

Thanks!

Image deletion

There are a few cases we need to take care of image deletion;

• Discussion or post creation was cancelled even though we've uploaded the file.
• Delete images once the post they contain is deleted (including when the whole discussion was deleted). This only happens on hard deletion (delete forever in Flarum terminology).
• Delete images that have been removed from the filesystem. We might need to replace these with an obvious text or a "404" image.

windows directory separator

https://discuss.flarum.org/d/4154-flagrow-file-upload-the-intelligent-file-attachment-extension/163

settings are not sent to forum (frontend)

do not force file type by default

https://discuss.flarum.org/d/4606-flagrow-upload-issues-0-4-0

drag and drop upload

http://jsfiddle.net/pelonpelon/L19e51hz/

how about add watermark option for images?

watermark for jpg/png images upload.

1.Position
top-left/right center bottom-left/right
and with user's name who was uploaded it.
2. Transparency
3. font file path for non-western users and font size

thanks

Display icon and size for non image?

• flagrow/upload extension version: 0.4.12
• flarum version: 0.1.0-beta.6
• Upload adapter causing issues:

--

Great plugin as always. I've managed to upload an mp4 successfully and get a URL successfully. For non images, would it be possible to display an icon and size of file?

paste image data uploads file

name consists of file type

https://discuss.flarum.org/d/4606-flagrow-upload-issues-0-4-0

aws documentation

see #5 and #2

Abstract Upload Adapter

Considering the local adapter accepts any filesystem it should be made into an abstract class. And a new Local adapter and the other adapters should extend the abstract one.

Can not set the picture watermark, I use the png picture

• flagrow/upload extension version:0.4.7
• flarum version:v0.1.0-beta.6
• php version: 7.1.0
• Upload adapter causing issues:
  Can not set the picture watermark，I use the png picture

---

...

Notifications

There are a few situations where we want a notification to be send;

• whenever a file upload occurs