Level 5
To know what I mean by the list, here is the link for documentation of el-upload component.
Hello,
Code of component:
<el-upload
:action="'/api/attendances/' + id + '/attachment'"
name="file[]"
:on-success="handleSuccess"
:on-remove="handleRemove"
:file-list="fileList">
<el-button size="small" type="primary">Attach your Excuse</el-button>
<div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
</el-upload>
<script>
export default {
props: {
id: Number,
},
data() {
return {
fileList: [],
}
},
methods: {
handleRemove(file, fileList) {
let vm = this
axios.delete('/api/upload/' + file.uid)
.then(function () {
let index = _.findIndex(vm.fileList, ['uid', file.uid])
vm.$delete(vm.fileList, index)
})
.catch(function (error) {
console.log(error);
});
},
handleSuccess(response, file, fileList) {
var vm = this
_.map(response, function (data) {
file['uid'] = data
})
vm.fileList = fileList;
this.fileList = fileList;
},
}
}
</script>
Code of Controller:
public function store(Request $request, Attendance $attendance)
{
$att = Attendance::find($attendance->id);
$uploadId = array();
if ( $files = $request->file('file')) {
foreach ($request->file('file') as $key => $file) {
$name = time() . $key . $file->getClientOriginalName();
$filename = $file->move('files', $name);
$uploadId[] = $att->attachment()->create([
'name' => $name,
'path' => $filename])->id;
}
}
return response()->json($uploadId, 200);
}
Problem:
Uploading an image is stored correctly, but it doesn't show the image at the list.
This is the error got: Error in render: "TypeError: Cannot read property 'replace' of undefined"
Note: I'm using ElementUI for uploading the image.
Any tip, please.
Please or to participate in this conversation.