Connect with us

Upload files to Amazon S3 from the browser using pre-signed post (Laravel, Vue.js/Nuxt.js)

kizinho

Published

on

Follow
DEVELOPER PROGRAMMING: Upload files to Amazon S3 from the browser using pre-signed post (Laravel, Vue.js/Nuxt.js) [New  Developer Programming] » Naijacrawl
Photo: Naijacrawl
site

Upload files to Amazon S3 from the browser using pre-signed post (Laravel, Vue.js/Nuxt.js)

This article was written by Okonkwo Buchi Flair a ccolleague of mind, read and know how to simply upload your files via Amazon S3.

original article can be found here

Before I begin I would love to point out that is my first post so please pardon me any errors you may find as you read along


Recently I’ve been working on a e-learning platform which of course was going to deal with a lot of uploads and letting the server handle all that will be quite… 😫 And so I had to find an alternative which was direct uploads from the browser. I hit Google search and boy! there were tons of info but then they all made use of javascript, the ones with php used html forms. However, in this post we won’t be using html form. we’ll be making use of axios.

This post assumes you’ve set up your s3 bucket and is fully focused on how to get your uploads working. Don’t forget your CORS configuration as well.


First add your bucket details to your .env file and don’t forget to restart when you make changes to your .env file

AWS_ACCESS_KEY_ID=xxxxxxV2HQFVM
AWS_SECRET_ACCESS_KEY=xxxxxx+xxxx+xxxx+xxxxx
AWS_DEFAULT_REGION=eu-west-2
AWS_BUCKET=Your-Bucket-Name

Next install aws sdk by running the following code

composer require aws/aws-sdk-php-laravel

Create a controller that’s going to take care of your uploads. Meanwhile the filesystem configuration file located at config/filesystem.php is already set up by default to help you access your S3 configurations in the .env file

use Aws\S3\PostObjectV4;
use Aws\S3\S3Client;

class MyController extends Controller
{
public function upload(Request $request)
{
$filename =  $request->filename;
$directory =  $request->directory;
$s3 = config('filesystems.disks.s3');
$client = new S3Client(['version' => 'latest','region' => $s3['region'],'credentials' => ['key' => $s3['key'],'secret' => $s3['secret'],
]]);
$bucket = $s3['bucket'];
$prefix = $directory . '/';
$acl = 'public-read';
$expires = '+10 minutes';
$formInputs = [
 'acl' => $acl,
 'key' => $prefix . $filename,
];
$options = [
 ['acl' => $acl],
 ['bucket' => $bucket],
 ['starts-with', '$key', $prefix],
];
$postObject = new PostObjectV4($client, $bucket, $formInputs, $options, $expires);
$attributes = $postObject->getFormAttributes();
$inputs = $postObject->getFormInputs();
return response(['attributes' => $attributes, 'inputs' => $inputs, 'url' => $attributes['action'] . '/' . $directory . '/' . $filename]);
}
}

So let me explain what’s happening in the above code. From my frontend I am going to make a post request which would contain the name of the file (just as it would be in my s3 bucket and also the folder where it’s going to be saved since my files are going to be saved in different folders. I get my s3 configurations from the env file use s3 file configuration in the config/filesystem.php file. The rest are self explanatory I hope. The $attributes contains information like the form action which is going to look like https://your-bucket-url. Yours won’t necessary have a directory of course. The ‘url’ in my return is what I intend to save in my database once my upload is successful and it would look like this https://bucket-url/directory/filename. With this you will be able successfully generate a presigned POST.

Next create a post route that points to the controller. Since I am making use of Lumen my route looks like this

$router->post(‘uploads/store’, ‘[email protected]’);

Next we’ll dive into the frontend part where we’ll be submitting a form with the detailed generated above.

In my Nuxt file I created a component S3FileUploads.vue that looked like this

I am going to attach screenshots instead for some codes.

I have a computed property which basically returns the file extension

computed property get file extension

I also have a method for generating random strings

random string generator

I like to have a general file or files where my endpoints are. It makes it easier to make changes. So I have an endpoint which points to the controller that generates the presigned post for me.

And then I have my upload file method. The first part of this method involved me trying to generate a unique name for my files and

There was an issue I encountered while trying send the file to my s3 with axios. My header already contained an Authorization token which made the s3 reject the request, and I couldn’t remove the Authorization because of course I can’t access the backend if my request doesn’t contain the token. So removing it wasn’t an option. Th alternative for me was to use the fetch

Of course there were other things I did like store the file url to the database if the upload was successful. That’s basically it. Feel free to ask any questions, I’ll try to reply them, and I’d really appreciate those claps too. Thanks for reading

Click Here To Comment


site


kizinho

Adike Kizito is a top-rated software developer, blogger, sports, and entertainment lover. He is the CEO of these popular websites Naijacrawl.com and Mp3ager.com. He operates his software developing task through Kizzsoft.com,... Read More

Continue Reading
Click to comment

Be first to comment


    Leave a Reply

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

    How to fix Flutterwave common error's while Integrating payment in your Laravel App

    kizinho

    Published

    on

    DEVELOPER PROGRAMMING: How to fix Flutterwave common error's while Integrating payment in your Laravel App [New  Developer Programming] » Naijacrawl
    Photo: Naijacrawl
    Hi folks, I was integrating FLutterwave on my laravel app, on the process i found a bunch of errors while trying to use it accept payment on my site. Have been a Paystack heavy user but decided to use Flutterwave for a reason that I love to do. Going through this article I will list the two types of error or bug that you must encounter while using Laravel Rave steps to get Flutterwave payment working.Types of errorError on the payment page when user try to refresh t...
    Continue Reading

    Easy way to Host your Laravel Application on Shared Hosting

    kizinho

    Published

    on

    DEVELOPER PROGRAMMING: Easy way to Host your Laravel Application on Shared Hosting [New  Developer Programming] » Naijacrawl
    Photo: Naijacrawl
    Hi , Folks have you finished building that your awesome project but hosting it o shared hosting is what remains, don't worry you are on the right track, I have the best way to do that.StepsCreate Database on your online cpanelUpload your project or use git to do thatSet everything up on your ENVnow we need .htaccess that you will create inside your laravel root folderInside the .htaccess add this code RewriteEngine On #ends RewriteCond %{HTTP_HOST} ^(www.)?mydomain...
    Continue Reading

    How to Integrate Flutterwave Rave Payment System in your Laravel Applications

    kizinho

    Published

    on

    DEVELOPER PROGRAMMING: How to Integrate Flutterwave Rave Payment System in your Laravel Applications [New  Developer Programming] » Naijacrawl
    Photo: Naijacrawl
    Hi Folks, I know many laravel developers that have been using Paystack as their payment system have been finding it difficult to integrate Paystack Laravel Package from Laravel 6.0 - 7.0 versions. Today I have a beautiful solution by using Flutterwave Rave Payment System, this process will work on any laravel versions.RequirementsRunning Exiting Project on LaravelCreate Account on FlutterwaveThen you are good to goLets Begincomposer require kingflamez/laravelrave On...
    Continue Reading

    Latest