Uploading with Multipart using Uppy Vue in Laravel

Uppy
1

I’m attempting to create some routing to handle the multipart uploads using Uppy Vue components and setting the companion URL to point to my server following the suggestion posted here AWS3 MultiPartUpload without Companion · Issue #1189 · transloadit/uppy · GitHub.

Here’s what I have for my Vue component

<template>
<div>
    <a id="uppy-trigger" @click="isUppyOpen = !isUppyOpen">Open Uppy</a>

    <dashboard-modal
        :uppy="uppy"
        :open="isUppyOpen"
        :props="{trigger: '#uppy-trigger'}"
    />
</div>
</template>

<script>
import Uppy from '@uppy/core'
import AwsS3Multipart from '@uppy/aws-s3-multipart';
import '@uppy/core/dist/style.css';
import '@uppy/dashboard/dist/style.css';

export default {
    components: {
        'dashboard-modal': DashboardModal,
    },

    data() {
        return {
            isUppyOpen: false,
        }
    },

    computed: {
        // Uppy Instance
        uppy: () => new Uppy({
            logger: Uppy.debugLogger
        }).use(AwsS3Multipart, {
            limit: 4,
            companionUrl: 'https://mysite.local/',
        }),
    },

    beforeDestroy () {
        this.uppy.close();
    },
}
</script>

Then for my routing:

// AWS S3 Multipart Upload Routes
Route::name('s3.multipart.')->prefix('s3/multipart')
    ->group(function () {
        Route::post('/', ['as' => 'createMultipartUpload', 'uses' => 'AwsS3MultipartController@createMultipartUpload']);
        Route::get('{uploadId}', ['as' => 'getUploadedParts', 'uses' => 'AwsS3MultipartController@getUploadedParts']);
        Route::get('{uploadId}/{partNumber}', ['as' => 'signPartUpload', 'uses' => 'AwsS3MultipartController@signPartUpload']);
        Route::post('{uploadId}/complete', ['as' => 'completeMultipartUpload', 'uses' => 'AwsS3MultipartController@completeMultipartUpload']);
        Route::delete('{uploadId}', ['as' => 'abortMultipartUpload', 'uses' => 'AwsS3MultipartController@abortMultipartUpload']);
    });

And my controller:

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;

class AwsS3MultipartController extends Controller
{
    public function createMultipartUpload(Request $request)
    {
        // @ts-ignore The `uppy` property is added by middleware before reaching here.
        // const client = req.uppy.s3Client
        $client = 'Change to s3 client once one is added';

        // const key = config.getKey(req, req.body.filename)
        $key = $request->has('filename') ? $request->get('filename') : null;

        // const { type } = req.body
        $type = $request->has('type') ? $request->get('type') : null;

        // if (typeof key !== 'string') {
        // return res.status(500).json({ error: 's3: filename returned from `getKey` must be a string' })
        // }
        if (!is_string($key)) {
            return response()->json(['error' => 's3: filename returned from "getKey" must be a string'], 500);
        }

        // if (typeof type !== 'string') {
        // return res.status(400).json({ error: 's3: content type must be a string' })
        // }
        if (!is_string($type)) {
            return response()->json(['error' => 's3: content type must be a string'], 400);
        }

        // client.createMultipartUpload({
            // Bucket: config.bucket,
            // Key: key,
            // ACL: config.acl,
            // ContentType: type,
            // Expires: ms('5 minutes') / 1000
        // }, (err, data) => {
            // if (err) {
            //     next(err)
            //     return
            // }
            // res.json({
            //     key: data.Key,
            //     uploadId: data.UploadId
            // })
        // })

        return response()->json([
            'key'       => 'the key when I get it',
            'uploadId'  => 'the upload id when I get it'
        ]);
    }

    public function getUploadedParts($uploadId)
    {
        return $uploadId;
    }

    public function signPartUpload($uploadId, $partNumber)
    {
        return "{$uploadId} - {$partNumber}";
    }

    public function completeMultipartUpload($uploadId)
    {
        return $uploadId;
    }

    public function abortMultipartUpload($uploadId)
    {
        return $uploadId;
    }
}

For my controller, I’m translating the code from the suggestion into PHP.

When I upload a file, my createMultipartUpload method is hit and everything is good in this method up until I get to the part about the client.createMultipartUpload. I’m assuming that I now need to find some AWS S3 package to add to my Laravel app, and then use that in place of the client.createMultipartUpload part.

I haven’t started on the rest of the methods yet, they’re just placeholders for now.

My main question is, am I on the right path?