vincent15000's avatar

Server error 500 with UIKit upload component

Hello,

UIKit proposes two ways to upload files : with a button or with a drop area.

I want to use the drop area.

Here is my view. I'm not sure that the form tag is necessary, the upload is managed via JS. But with or without the form tag, I have the same problem.

<form enctype="multipart/form-data">
	<div class="js-upload uk-placeholder uk-text-center">
	    <span uk-icon="icon: cloud-upload"></span>
	    <span class="uk-text-middle">Vous pouvez glisser / déposer des images dans ce cadre ou bien en</span>
	    <div uk-form-custom>
	        <input type="file" multiple>
	        <span class="uk-link">sélectionner depuis votre explorateur</span>
	    </div>
	</div>
</form>

Here is the JS code (exactly the same as mentioned in the UIKit documentation, I have only customized the URL to manage the upload request and I have added the CSRF token to avoid a 419 error).

https://getuikit.com/docs/upload

<script>

    var bar = document.getElementById('js-progressbar');

    UIkit.upload('.js-upload', {

        url: '{{ route('admin.recipes.photos.add', compact('recipe')) }}',
        multiple: true,

        beforeSend: function (e) {
            console.log('beforeSend', arguments);
            
            e.headers = { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
        },
		...

    });
</script>

I have a 500 error and nothing in the log to help me.

Do you have any idea why I receive this 500 error ?

Thanks for your help.

V

0 likes
2 replies
vincent15000's avatar
vincent15000
OP
Best Answer
Level 63

I have solved this issue which was only a problem with my controller in which I tried to dd() something while the upload uikit component need JSON. So I got an error while trying to display something.

Please or to participate in this conversation.