Level 102
Try setting as a module like vite
<script type="module">
ecommerce.addFiles('[file to add]');
</script>
Oct 7, 2022
19
Level 1
Internal Script loades before the src file JS script.
I am loading my src file using vite
@vite(['resources/assets/js/apps/script.js'])
but the problem is the script which lies on the same pages but as in internal script loades quickly even before my script.js
<script>
ecommerce.addFiles('[file to add]');
</script>
What and why is this happening? What can I do to solve this ?
Level 1
@Sinnbeck Thanks for your reply.
I have tried but did not work. Should I try clearing my build and laravel cache?
Level 102
@Owaiz_Yusufi how do you know its not loading first? Are you getting an error?
Did you perhaps not bind ecommerce to window in app.js?
window.ecommerce = ecommerce
Level 1
@Sinnbeck One more thing my base components is made with Laravel components
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
<title>Base HTML</title>
</head>
<body>
{{ $slot }}
{{$footerFiles}}
</body>
</html>
Does that creating the issue?
Level 1
@Sinnbeck Yes it giving me error
Uncaught TypeError: ecommerce.addFiles is not a function
Level 102
@Owaiz_Yusufi you are not loading @vite in that?
Level 1
@Sinnbeck Are you talking about my laravel component?
If yes then no I have not included my @vite in that
let me share you my component code
Inside my index.blade.php file
<x-base-layout :scrollspy="false">
<x-slot:footerFiles>
@vite(['resources/assets/js/apps/script.js'])
<script type="module">
ecommerce.addFiles('[file to add]');
</script>
</x-slot>
<!-- END CUSTOM SCRIPTS FILE -->
</x-base-layout>
Level 102
@Owaiz_Yusufi ok and what's in resources/assets/js/apps/script.js?
Level 1
@Sinnbeck Inside script.js file it
/**
* ====================
* File Pond
* ====================
*/
// We want to preview images, so we register
// the Image Preview plugin, We also register
// exif orientation (to correct mobile image
// orientation) and size validation, to prevent
// large files from being added
FilePond.registerPlugin(
FilePondPluginImagePreview,
FilePondPluginImageExifOrientation,
FilePondPluginFileValidateSize,
// FilePondPluginImageEdit
);
// Select the file input and use
// create() to turn it into a pond
let ecommerce = FilePond.create(document.querySelector('.file-upload-multiple'));
Level 102
@Owaiz_Yusufi so you don't bind it to window like a have shown above?
Level 1
@Sinnbeck Nope :( Let me try.
Level 1
Ok I have updated my code
window.ecommerce = FilePond.create(document.querySelector('.file-upload-multiple'));
It worked the error is gone but does not show the results that I was expecting :(
Level 102
@Owaiz_Yusufi good. That's why it's a good idea to try the suggestions given :)
And it's hard knowing what you are expecting vs what is happening
Level 1
@Sinnbeck let me explain you what I want
I am using a file upload plugin FilePond and I have rendered it's all the source JS inside publlic folder
and extracting it like
<x-slot:footerFiles>
<script src="../../plugins/editors/quill/quill.js"></script>
<script src="../../plugins/filepond/filepond.min.js"></script>
<script src="../../plugins/filepond/FilePondPluginFileValidateType.min.js"></script>
<script src="../../plugins/filepond/FilePondPluginImageExifOrientation.min.js"></script>
<script src="../../plugins/filepond/FilePondPluginImagePreview.min.js"></script>
<script src="../../plugins/filepond/FilePondPluginImageCrop.min.js"></script>
<script src="../../plugins/filepond/FilePondPluginImageResize.min.js"></script>
<script src="../../plugins/filepond/FilePondPluginImageTransform.min.js"></script>
<script src="../../plugins/filepond/filepondPluginFileValidateSize.min.js"></script>
@vite(['resources/assets/js/apps/script.js'])
<script type="module">
ecommerce.addFiles('[file to add]');
</script>
</x-slot>
So, my problem the following error
Uncaught TypeError: ecommerce.addFiles is not a function
which prevents my image file from displaying
But, when as per your solution using window.ecommerce works.
But, the issue is still the same no image display
Level 102
@Owaiz_Yusufi why use vite for any of this if you are putting all of the files inside the html anyways? Also don't use relative paths. Use an absolute path from public
Level 1
@Sinnbeck Thank for suggestion :)
Level 1
@Sinnbeck You mean some thing like this
<script src="{{public_path('plugins/editors/quill/quill.js');}}"></script>
Level 1
@Sinnbeck Sorry I mean using assets()
<script src="{{asset('plugins/editors/quill/quill.js');}}"></script>
Level 102
@Owaiz_Yusufi yeah asset helper or
<script src="/plugins/editors/quill/quill.js"></script>
Please or to participate in this conversation.