Working with files

Uploading and embedding files and images

N1ED is a client application, an add-on for TinyMCE and CKEditor. But when it comes to uploading files and images to the page, it requires server side support. Such support is provided by another plugin: Flmngr file manager. But even if that plugin is not installed, N1ED still comes with a Flmngr backend and offers basic file uploading functionality.

Users of Drupa 8 do not need to configure anything to start upload file to the server (only if they want to upload them to other places). All other users should use configuration to tell N1ED where it should send requests to upload files, and how to properly link to uploaded files.

The present article is actual for all backends: PHP, Node, Java.

Configuring URLs

For N1ED to send a request to upload a file, it should know the URL where the Flmngr file manager server side script (that is also an uploader) is installed. The urlFileManager parameter is in charge for that.

After sending a request to the file manager, it returns a list of files (uploaded or selected) with their paths relative to the root directory of Flmngr on the server. Now, to embed an image to the content, you should turn these relative paths to full URLs by adding the prefix specified in the urlFiles parameter to them.

Here is an example configuration:

urlFileManager: '/flmngr/flmngr.php',
urlFiles: '/flmngr/files/',

If your Flmngr is located on a separate server (for example, if you store files independently of the main website), the configuration could be as follows:

urlFileManager: '',
urlFiles: '',

Sometimes the structure of URLs is different from the directory hierarchy on the server (that is, the website uses a custom router). In that case you may refer to files as configured on your web server:

urlFileManager: '/admin/js/flmngr/flmngr.php',
urlFiles: '/images/',

Needless to say, the server side paths and symbolic links to directories should be configured properly.

Configuring paths on the server

By default all files are stored in the dirFiles directory inside the Flmngr server script directory. You can redefine this value on the server using the Flmngr backend config. The directory must permit writing and must be open to access from the web (the urlFiles parameter on the client side is exactly for that: it specifies how to find the directory from the outside).

There are two more parameters in the config: dirTmp and dirCache, that specify, correspondingly, the location of the temporary file directory (unconfirmed uploads) and the location of cache (image previews for the client part of Flmngr). Access to these directories from outside is not required, so they may be anywhere.

Here is an example default configuration for PHP:

        'dirFiles' => 'files',
        'dirTmp'   => 'tmp',
        'dirCache' => 'cache'

And here is how you can change it:

        'dirFiles' => '/var/www/public/files',
        'dirTmp'   => '/tmp/flmngr-tmp',
        'dirCache' => '/tmp/flmngr-cache'

Please note that these parameters is the server-side configuration. For PHP, you should put them to config.php. For Node, Java and other backends, look for a corresponding file with Flmngr settings.

Default uploading directory

When you upload a file, it goes to the root directory of Flmngr on the server (the one you specified in the dirFiles parameter of the server-side script config). To prevent this directory from collecting all the garbage, you may specify another default directory for uploads using the following parameter on the client (in the TinyMCE/CKEditor config):

dirUploads: 'uploads/',

Before using dirFiles make sure the directory exists on the server inside dirFiles and permits writing.

File Manager toolbar buttons

Flmngr attaches to standard dialog of TinyMCE or CKEditor and allows to call file manager when you click Browse buttons.

When you use Flmngr together with N1ED, do not add any Flmngr buttons on your toolbar: anything is managed by N1ED and its widgets: this is a new way to insert images and change their locations. In others cases when you need quick uploading tools, please use these buttons on your toolbar:

Embed image icon icon
Embed image
Button name: EmbedImage
Insert a picture with specified image without uploading it to the server. It will be embedded in contents using Data URI Scheme.
Fast upload image icon
Fast upload image
Button name: FastUploadImage
Uploads images from your computer, external website by URL or from your clipboard and inserts image elements into a document.
Fast upload image preview icon
Fast upload image preview
Button name: FastUploadPreview
Uploads images and inserts mini previews of them linked to original files. You can attach any preview script like Lightbox to your website and they will become interactive.
Fast upload file icon
Fast upload file
Button name: FastUploadFile
Uploads files from your computer, external website by URL or from your clipboard and inserts link elements to uploaded files into a document.
Upload image icon
Upload image
Button name: UploadImage
The same as fast image uploading but with UI for configuring image size, file names and other options.
Upload image preview icon
Upload image preview
Button name: UploadPreview
The same as fast image preview uploading but with UI for configuring image size, file names and other options.
Upload file icon
Upload file
Button name: UploadFile
The same as fast image uploading but with UI for configuring image size, file names and other options.
Upload image gallery icon
Upload image gallery
Button name: UploadGallery
Uploads specified files to your website and inserts them as grouped and themed gallery of previews linked to original images.

Image Editor

The ImgPen add-on is integration of the image editing widget ImgPen. With it, you can crop and rotate images, draw over images or add labels, apply frames or filters.

In order to save edited images ImgPen needs script installed on the server to handle file uploading. Backend script is the same as in Flmngr and N1ED case. If you already use Flmngr or N1ED your ImgPen is ready to work immediately and does not require to install or configure any backend.

If you use ImgPen alone please install Flmngr backend (it goes with ImgPen for free).

Image Editor toolbar button

ImgPen image editor icon
Edit with ImgPen image editor
Button name: ImgPen
When image selected this button will open ImgPen image editor dialog to edit the image.