filepond
filepond copied to clipboard
pqina
Ability to edit and remove for local files
Describe the Bug When adding the files property to a new FilePond instance for previously uploaded files to the server and adding the FilePondPluginFilePoster plugin which shows a preview image for those files, I am not given the option to edit or delete the file instead i am only presented with the option to revert.
To Reproduce Create a new instance of FilePond with some default files and include the FilePondPluginFilePoster plugin. Once the files are displayed, you will not be able to edit or delete them as you would when you upload a file.
Expected Behavior There should be an option to edit/modify and remove (not revert) the file as you would be able to when uploading a file.
Metadata Browser: Chrome 86.0.4240.193 OS: Windows 10 Enterprise Version 1809 FilePond Version: 4.23.1
Below is the sample code:
FilePond.registerPlugin(
FilePondPluginImageExifOrientation,
FilePondPluginImagePreview,
FilePondPluginImageCrop,
FilePondPluginImageResize,
FilePondPluginImageTransform,
FilePondPluginImageEdit,
FilePondPluginFileEncode,
FilePondPluginFileValidateSize,
FilePondPluginFileValidateType,
FilePondPluginFilePoster,
FilePondPluginImageValidateSize
);
var pond = FilePond.create(document.querySelector('.filepond'), {
imageEditInstantEdit: false,
allowProcess: false,
allowDrop: false,
styleButtonProcessItemPosition: 'left',
styleLoadIndicatorPosition: 'left',
styleProgressIndicatorPosition: 'left',
itemInsertLocation: 'after',
imageEditEditor: Doka.create({
cropAllowInstructionZoom: true,
utils: ['crop', 'color', 'markup'],
}),
allowMultiple: true,
maxFileSize: '26MB',
instantUpload: true,
files: [source: myUrl,
options: {
type: 'local',
metadata: {
poster: myUrl
}
}
]
});
We require the issue template to be filled out on all new issues. The issue template helps us collect all the information we need to address your submission efficiently.
The more information we have, the faster the issue can be resolved.
We will be able to more closely look at your issue once the issue template has been filled out. This issue will be closed in 5 days if the above is not addressed.
@michael-ciavattone did you found the solution. I facing the same issue as well.
No I have not. I am still awaiting a response but trying to resolve it on my own hasn't worked out as of yet.
@rikschennink just checking in to see if you've had a chance to review the issue.
@michael-ciavattone I have, just haven't gotten around to inspecting it further.
This renders a remove button and edit button.
FilePond.registerPlugin(
FilePondPluginImageExifOrientation,
FilePondPluginImagePreview,
FilePondPluginFilePoster,
FilePondPluginImageResize,
FilePondPluginImageCrop,
FilePondPluginFileValidateType,
FilePondPluginFileValidateSize,
FilePondPluginImageTransform,
FilePondPluginImageEdit,
FilePondPluginFileEncode
);
var pond = FilePond.create(document.querySelector('input'), {
server: {
load: (src, load) => {
console.log(src);
fetch(src)
.then(res => res.blob())
.then(load)
}
},
// Configure Doka
imageEditEditor: Doka.create({}),
files: [
{
source: '../data/colors.jpeg',
options: {
type: 'local',
metadata: { poster: '../data/colors.jpeg' }
}
}
]
});
I believe currently some button positions unfortunately don't work as advertised. So try to remove these
styleButtonProcessItemPosition: 'left',
styleLoadIndicatorPosition: 'left',
styleProgressIndicatorPosition: 'left',
I have this but it still does not render a remove or edit button. Is it something obvious that i am missing? It will preview the image but the size shows 0 bytes and no edit icon appears.
FilePond.registerPlugin(
FilePondPluginImageExifOrientation,
FilePondPluginImagePreview,
FilePondPluginFilePoster,
FilePondPluginImageResize,
FilePondPluginImageTransform,
FilePondPluginImageCrop,
FilePondPluginFileValidateType,
FilePondPluginFileValidateSize,
FilePondPluginImageTransform,
FilePondPluginImageEdit,
FilePondPluginFileEncode,
FilePondPluginImageValidateSize
);
var pond = FilePond.create(document.querySelector('.filepond' ), {
allowProcess: false,
allowDrop: false,
itemInsertLocation: 'after',
checkValidity: true,
// configure Doka
imageEditEditor: Doka.create({}),
allowMultiple: true,
maxFileSize: '26MB',
instantUpload: true,
server: {
url: '',
load: function(src, load) {
$.ajax({
url: src,
success: function () {
load();
}
});
},
files: [
{
// the server file reference
source: myFileUrl,
// set type to local to indicate an already uploaded file
options: {
type: 'local',
// pass poster property
metadata: {
poster: myFileUrl
}
}
}
]
});
I have this but it still does not render a remove or edit button. Is it something obvious that i am missing? It will preview the image but the size shows 0 bytes and no edit icon appears.
FilePond.registerPlugin( FilePondPluginImageExifOrientation, FilePondPluginImagePreview, FilePondPluginFilePoster, FilePondPluginImageResize, FilePondPluginImageTransform, FilePondPluginImageCrop, FilePondPluginFileValidateType, FilePondPluginFileValidateSize, FilePondPluginImageTransform, FilePondPluginImageEdit, FilePondPluginFileEncode, FilePondPluginImageValidateSize ); var pond = FilePond.create(document.querySelector('.filepond' ), { allowProcess: false, allowDrop: false, itemInsertLocation: 'after', checkValidity: true, // configure Doka imageEditEditor: Doka.create({}), allowMultiple: true, maxFileSize: '26MB', instantUpload: true, server: { url: '', load: function(src, load) { $.ajax({ url: src, success: function () { load(); } }); }, files: [ { // the server file reference source: myFileUrl, // set type to local to indicate an already uploaded file options: { type: 'local', // pass poster property metadata: { poster: myFileUrl } } } ] });
For me still cannot see the edit button.
For file opstions you can add file info as below
` { // the server file reference source: '{{ @$file->id }}',
// set type to local to indicate an already uploaded file
options: {
type: 'local',
// stub file information
file: {
name: '{{ @$file->file_name }}',
size: '{{ @$file->size }}',
type: '{{ @$file->mime_type }}'
},
// pass poster property
metadata: {
poster: '{{ @$file ? $file->getUrl("full") : "" }}'
}
}
},`
@shahrizal96 when i pass in file information, such as the name, it no longer calls the load function but still no edit icon.
@michael-ciavattone i would copy paste my example and then work from there.
@shahrizal96 when i pass in file information, such as the name, it no longer calls the load function but still no edit icon.
Ya, should not pass the file info. Now working?
@michael-ciavattone i would copy paste my example and then work from there.
Hi. I already follow your load code, images is shown however still no edit button. When I inspect also the edit button is missing. What is expected response? Btw my src is from aws s3.
My response
My load
load: (src, load) => { var myRequest = new Request(src, {method: 'GET', mode: 'no-cors', credentials: 'include'}); console.log(myRequest) fetch(myRequest).then(response => { console.log(response) response.blob().then(myBlob => load(myBlob)); }); },
@shahrizal96 when i pass in file information, such as the name, it no longer calls the load function but still no edit icon.
Hi. Solve already the issue? If yes, mind to share?
@shahrizal96 hi sir, do you solve the issue? I also found the similar issue is when passing file information, it no longer call the load function (Example 1), and we cannot use removeFile() function to delete file from the server (FilePond.removeFile(123)).
Example 1:
It will call the load with following params:
{
source: 123,
options: {
type: 'local'
}
}
It will not call the load with extra file params:
{
source: 123,
options: {
type: 'local',
file: {
name: file.name,
size: file.size,
type: file.type
}
}
}
