laravel-uppy-s3-multipart-upload Uppy is not a constructor

trafficstars

I tried to follow the instructions only difference being I used the CDNs and uppy doesn't show up in the console I'm getting this error any ideas I'm using this CDN and

Uncaught TypeError: Uppy is not a constructor at eval (eval at <anonymous> (alpinejs:5:599), <anonymous>:27:26) at alpinejs:5:936 at Vt (alpinejs:1:4604) at w (alpinejs:5:79) at alpinejs:5:27365 at Function.<anonymous> (alpinejs:5:10229) at r (alpinejs:5:1652) at n (alpinejs:5:1682) at Qt (alpinejs:5:1692) at S (alpinejs:5:4344) at alpinejs:5:3867 at Array.forEach (<anonymous>) at Object.nr [as start] (alpinejs:5:3855) at alpinejs:5:32510

Jan 12 '22 11:01 CovertError

I'm not sure what would be causing that error, it's more than likely the order you are including those assets. I've had trouble using that defer attribute on the Alpine tag in the past.

The way we are using this on one project is with Laravel Mix.

At the bottom of the <head> tag in your layout include this:

<script src="{{ mix('js/app.js') }}" defer></script>

Inside app.js:

require('./bootstrap')

require('alpinejs')

Inside bootstrap.js (At the very least you just need the Uppy portion of this):

window._ = require('lodash')

import Moment from 'moment'
window.moment = Moment

window.Pikaday = require('pikaday')

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios')

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

require('@uppy/core/dist/style.min.css')
require('@uppy/drag-drop/dist/style.min.css')
require('@uppy/status-bar/dist/style.min.css')

import Uppy from '@uppy/core'
import DragDrop from '@uppy/drag-drop'
import StatusBar from '@uppy/status-bar'
import XHRUpload from '@uppy/xhr-upload'
import AwsS3Multipart from '@uppy/aws-s3-multipart'

window.Uppy = Uppy
window.DragDrop = DragDrop
window.StatusBar = StatusBar
window.XHRUpload = XHRUpload
window.AwsS3Multipart = AwsS3Multipart

Jan 12 '22 11:01 swilla

I'm not sure what would be causing that error, it's more than likely the order you are including those assets. I've had trouble using that defer attribute on the Alpine tag in the past.

The way we are using this on one project is with Laravel Mix.

At the bottom of the <head> tag in your layout include this:

<script src="{{ mix('js/app.js') }}" defer></script>

Inside app.js:

require('./bootstrap')

require('alpinejs')

Inside bootstrap.js (At the very least you just need the Uppy portion of this):

window._ = require('lodash')

import Moment from 'moment'
window.moment = Moment

window.Pikaday = require('pikaday')

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios')

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

require('@uppy/core/dist/style.min.css')
require('@uppy/drag-drop/dist/style.min.css')
require('@uppy/status-bar/dist/style.min.css')

import Uppy from '@uppy/core'
import DragDrop from '@uppy/drag-drop'
import StatusBar from '@uppy/status-bar'
import XHRUpload from '@uppy/xhr-upload'
import AwsS3Multipart from '@uppy/aws-s3-multipart'

window.Uppy = Uppy
window.DragDrop = DragDrop
window.StatusBar = StatusBar
window.XHRUpload = XHRUpload
window.AwsS3Multipart = AwsS3Multipart

so I tried something a bit different where I'm not using alpinejs and there mostly everything works but when I try to upload a file I get

[Uppy] [16:08:54] Failed to upload Screenshot_48.jpg Could not get https://companionUrl/s3/multipart/Ywcmh1Rbo0TSkq9hzTGKLi9BLc1vvVVyl1Cvu0pKjsk8jZmb.HqYKNhQ845tguRHtToDZqQiTzOfvV26IwRk5rtWL6iSsApu3Rtvoiy0j_OSuyjO3zxHTaDz.1JHEu.B4k9BUd5llXRxeqZxkMxCD4kQcYoMGbaHhUa.HD1z46iIJWgozRdChY6bI_B0p47o/1?key=uploaded-files%2Fscreenshot_48_034644900_1641989333.jpg. Failed request with status: 404.

[Uppy] [16:08:54] Could not get https://companionUrl/s3/multipart/Ywcmh1Rbo0TSkq9hzTGKLi9BLc1vvVVyl1Cvu0pKjsk8jZmb.HqYKNhQ845tguRHtToDZqQiTzOfvV26IwRk5rtWL6iSsApu3Rtvoiy0j_OSuyjO3zxHTaDz.1JHEu.B4k9BUd5llXRxeqZxkMxCD4kQcYoMGbaHhUa.HD1z46iIJWgozRdChY6bI_B0p47o/1?key=uploaded-files%2Fscreenshot_48_034644900_1641989333.jpg. Failed request with status: 404.

the URL part would have the companionUrl I just cant really show the URL

Jan 12 '22 12:01 CovertError

I tried to follow the instructions only difference being I used the CDNs and uppy doesn't show up in the console I'm getting this error any ideas I'm using this CDN and

Uncaught TypeError: Uppy is not a constructor at eval (eval at <anonymous> (alpinejs:5:599), <anonymous>:27:26) at alpinejs:5:936 at Vt (alpinejs:1:4604) at w (alpinejs:5:79) at alpinejs:5:27365 at Function.<anonymous> (alpinejs:5:10229) at r (alpinejs:5:1652) at n (alpinejs:5:1682) at Qt (alpinejs:5:1692) at S (alpinejs:5:4344) at alpinejs:5:3867 at Array.forEach (<anonymous>) at Object.nr [as start] (alpinejs:5:3855) at alpinejs:5:32510

