Meet New File Manager SDK

NPM package and powerful API for calling your file manager and image editor, uploading files, and resizing images.

CodePen demos with code samples are inside.

Go to flmngr.com

Now on its own website

File Manager screenshot
File Manager SDK
JavaScript SDK
NEW
N1ED logo
N1ED is united plugin
for all JS+ plugins
N1ED logo Buy in bundle

File Manager SDK

File Manager can be integrated in any of your CMS or any other website or web service.

Note. JS+ File Manager is formerly known as AlphaManager. JS library and its API still use this name.

Projects based on File Manager SDK

File Manager logo

CKEditor/TinyMCE File Manager add-on

Powerful files & image uploader, catalogization tool with the image editor already inside.
Deep integration: used in HTML Text editor and in other places of Bootstrap Editor.

Step-by-step instructions

  1. Get the archive with File Manager and unpack its alphamanager directory into your server directory.
  2. Include the File Manager script into your website page in this way:
    <script src="/js/alphamanager/alphamanager.js"></script>
    And do not forget to change /js/ path to your actual path (to where you have copied File Manager in step 1).
  3. Create any element which will act like link. It can be simple div element like:
    <div id="alpha_button">Open file manager</div>
  4. Initialize File Manager and attach it to the button:
    var browser = AlphaManager.init(
       {
          onFileSet: function(files) {
             // your custom code here
          }
       },
       'alpha_button'
    );
    See that you pass ID of your button as the second parameter of initialization function. You can also pass DOM element there instead of ID.
    The first parameter is configuration for JS+ File Manager. It must define your function in which you will handle files choosed by user, and you can also pass any parameters you want. See the list of parameters on Configuration page.

Explanation on onFileSet function

The key moment for integration File Manager into your application is to handle files selected in File Manager. When user selects a file or files and presses "OK" button in the dialog or "Select" button in Alpha Manager it is being closed and your custom function onFileSet is called.

The first and the only parameter in this function is files array in which information about all the files selected will be passed.

Here is example of files array for one file selected:

[
    {
        dir: "/alphamanager_images/Icons",
        name: "chrome-256.png",
        path: "http://demo.js.plus/alphamanager_images/Icons/chrome-256.png",
        ext: "png",
        image: true,
        height: 256,
        width: 256,
        size: 13568,
        size_human_friendly: "13.25 Kb",
        time: 1325435016
    }
]
So by getting files[0] you will get information about the first selected file.

The list of file data values is very simple:

dirThe directory path from the root File Manager directory
nameThe name of the selected file. Append it to dir to calculate path of the file
pathdir + name but with prepended returnUrlPrefix if specified in File Manager parameters
extFile extension
imageFlag of is this image which can be handled by File Manager. If true see two next parameters for more info about image
widthWidth of the image in pixels. Actual only if image is true
heightHeight of the image in pixels. Actual only if image is true
sizeFile size in bytes
size_human_friendlyFormatted file size for easy use
timeFile modify timestamp