# Uploading with Multipart using Uppy Vue in Laravel

**URL:** <https://community.transloadit.com/t/uploading-with-multipart-using-uppy-vue-in-laravel/15687>\
**Category:** Uppy\
**Created:** [April 19, 2021, 2:27pm UTC](https://community.transloadit.com/t/uploading-with-multipart-using-uppy-vue-in-laravel/15687 "2021-04-19T14:27:51Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![josh](https://avatars.discourse-cdn.com/v4/letter/j/45deac/32.png) [@josh](https://community.transloadit.com/u/josh)\
**Post date:** [April 19, 2021, 2:27pm UTC](https://community.transloadit.com/t/uploading-with-multipart-using-uppy-vue-in-laravel/15687/1 "2021-04-19T14:27:51Z")

</div>

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](https://github.com/transloadit/uppy/issues/1189#issuecomment-445521442).

Here’s what I have for my Vue component

```auto
<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:

```php
// 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
<?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](https://github.com/transloadit/uppy/blob/fffd8ce4d8bac984eec8de5481d5a9bc795dd843/packages/%40uppy/companion/src/server/controllers/s3.js#L58-L278) 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?