Array

How To Get Selected File From elFinder File Manger Window

elFinder is a great file manager to use to manage files on your web servers hard drive. It can be configured to work with TinyMCE or called on it’s own which is what I am going to demonstrate here. When browsing files I wanted to be able to select a file and then to get the URL of that file passed back to the main form.

elfinder

The default instance of elFinder doesn’t return the selected file to the previous window which is a bit of a pain, but thankfully it’s not all that hard to get it working. For this instance I was creating a form that would create an image gallery. Images were selected from the hard drive and then once submitted the selected images would become a gallery. So I needed to use elFinder as a file manager to browse the disk and allow me to upload new images.

The following HTML is setup to trigger the elFinder window and display any images that are selected. There is a hidden input field that will store the selected images you you can send them through in a form. The selected images will then be displayed in the “selectedImages” div after selecting them.

<input type = "text" name = "galleryimages" id = "galleryimages" style = "display:none"/>
<a href = "javascript:void(0)" id = "elfinder_button">Add Gallery Images</a>
<div id = "selectedImages">

</div>

The javascript below is set to wait for a click of the href. Once clicked it will display the window. The url will need to be changed if you have “connector.php” moved to a different location. I found height and width useful to, but they are optional. Place any code you like inside “getFileCallback”. You can use jQuery to put the “file” value anywhere you like on your page.

$('#elfinder_button').live('click', function() {
  $('<div id="editor" />').dialogelfinder({
    url : 'php/connector.php',
    width: '80%',
    height: '600px',
    getFileCallback: function(file) {
      var filePath = file; //file contains the relative url.
      var imgPath = "<img src = '"+filePath+"'/>";
      $('#selectedImages').append(imgPath); //add the image to a div so you can see the selected images
      $('#editor').remove(); //close the window after image is selected
    }
  });
});

I found I had to update some of the CSS for the elFinder window as the buttons were showing up strange. I was able to add the CSS to the page that was calling the file manager so there was no issues fixing this.

Related Articles

Related Questions

Whirlpool Oven F6E6: Appliance Manager 1 Board Communication

I have a brand new Whirlpool oven W11I OM1 4MS2 H or (859991549450). I bought it alongside the microwave combi oven. I have had...

Whats the difference between the Tapo P100 and the P105?

There are a few different Tapo smart plugs. The P100 and P110 differ based on the smart power monitoring feature but where does the...

Time remaining keeps going up on Whirlpool dryer??

I have clothes in the dryer regularly and the time remaining shows on the display. There could be 10 mins remaining and if I...

5 COMMENTS

  1. First thanks this was very helpful.

    I would be helpful to list the js and css libraries required:

    jquery.min.js
    jquery-ui.min.js
    smoothness/jquery-ui.min.css
    elfinder.min.js

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Latest Tools

Memory Converter

Converting values between various metric measurements is usually quite simple as there will be 1000 of the smaller unit in the next larger unit....

Bitrate Converter

Below you will find a bitrate converter. This tool will allow you to enter a bitrate value, in one of many different formats and...

Aesthetic Text Generator

There are various ways to make your social media profile seem more unique, some of which are not as easy to implement as others....

Aspect Ratio Calculator For Images

Aspect ratio is the ratio between the height and width of an image. If you want to resize an image by 100 pixels, you...

Add Text To Image

Use this free tool to add text to an image. Simply select the image file that you want to overlay text onto and you...

JavaScript Multi-line String Builder

Javascript did not always support multi-line strings. If you attempted to create a string variable using quotes, putting a line break into the source...

Latest Posts

Latest Questions