FilePond send a blank request to server - php

Question

i use Laravel-filepond and Vue FilePond.
but FilePond send a blank request to server.
this is my codes:
*UserComponent.vue
<template>
<div class="container">
<file-pond
name="Profile"
ref="pond"
label-idle="drag & drop"
v-bind:allow-multiple="false"
accepted-file-types="image/jpeg, image/png"
v-bind:files="userFile"
v-bind:server="{
url: '/panel/filepond',
timeout: 7000,
process: {
url: '/process',
method: 'POST',
headers: {
'X-CSRF-TOKEN': this.get_meta('csrf-token'),
},
}
}"
v-on:init="handleFilePondInit"/>
</div>
</template>
<script>
import vueFilePond, {setOptions} from 'vue-filepond';
import 'filepond/dist/filepond.min.css';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginImageEdit from 'filepond-plugin-image-edit';
const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview);
export default {
data() {
return {
userFile: [],
}
},
methods: {
handleFilePondInit: function () {
console.log('FilePond has initialized');
}
},
components: {
FilePond
},
}
</script>
FilePondController.php Original file
<?php
namespace Sopamo\LaravelFilepond\Http\Controllers;
use function dd;
use Illuminate\Http\Request;
use Illuminate\Routing\Controller as BaseController;
use Sopamo\LaravelFilepond\Filepond;
class FilepondController extends BaseController
{
private $filepond;
public function __construct(Filepond $filepond)
{
$this->filepond = $filepond;
}
public function upload(Request $request)
{
dd($request->all());
}
}
when I upload a file on client side (in default response with 422), I can not find it on my server.
FrameWorks & Repository is on last version.
Response
[]

Answer 1

According to the author, you are sending the metadata instead of the file itself. I solved this using the advanced custom process function that you can found in documentation. There you can find the comments about what almost every part of the code does.
data() {
return {
server: {
url: 'http://base-url.test',
process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
const formData = new FormData();
formData.append(fieldName, file, file.name);
const request = new XMLHttpRequest();
request.open('POST', 'url-to-post-to');
request.setRequestHeader('X-CSRF-TOKEN', 'your-csrf-token');
request.upload.onprogress = (e) => {
progress(e.lengthComputable, e.loaded, e.total);
};
request.onload = function () {
if (request.status >= 200 && request.status < 300) {
load(request.responseText);
} else {
error('Error');
}
};
request.send(formData);
return {
abort: () => {
request.abort();
abort();
},
};
},
},
}
},
Then you only need to bind it:
<template>
<div class="container">
<file-pond
name="Profile"
ref="pond"
label-idle="drag & drop"
v-bind:allow-multiple="false"
accepted-file-types="image/jpeg, image/png"
v-bind:files="userFile"
v-bind:server="server"
v-on:init="handleFilePondInit" />
</div>
</template>
responseText is the unique Id from the server. Maybe you want to emit it to parent component:
data() {
return {
server: {
url: 'http://base-url.test',
process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
const thisReference = this;
// Other code
request.onload = function () {
if (request.status >= 200 && request.status < 300) {
thisReference.
thisReference.$emit('my-event', request.responseText);
load(request.responseText);
} else {
error('Error');
}
};
// Other code
},
},
}
},
Pretty similar if you want to know what file has been reverted (in this case, you need to response from server with the same id you sent):
data() {
return {
server: {
// Process, url, etc.
revert: {
url: '/url-to-delete',
method: 'DELETE',
headers: {
'X-CSRF-TOKEN': 'your-csrf-token'
},
onload: (idDeleted) => this.$emit('my-event', idDeleted)
},
},
}
},