Laravel + Vue $request->hasFile('image') returns null

Question

Laravel 5.7
upload_max_filesize = 200m
post_max_size = 250m

$request->hasFile('image') is returning null, even though I can clearly see the request holding an image key returning with a valid base64 (validated it to be an image)

controller

if ($request->hasFile('image')) { return 'yes'; }else{ echo 'no'; return $request->all(); }

front

<form @submit.prevent="saveOoi" enctype="multipart/form-data"> <div><img :src="image" class="embed-responsive"></div> <input type="file" v-on:change="onFileChange" class="form-control mb-3" name="image"> </form>

scripts

data() { return { image: '', errors: new Errors(), } }, methods: { onFileChange(e) { let files = e.target.files || e.dataTransfer.files; if (!files.length) return; this.createImage(files[0]); this.$data.image = files[0]; }, createImage(file) { let reader = new FileReader(); let vm = this; reader.onload = (e) => { vm.image = e.target.result; }; reader.readAsDataURL(file); }, saveOoi() { axios.post('ooi', this.$data) .then(response => console.log('sent', response)) .catch(error => this.errors.record(error.response.data)); } }

i have the vue extension for chrome and I can see that the file is set in data.image when I pick the file.

What am I missing here?

if you show me the result of your $request->all() when sending images, that would be helpful. — Amir
– Amir, Commented Nov 12, 2018 at 10:05

Noogen · Accepted Answer · 2018-11-13 04:44:56Z

hasFile doesn't work because it's not a file. You already converted the file to base64 and post it as json so you would access the base64 as $request->input('image') - then, you have to do this: How to save a PNG image server-side, from a base64 data string

If you want to upload a file and access it on the server-side with hasFile, then you can do something like:

const fd = new FormData() fd.append('image', this.file) fd.append('type', this.name) // any other fields // fd.append... more fields axios.post('ooi', fd)

<b-form-file :id="fileName" v-model="file" />

Vladimir Salguero · Accepted Answer · 2018-11-22 17:35:19Z

In your controller

public function store(Request $request) { if($request->hasFile('image_file')){ $file = $request->file('image_file'); $name_image = time().$file->getClientOriginalName(); $file->move(public_path().'/images/', $name_image); } }

In your vue component

<template> <form method="post" enctype="multipart/form-data"> <div class="image"> <input type="file" id="image_file" :v-model="image_file" name="image_file" @change="onFileChange" accept="image/*" class="input-file"> <p v-if="!url">Click to browse your image</p> <img v-if="url" :src="url" class="img img-responsive full-width" /> </div> </form> </template> <style> </style> <script> export default{ data(){ return{ url: null } }, methods: { onFileChange(e) { let files = e.target.files || e.dataTransfer.files; if (!files.length) { console.log('no files'); } console.log(files); console.log(files[0]); const file = files[0]; this.url = URL.createObjectURL(file); const formData = new FormData(); formData.append('image_file', file, file.name); axios.post('http://127.0.0.1/....', formData, {}).then((response) => { console.log(response.data) }) .catch(function(err){ console.log(err) }); } } } </script>

Collectives™ on Stack Overflow

Laravel + Vue $request->hasFile('image') returns null

controller

front

scripts

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

controller

front

scripts

2 Answers 2

Comments

Comments

Linked

Related