Skip to main content

Change highlight colour of select2 option

Select 2 is a popular jquery plugin for better select drop down lists. Styling it is a bit painful. Here’s how you change the highlight colour of the dropdown.

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: red;
  color: #fff; 
}


</pre>
// Remove focus outline
<pre class="default prettyprint prettyprinted"><code><span class="pun">.</span><span class="pln">select2-container </span><span class="pun">*:</span><span class="pln">focus </span><span class="pun">{</span>
        <span class="kwd">outline</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span>
 <span class="pun">}</span></code></pre>
<pre>

Laravel S3 uploads failing when uploading large files in Laravel 5.8

Working on a project for a customer using Laravel 5.8, I found that when uploading files to S3 using Laravel’s Fly System, that the uploads were failing after a certain size.
The error back was a validation error mentioning the file was unable to be uploaded.

To troubleshoot this, there were a few things I did:

  1. Ensured my PHP.INI settings were allowing uploads high enough. I found that PHP.INI only allows 2M by default, so I increased this limit to 20M. I also increased the max post time to 300.
  2. I found out that Amazon S3 doesn’t like files over 5 MB uploading in one go, instead you need to stream it through

Streaming the files

My solution was to have the file upload to the server first, and once it is uploaded, it is streamed from the server to S3.



// Add namespaces
use Illuminate\Support\Facades\Storage;
use Illuminate\Http\File;


// Function to receive uploaded file
public function uploadAttachment(Request $request)
{
                        // Grab the file uploaded
			$file = $request->file('file');


                        // Get the mime type if you want to save it to databse
			$extension = $file->getClientMimeType();
			
                        // Validate the request to ensure it meets your restrictions
			$request->validate([
				'file' => 'required|mimes:pdf,jpeg,jpg,png,gif',
			]);

		
			// Save locally first to folder called 'uploads', in app/storage/uploads
			$save_local = Storage::put('file-uploads', $file);

			
			// Get base location of stored file
			$storage_path  = Storage::disk('local')->getDriver()->getAdapter()->getPathPrefix();
			$local_url = $storage_path . $save_local;


			// Save to S3 (Grab the file object and stream it to S3 to a folder called 'file-uploads'. File is set to a public file that can be accessed by URL.
			$savetoS3 = Storage::disk('s3')->putFile('file-uploads', new File($local_url), 'public');


			// Delete local copy so it does not take space on your server
			Storage::delete($save_local);
	

			// Return file path if using javscript for the file upload. This will return an array with the extension as well as the link to the PUBLIC s3 file url.
			return response()->json([

					'file_type' => $extension,
					'link' => Storage::disk('s3')->url($savetoS3)
			]);

	
}

Using S3 with Laravel 5.8

With any web application, file uploads are a royal pain in the ass.

Storing files on your web server is not the best way to go about things, especially with Laravel.

Ideally, you can have the below setup:

  1. Website code on github
  2. Laravel site hosted using Laravel Forge
  3. Nightly MYSQL backups
  4. Files hosted on s3

With this setup, your site is pretty scalable and if your web host goes down on S3, you can easily copy over to a new server with Laravel Forge, and then simply load up the site again, as all of your files are referenced to Amazon S3.

The below snippet is a simple way to take a file request from a page, validate it for types of files, then save to S3, to a folder called “customer uploads”. You’ll notice I’m also making the file public, so it can be accessed publicly. You can remove the ‘public’ argument if you do not want it to be public.

This function will save the file to S3, then return the full URL to the file on Amazon S3, so you can store it in your database and it can be accessed.

public function uploadAttachment(Request $request)
{

	$file = $request->file('file');

	$request->validate([
	'file' => 'required|mimes:pdf,jpeg,jpg,png,gif',
	]);

	// Save to S3
	$savetoS3 = Storage::disk('s3')->put('customer-uploads', $file,'public');

	// Return file path
	return response()->json( Storage::disk('s3')->url($savetoS3) );

}

If you were to make files private, but still want them downloadable, say through an admin area, you have to do things a bit differently.

You have to save the file as a private file in S3, then store in your database a reference to it.
In the example below, I create a model called “FileLibrary” and have an ID and URL column.
Store the downloaded file in the database.

use Illuminate\Support\Facades\Storage;

public function uploadAttachment(Request $request)
{

	$file = $request->file('file');

	$request->validate([
	'file' => 'required|mimes:pdf,jpeg,jpg,png,gif',
	]);

	// Save to S3
	$savetoS3 = Storage::disk('s3')->put('customer-uploads', $file);

        
        $file = new FileLibrary;
        $file->url = $savetoS3;
        $file->save();

	// Return file ID in database
	return response()->json( $file->id );

}

Then you can create a route which points a get request to the below method.
This will request the file from S3 then download it to your browser.
The great thing about this method is you can restrict downloads to authenticated users.


use Illuminate\Support\Facades\Storage;

public function downloadFile($id)
{
	$file = FileLibrary::findOrFail($id);
	return Storage::disk('s3')->download($file->url);
}

Remove gravity forms unlicensed message

Gravity forms is a great forms plugin for WordPress. I purchased a licence and it lapsed, but I still use it on my website. The problem is, because the licence is lapsed, I am seeing an ugly, annoying message saying that my copy is unlicensed. Just to clarify, I did buy a licence, and I am allowed to use the copy, I just don’t want to renew it for a new version.

To remove the nag, it’s a bit tricky, Gravity Forms have gone above and beyond to make it difficult for people to do to protect their bottom line and just annoy someone to eventually re-licence.

However, with that being said, just add this to your functions.php file.

Read More

Styling WooCommerce Tabs

WooCommerce, an extension for WordPress makes it simple to sell online. What’s a bit painful though is overriding the styles if you’re creating your own theme.

Specifically the tabs, they are painful.

Here’s a small snipper to restyle the woocommerce tabs and take away that rounded look to them.

Manipulate the colours in this code as you see fit. Make sure you place the css after WooCommerce styling.

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
display:none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
border-radius:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active
{

background:blue;
color:#fff;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li{
background:transparent;

border:0;

a {
padding:1rem;
}
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
padding:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs
{
border-bottom:1px solid #999
}

Install PDFTk on Ubuntu 18.04 Bionic

pdftk is missing from the official repository right now. That’s an issue for many people.

I needed PDFTK to be installed on Ubuntu (18.04) due to the need to manipulate PDFs. Unfortunately, because I used Laravel Forge, they only allow Ubuntu, and apparently PDFtk is not longer working with Ubuntu 18.04. There is a workaround! Follow the below to get it working.

There’s a workaround here: How can I install pdftk in Ubuntu 18.04 Bionic?

Quick and easy workaround

In SSH on your Ubuntu 18.04 server, do the below:

wget http://archive.ubuntu.com/ubuntu/pool/universe/p/pdftk/pdftk_2.02-4build1_amd64.deb
wget http://archive.ubuntu.com/ubuntu/pool/main/g/gcc-6/libgcj17_6.4.0-8ubuntu1_amd64.deb
wget http://archive.ubuntu.com/ubuntu/pool/main/g/gcc-defaults/libgcj-common_6.4-3ubuntu1_all.deb
sudo dpkg -i pdftk_2.02-4build1_amd64.deb libgcj17_6.4.0-8ubuntu1_amd64.deb libgcj-common_6.4-3ubuntu1_all.deb

Then type ‘pdftk’, it should come up.

Hope that helps!