My Laravel/Vue JS web app allows users to upload files and photos. Everything runs smoothly except when accessed on Android devices, where the axios call seems to get stuck indefinitely. Below is the code snippet causing the issue:
Vue JS component
<template>
<span>
<v-btn @click="pickFile">
<small>{{ label }}</small>
</v-btn>
<input type="file" style="
visibility:hidden;visibility: hidden;
position: absolute;
width: 1px;
height: 1px;
left: 0;
right: 0;"
ref="upload" :accept="accept" @change="onFilePicked"> // accept is defined in the element's props
</span>
</template>
Vue JS components' methods
methods: {
pickFile() {
this.$refs.upload.click()
},
onFilePicked (e) {
const files = e.target.files
let elem = this
let valid = true
Event.$emit('uploading')
if(files[0] !== undefined) {
elem.fileName = files[0].name
if(elem.fileName.lastIndexOf('.') <= 0) {
return
}
const fr = new FileReader ()
fr.readAsDataURL(files[0])
fr.addEventListener('load', () => {
let formData = new FormData();
formData.append('file',files[0]);
formData.append('document',elem.document);
formData.append('pedido',elem.pedido);
console.log(formData)
axios.post('/files/upload-file',formData, { headers: {'Content-Type': 'multipart/form-data'}})
.then(response => {
//console.log(response);
Event.$emit('fileUploaded', response.data.filepath);
Event.$emit('alert', 'Your file has been successfully saved');
});
});
} else {
elem.fileName = ''
}
}
},
On the server side, I utilize the Input, Storage and File facades for disk writing, and store a FileEntry in my database. While this function operates flawlessly on computers and iOS devices, it encounters an issue on Android devices. Could there be any specific considerations for Android that I've overlooked?