the order where I'm adding those assets I tried calling alpinejs first and I tired called the puppy first both didn't work again I need to use the CDN and not npm

Jan 12 '22 12:01 CovertError

I'm not sure what would be causing that error, it's more than likely the order you are including those assets. I've had trouble using that defer attribute on the Alpine tag in the past. The way we are using this on one project is with Laravel Mix. At the bottom of the <head> tag in your layout include this:

<script src="{{ mix('js/app.js') }}" defer></script>

Inside app.js:

require('./bootstrap')

require('alpinejs')

Inside bootstrap.js (At the very least you just need the Uppy portion of this):

window._ = require('lodash')

import Moment from 'moment'
window.moment = Moment

window.Pikaday = require('pikaday')

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios')

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

require('@uppy/core/dist/style.min.css')
require('@uppy/drag-drop/dist/style.min.css')
require('@uppy/status-bar/dist/style.min.css')

import Uppy from '@uppy/core'
import DragDrop from '@uppy/drag-drop'
import StatusBar from '@uppy/status-bar'
import XHRUpload from '@uppy/xhr-upload'
import AwsS3Multipart from '@uppy/aws-s3-multipart'

window.Uppy = Uppy
window.DragDrop = DragDrop
window.StatusBar = StatusBar
window.XHRUpload = XHRUpload
window.AwsS3Multipart = AwsS3Multipart

so I tried something a bit different where I'm not using alpinejs and there mostly everything works but when I try to upload a file I get

[Uppy] [16:08:54] Failed to upload Screenshot_48.jpg Could not get https://companionUrl/s3/multipart/Ywcmh1Rbo0TSkq9hzTGKLi9BLc1vvVVyl1Cvu0pKjsk8jZmb.HqYKNhQ845tguRHtToDZqQiTzOfvV26IwRk5rtWL6iSsApu3Rtvoiy0j_OSuyjO3zxHTaDz.1JHEu.B4k9BUd5llXRxeqZxkMxCD4kQcYoMGbaHhUa.HD1z46iIJWgozRdChY6bI_B0p47o/1?key=uploaded-files%2Fscreenshot_48_034644900_1641989333.jpg. Failed request with status: 404.

[Uppy] [16:08:54] Could not get https://companionUrl/s3/multipart/Ywcmh1Rbo0TSkq9hzTGKLi9BLc1vvVVyl1Cvu0pKjsk8jZmb.HqYKNhQ845tguRHtToDZqQiTzOfvV26IwRk5rtWL6iSsApu3Rtvoiy0j_OSuyjO3zxHTaDz.1JHEu.B4k9BUd5llXRxeqZxkMxCD4kQcYoMGbaHhUa.HD1z46iIJWgozRdChY6bI_B0p47o/1?key=uploaded-files%2Fscreenshot_48_034644900_1641989333.jpg. Failed request with status: 404.

the URL part would have the companionUrl I just cant really show the URL

note I'm using laravel vapor which could be causing issues I'm not sure

Jan 12 '22 12:01 CovertError

We are using vapor for this project as well, and it is working OK for us. Maybe it has something to do with your configuration for S3:

From filesystems.php:

        's3' => [
            'driver' => 's3',
            'key' => env('AWS_ACCESS_KEY_ID_UPLOAD'),
            'secret' => env('AWS_SECRET_ACCESS_KEY_UPLOAD'),
            'region' => env('AWS_DEFAULT_REGION'),
            'bucket' => env('AWS_BUCKET'),
            'url' => env('AWS_URL'),
            'endpoint' => env('AWS_ENDPOINT'),
            'use_accelerate_endpoint' => env('AWS_USE_ACCELERATE_ENDPOINT'),
        ],

From .env:

AWS_DEFAULT_REGION="us-east-2"
AWS_BUCKET="bucket-name"
AWS_URL="https://s3.amazonaws.com"
AWS_ACCESS_KEY_ID_UPLOAD=
AWS_SECRET_ACCESS_KEY_UPLOAD=
AWS_ACCESS_KEY_ID=${AWS_ACCESS_KEY_ID_UPLOAD}
AWS_SECRET_ACCESS_KEY=${AWS_SECRET_ACCESS_KEY_UPLOAD}
AWS_USE_ACCELERATE_ENDPOINT=true

Jan 12 '22 13:01 swilla

no its exactly the same only difference is this AWS_USE_ACCELERATE_ENDPOINT=true and I don't think it would do any of this

Jan 12 '22 13:01 CovertError

the thing is uploading files normally without multipart works well

Jan 12 '22 13:01 CovertError

If you want to provide a link to a sample repo where this is not working as you described I can take a look.

Jan 12 '22 13:01 swilla

sure I'll set one up

Jan 12 '22 13:01 CovertError

thank you so much for your help

Jan 12 '22 13:01 CovertError

laravel-uppy-s3-multipart-upload laravel-uppy-s3-multipart-upload copied to clipboard

Uppy is not a constructor

laravel-uppy-s3-multipart-upload
laravel-uppy-s3-multipart-upload copied to clipboard