Estoy intentando subir una imagen pero me me devuelve que solo puedo subir imágenes con los parámetros que le puse al controlador para permitir ciertas imágenes como por ejemplo: 'poster' => 'required|mimes:jpg,jpeg,png'
Y me devuelve esto:
Tengo mas campos como de texto los que no me dan problema por ahora.
Ahora miren como lo hago con el código.
Método upload()
:
upload() {
this.apiFormData.append("cover", this.cover);
this.apiFormData.append("poster", this.poster);
this.apiFormData.append("name", this.name);
this.apiFormData.append("year", this.year);
this.$validator.validateAll().then(result => {
if (result) {
// disable button
this.disabled_button = true;
this.upload_data.api.show = true;
this.upload_data.id = this.name;
axios.post("/api/url/new/movie/customupload", this.apiFormData).then(
response => {
if (response.status === 200) {
this.MOVIEVIDEO_S3(response.data.id); //#:: Funcion si cumple con los parametros
this.$router.push({
name: "movies-manage"
});
}
},
error => {
this.disabled_button = false; //#:: Avilitar de nuevo el boton
});
}
});
},
Este es mi estructura html:
<div class="card-body">
<div class="form-row">
<div class="form-group col-md-3">
<input type="file" id="cover" name="cover" v-validate="'required|image'" @change="readImage('cover','coverFileImage')" class="inputfile">
<img src="" id="coverFileImage" width="200" style="display: none;">
<span v-show="errors.has('cover')" class="is-danger">{{ errors.first('cover')}}</span>
</div>
<div class="form-group col-md-9">
<div class="form-group">
<label>Name</label>
<input type="text" v-validate="'required|max:30'" v-model="name" class="form-control" name="name" autocomplete="off">
<span v-show="errors.has('name')" class="is-danger">{{ errors.first('name') }}</span>
</div>
<label for="exampleTextarea">Description</label>
<textarea v-validate="'required'" class="form-control" rows="10" name="description" v-model="description"></textarea>
<span v-show="errors.has('desciption')" class="is-danger">{{ errors.first('desciption') }}</span>
</div>
</div>
</div>
<div class="card-footer">
<button v-if="!disabled_button" class="btn btn-primary" @click="mupload(name)">Upload movie</button>
<button v-if="disabled_button" class="btn btn-primary" disabled>Loading...</button>
</div>
Otro metodos de validacion:
readImage(id, outImage) {
var img = document.getElementById(id);
var tgt = img.target || window.event.srcElement,
files = tgt.files;
// FileReader support
if (FileReader && files && files.length) {
var fr = new FileReader();
fr.onload = function () {
var srcImage = document.getElementById(outImage);
srcImage.style.display = "block";
srcImage.src = fr.result;
};
fr.readAsDataURL(files[0]);
} else {
// Not supported
// fallback -- perhaps submit the input to an iframe and temporarily store
// them on the server until the user's session ends.
}
}
}
Ahora que saben como recibo los datos ahora les muestro la función del controlador que se encarga de validar antes enviar los datos para insertarlos
public function customUpload(Request $request) {
$request->validate([
'name' => 'required|max:50|regex:/^[a-z0-9 .\-]+$/i',
'description' => 'required|max:500',
'cover' => 'required|mimes:jpg,jpeg,png',
'poster' => 'required|mimes:jpg,jpeg,png',
]);
return $this->upload($request);
}
Ahora sabemos como los recibo. La cosa que intente con implementar un form pero no dio resultado. Sigue mostrando el mismo error. Cambio solo requiriendo las imágenes pero me da error al alterarlas con image make. ¿Que puede ser el causante de este error?. Miré y leí pero los hacen de otra manera o igual pero les funciona diferente. Necesito hacerlo de esta manera.
Actualización: Estaba mirando que datos se estaban enviando pero me estoy dando cuenta que lo esta mandando algunos campos vacíos. ¿por que se envían vacíos?. Cada uno tiene su name respectivo y en el return se le pone por defecto campos vacíos o nullos.