0
For no apparent reason my site is returning the following error when uploading an image:
The message says:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="robots" content="noindex,nofollow" />
<style>
body {
background-color: #fff;
color: #222;
font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
margin: 0;
}
.container {
I’m using Dropzone on the Laravel, this is the file inside the Components:
<template>
<div>
<dropzone
id="myVueDropzone"
ref="myVueDropzone"
:url="upload"
v-on:vdropzone-success="showSuccess"
:max-number-of-files="20"
:use-custom-dropzone-options="true"
:dropzone-options="customOptionsObject"
:max-file-size-in-mb="5">
<input type="hidden" name="_token" v-model="token">
<input type="hidden" name="images[]" v-model="images">
</dropzone>
<div class="thumb-images">
<draggable v-model="thumbs" @start="drag=true" @end="checkMove">
<div class="image-box" v-for="(thumb, index) in thumbs" :key="index">
<span class="capa" v-if="index == 0">Capa</span>
<img class="thumb" :src="thumb">
<div class="remove-image-button" v-on:click="removeImage(index)" role="button">
<svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>ic_trash</title>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"></path>
<path d="M19 4h-3.5l-1-1h-5l-1 1H5v2h14V4zM6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12z" fill="#FFF"></path>
</g>
</svg>
</div>
</div>
</draggable>
</div>
</div>
</template>
<script>
import Dropzone from 'vue2-dropzone'
import draggable from 'vuedraggable'
export default {
name: 'vc-dropzone',
props: ['token', 'upload', 'gallery'],
components: {
Dropzone,
draggable
},
data() {
return {
drag: false,
images: [],
thumbs: [],
customOptionsObject: {
language: {
dictDefaultMessage: '<div class="dz-icon icon-wrap icon-circle icon-wrap-md"><i class="fa fa-cloud-upload fa-3x"></i></div><div><p class="dz-text">Arraste as imagens aqui</p><p class="text-muted">ou click para selecionar manualmente</p></div>',
dictFileTooBig:'Arquivo muito grande. Maximo permitido: 2Mb'
}
}
}
},
methods: {
'showSuccess': function (file, response) {
this.images.push(response.image)
this.thumbs.push('/images/' + response.image)
$("#images-hidden").val(this.images)
this.$refs.myVueDropzone.removeFile(file);
},
removeImage: function(index) {
this.thumbs.splice(index, 1)
this.images.splice(index, 1)
$("#images-hidden").val(this.images)
},
checkMove: function() {
this.images = [];
var local = this
this.thumbs.forEach(function(item, index) {
local.images.push(item.replace('/images/', ''))
})
$("#images-hidden").val(this.images)
}
},
mounted() {
if(this.gallery != "") {
var gallery = this.gallery.split(',')
var local = this
this.images = gallery
gallery.forEach(function(item, index) {
// var mockFile = { name: item, size: 12345 };
// local.$refs.myVueDropzone.manuallyAddFile(mockFile, '/images/' + item, null, null, local);
local.thumbs.push('/images/' + item)
})
}
}
};
</script>
<style lang="css" scoped>
</style>
This issue is preventing users from uploading their images, but is working normally on localhost.
This is where we call the Component on the index:
<div class="panel-body">
<vc-dropzone token="{{ csrf_token() }}" upload="{{ route('upload-anuncio') }}" gallery="{{ $anuncio->gallery->implode('name', ',') }}"></vc-dropzone>
<input type="hidden" id="images-hidden" name="images" value="{{ old('images', $anuncio->gallery->implode('name', ',')) }}">
</div>
Does anyone know why this is happening? Until a few days ago it was functioning normally.