+44 (0) 7918 168 992

Online Solutions Development Blog   |  

RSS

WordPress plugin that saves a remote file

This will be a very simple plugin for wordpress blogs that will allow users to save a file on their server just by providing the url of that file. Let’s say you see a nice picture on another site and you want to save it on your server and use it in one of your posts. With the default wordpress features you will need to save the picture on your local machine and after that upload it to the server.

Maybe this is not a big problem but I think this will be a very simple plugin, a good place to start for the guys that want to write wordpress plugins. This plugin will use some basic, “need to know” wordpress features and could really be useful for some people (blogging from their phone or just wanting to cut the total time needed to download&upload the same file in half).

First of all: we need to create the file in wp-content/plugins. We need to choose an unique name to be sure that no other plugin will overwrite this one. So I will use osd as a prefix for all the thing I want to be sure that other plugins won’t overwrite. So I create osd_file_fetch.php in the plugins directory.

Now we need to place our plugin in the admin menu. How do we do this? We start with one of the most important functions when it comes to writing wp plugins: add_action.

So in that file we just created we add this line:

add_action('admin_menu', 'osd_file_fetch_menu');

This way wordpress will call our function called osd_file_fetch_menu every time the menu will be rendered. So let’s create this function:

function osd_file_fetch_menu() {
  add_media_page('OSD File Fetch Options', 'OSD File Fetch', 'manage_options', 'osd-file-fetch', 'osd_file_fetch_menu_options');
}

So.. what did we just do? We told wordpress to add in the media menu our option, our url will be something like YOUR_BLOG_ADMIN_URL_HERE/upload.php?page=osd-file-fetch and that we want the function called osd_file_fetch_menu_options to handle the content of the page.

Notice that we used the function called add_media_page. This is also a very important function when it comes to writing plugins that need to show up in admin menu. There are other functions that add options in the other admin menus (Like add_options_page, add_management_page, add_theme_page and others).

So that’s all the preparing we need, let’s get to the “magic”.

The code is not complicated but there is a lot of it for a blog post so I will get to the most important things and for the full example I will provide a download link.

So what do we need to ask from the user?

  • The download url
  • The local path (where we will save the file)
  • The name we want to use for the file

So we will output a simple form with a text input for the url, one select input for the path (you will see why select) and another text input for the file name.

How will we choose the path ? At the moment of the page render we will provide a select with all the directories we have in the root of the blog (using wordpress constant ABSPATH and php function scandir). For going deeper we will detect changes to this element (and others) and add/remove other inputs depending on what the user selected. How ? We will capture the change event on this element and each time this input (and the others) changes its value we will do this: we will remove all the next inputs used for path (if any), call an ajax and list the directories at the current selected path.

That’s why I was saying “and others”. Let’s say the user selects the directory called “wp-content”. The ajax will fetch the contents of ABSPATH/wp-content/.

After that he will see another select with the directories plugins, themes, upgrades, uploads. If the user changes the first input’s value from wp-content to wp-admin all the next ones (now just one) will be removed and the list of directories from wp-admin (something like css, images, includes, js) will be fetched. And so on.

This is the user-friendly part of the plugin 🙂

Note: if we just add the content like this: document.getElementById(‘the_container_id’).innerHTML += what_we_get_from_the_ajax it will work, but since the content of the element will be refreshed and the value in the first select will be lost. And in this case this is a big problem. So we will need to create a new html element and add it as a child to the continer. It’s not that hard, you will see in the full source.

Since we will use some javascript I placed inside the code a function taken from http://phpjs.org/ because I like that library a lot (as you will see in a comment in the source code also).

How will we call an ajax? I choose to make a call to the same url with an extra parameter in get. So I added another action like this:

add_action('init', 'osd_get_next_dir');

We called this on “init” because we need to be sure that we are the only ones sending output on this ajax call. So inside the function the first lines would be:

	if (!isset($_GET['osd_get_dir']))
	{
		return false;
	}

And this way this function will run only on our ajax calls and we will output what we need and terminate the script just after that.

So what we need to do now is to output one select input just like the one we made at the initial render but taking into consideration the previous selected values.

How other way can we help the user? Provide a suggested file name. How? We will capture the blur event on the url field and fill the file name field with the last part of the url. (split by “/” and return the last part).

Now the user can submit the form. We just need to get the content like this: file_get_contents(THE_URL_HE_ENTERED) ans try to save it on the server like this: file_put_contents(THE_PATH_HE_SELECTED,  THE_CONTENT_WE_JUST_FETCHED). If we can’t we will tell the user to make sure we have the needed permissions set on that directory.

And that’s all. Simple and effective.

This is the full download link.

For the guys that just need the plugin and are not interested in a lot of technical stuff: download, unzip, copy to wp-content/plugins/, go in your admin section of the blog to the plugins page and activate the plugin called “OSD File Fetch”.

Small but useful things you will find in this example:

  • A way to register a wordpress hook
  • A way to add a menu option in wordpress
  • A way to call an ajax on wordpress
  • A way to scan a directory
  • A way to call an ajax without using any external javascript library
  • A reference to one of my favorite js libraries: php.js
  • A way to capture simple events
  • A way to update the contents of an html element without refreshing the existing value.
  • A way to create an element with js
  • A way to remove an element with js

I hope that this script or parts of it will help someone out there.

If you have any questions please feel free to comment on this post.

If you liked this post
you can buy me a beer

6 Responses to WordPress plugin that saves a remote file

  1. hi i download the plugin and activated it but i don’t know how to use it i want add it on my home page how can i do that please help me i am beginer

    • Hello, imran. What is the problem that you are having? I just tested the plugin using the most recent version of wordpress and it seems that everything works fine. Are you having problems because of directory permissions? Also, I don’t know what is the behavior you are expecting from this plugin. This was just a tutorial that shows several small but interesting ideas. You say that you want to use it on your home page but this plugin creates a new page in your admin area under “Media”. Here is a screenshot showing how it can be used: http://www.osd.net/blog/wp-content/uploads/2011/12/osd-file-fetch-usage-1024×237.png

  2. hello dear admin thanks for very informative website you providing us nice information.i have some problem with OSD File Fetch plugin i am download video files to my server with URLs but when i upload a big file like 200 MB plugin creating error like that
    Fatal error: Allowed memory size of 268435456 bytes exhausted (tried to allocate 124558210 bytes) in /home/hdmazaco/public_html/wp-content/plugins/osd_file_fetch1/osd_file_fetch.php on line 60

    sir please guide me how can i solve this problem Remember 100 mb files uploading working but 200 mb or bigger not working thanks

    • Hello, imran. It sounds like the solution to your problem would be to increase the memory a php script is allowed to use. If you think that you want to do this you need to change the value for the “memory_limit” directive in your php.ini file and restart your web server. This would be a “global” solution. If you are using a shared hosting there’s a big chance the company won’t accept this so you can try to change that value by using the ini_set php function, .htaccess or a copy for php.ini in your web root.

  3. Please guide me where can i find php.ini file i am using wordpress latest version and also tell me which code i have to change?thanks you i am waitng for your kind reply

    • Hello,
      I removed your other comment as it said the same thing as the original one and a part of this one to make sure it is clear for future readers what is your problem. As this is a configuration problem, it does not have anything to do with the content of this post, so please search for documentation on how to change configuration settings. A good place to start is the this page: http://www.php.net/manual/en/configuration.changes.php

Add a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Also, if you want to display source code you can enclose it between [html] and [/html], [js] and [/js], [php] and [/php] etc