Drupal 7 File Resumable Upload Module

By shane
Wed, 2014-11-26 09:04
Daily Dose of Drupal Episode #181

Share with Others

The Drupal 7 File Resumable Upload Module is a great way to allow your Drupal site to upload large files. This is especially helpful if your server limits the size of files you can upload to your Drupal site. The module simply replaces the standard Drupal file upload field with a better alternative that allows:

  • Multiple files to be uploaded
  • The resuming of uploads that may have been interrupted
  • Drag and dropping of files from your file system

The File Resumable Upload module uses HTML5 for the upload field but does fall back to the standard Drupal file upload field if the widget is not supported by your browser.

In this video we cover:

  • How to install and configure the Drupal 7 File Resumable Upload module
  • How to change existing image or file fields to use the new resumable upload widget
  • How the upload widget allows multiple large file uploads, resuming of uploads, and dragging and dropping from the file system

File Resumable Upload Module Note: The 1.0 version of the File Resumable Upload module has a bug concerning progress that explains why it takes time to show actual progress. This bug has been fixed in the dev version on the module's project page.

Hello everyone and welcome to another Daily Dose of Drupal. Today we’re on Episode Number 181. I am Shane Thomas, you can follow me on Twitter at smthomas3 and also make sure to head over to codekarate.com, check out all the videos and articles along with the 5 Secrets to Becoming a Drupal 7 Ninja EBook.

Every once in a while we get a module that I think is really cool. We end up reviewing a lot of modules over here and we put together a lot of videos but sometimes we run into modules that we see that we will be using on a daily basis and this is one of those modules.

The File Resumable Upload Module is going to be something that I can see a lot of Drupal developers needing and it’s relatively new. So we’re going to go through how that module is going to allow you to upload larger files, upload multiple files at once and resume interrupted uploads. So if an upload would stop for some reason you could resume it and pick up right where it left off. The one thing about this module is it does use HTML 5 so it’s a pure HTML 5 solution. So if your browser doesn’t have support HTML 5 it will just fall back to the standard file upload widget.

So we’re going to go ahead and get started and show how this can be set up on a test site here. The first thing we’re going to look at is a content type that I created, that we’re going to tool through. I just call it Large Files. All I have is an Image Field and a File Upload field and we’ll be using those fields to show how this File Resumable Upload Widget can actually work. So we’re going to start by making sure we turn the module on, you’ll have to of course download it and it’s actually very quick and easy to install and get working. After we enable the module we’re going to look at the permissions.

You’ll notice there’s a permission to upload via File Resumable Upload so if you want, depending on the types of users you want. If you want authenticated users to be able to use it or even anonymous of if you have other roles you can set those permissions. And we will now go and look at our content type here. So we’ll go to our large files content type, location here and we will look at the fields. And you’ll notice that if I edit it’s going to look pretty much the same as it always has, just a standard image field, same options but there is going to be this Resumable Upload Settings.

We’re going to go ahead and show how it looks currently before we turn on the Resumable Upload and it looks like a Standard File Upload Field. It sets our limit at a 100 megabytes, I also have this one, the file upload set at 10 just as an example. You can see it looks as we’d expect but let’s go ahead and turn on one of those File Resumable options. So if we come back into our Image Field we can go to the Resumable Upload settings section here and expand that.

Here we can enable the Resumable Upload, you can also then set a maximum upload if you want and this can be actually larger than your server size limit or the limit that is set in your PHP maximum post and file upload sizes. So this can be really cool if you’re using or needing to upload large files and maybe a couple of hundred Megs and you know that you don’t want to set the server to allow you to upload those larger files.

You can use this to kind of get around that. We’re going to save this one and we’re also going to edit the file upload field and I set this as an example as a maximum file upload size of 10 and you saw that it showed up that way when we try to create the first one. We look at the Node Add page. If we set this, let’s go ahead and set this to 120 megabytes and you’ll notice that’s larger than even our PHP limit and it’s larger than the maximum upload size that we’re setting here.

We make sure we check the Enable Resumable Upload checkbox and you’ll notice I also am allowing three files to be uploaded here. So if we click Save, now if we go in and add a large file, give it a title, you’ll notice our File Upload Widget has changed. This one is set to allow unlimited amount of images so you can see there’s no limitation here. This one said you can drop the three files here. You can click the Browse button just like you normally would or you can actually drag and drop items directly onto the page.

So for instance I have a couple of pictures here, I will just start to drop in and you will notice they just begin to drop in this list and as I click Upload it’ll start uploading this, if I click Cancel in the mid-upload and I re-click upload, it’ll pick up exactly where it left off. So it’s basically is able to keep track of where the upload left off and pick back up and to continue to upload those files. We can also do the same thing with some bigger Zip files here.

You’ll notice that one of this is actually over 100 megabytes which is what the PHP File Upload Setting is and you’ll notice that this file will be able to be dropped in. Oops that’s the image field. If I go down to the File Upload Field and I drop it in, you’ll notice that it’s able to pull this in. You can also pull in this one and even maybe this image file or this MP4 file.

So now if I click Upload, let’s go and start this upload and this is of course going to take quite a bit of time just because these are much larger files. So hopefully here in a second we will see it start to actually show some progress. You'll see now it’s showing that it’s 3.3% so if we click Cancel we could then remove one of these files, click Upload and you’ll see that it picks back up where it left off because it was uploading all of these files at the same time.

So even if I remove one and I continue to upload it’ll still keep track of each individual file and how much it had uploaded from that file. And I’m actually going to remove this one as well just to speed this up a little bit. Okay you’ll see that we’re just about uploaded and there it goes. So now you can see our larger files has been uploaded so we’re going to go ahead and save and you’ll notice that we have our files uploaded here, our big video file that we uploaded is there and if I would have left those other ones of course and waited long enough with those other larger files would have been there as well.

So that’s really all there is to the File Resumable Upload Module. It’s extremely simple to install and configure and it’s really useful especially if you’re using a shared hosting provider or a provider that is limiting you upload size to a set amount. This is a good way to I guess get around that so you can upload some of those larger files that you may need on your Drupal website.

So go ahead and try it out. I think it’s going to be useful for a lot of people, let me know what you think, make sure to check out codekarate.com and we’ll see you next time.