I’m using Vue JS 2 to create an image uploader. My input has a change
function which runs a function and sets my file on v-model
property.
When I console.log
my data, all what’s set is an empty object rather than the image, this is also causing my Vee Validate rule to fail as it thinks it’s empty.
What am I missing?
My HTML for uploading a logo
<div>
<validation-provider
name="base64_logo"
rules="mimes:image/jpeg,image/png"
v-slot="{ errors, classes, validate }"
>
<label for="base64_logo" class="block text-sm font-medium text-gray-500 mb-2">
Brand logo <em>(PNG or JPG)</em>
</label>
<div class="mt-1 relative rounded-md shadow-sm">
<input @change="selectFilesToUpload('base64_logo', $event.target.files[0]); validate()" type="file" name="base64_logo" id="base64_logo" :class="classes" class="focus:ring-green-500 focus:border-green-500 block w-full py-3 px-4 sm:text-sm border border-gray-300 rounded-md" accept="image/png, image/jpeg">
</div>
<span class="text-xs text-red-500">{{ errors[0] }}</span>
</validation-provider>
</div>
The following function runs:
/*
** Select files to upload (file uploader)
*/
selectFilesToUpload (model, file) {
try {
this.form[model] = file
} catch (err) { }
},
Which form
should now contain everything associated with my image, but when adding an image, it shows as an empty object (see attached)
I’ve also tried a JSON.stringify
before setting my model, no luck here either.