search

TappNetwork / laravel-uppy-s3-multipart-upload

Multipart Uploads using Laravel, AWS S3, and Uppy
MIT License
71 stars 17 forks source link

Uppy is not a constructor #8

Open CovertError opened 2 years ago

CovertError commented 2 years ago

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

swilla commented 2 years ago

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
CovertError commented 2 years ago

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

CovertError commented 2 years ago

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

CovertError commented 2 years ago

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

swilla commented 2 years ago

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
CovertError commented 2 years ago

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

CovertError commented 2 years ago

the thing is uploading files normally without multipart works well

swilla commented 2 years ago

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

CovertError commented 2 years ago

sure I'll set one up

CovertError commented 2 years ago

thank you so much for your help