I am building a web service where a user can upload and configure a 'card' which inherits a live preview of the vue instance as you modify the configurator component, the uploading works great throughout however I have narrowed it down to a total of 5 images allowed, where anything more will crash chrome on accordian tab change, here is a preview of the tab.

A preview of the uploading

Once complete we can swap tabs

Swapping tab back to the upload images accordian tab, crashes after showing the content!

If the max-files setting is set to 5, it works fine with no crashing, it only happens when 5+ images are used, which leads me to believe it could be a resulting issue with filepond

Safari does not produce a crash.

| Environment | Version |------------- | ----------- | OS | MacOS | Device | Macbook Pro | Browser | Chrome Version 76.0.3809.87 (Official Build) (64-bit)

I have received a report from a user that a feature disappeared recently. Previously it was possible to drag and re-corder files before uploading them. Now it is not possible any more. Is this intentional?

I have checked the documentation and commit log but could not find anything related to this change.

First of all.. great plugin. Thanks to the authors.

Here is what noted.

1. Uploaded 10 photos (options --- parallel uploads:10, max uploads: 50)
2. I see some uploading percentage on all the files ( say 20%).
3. Now, I go to another tab on the browser ( do some browsing)
4. Until I come back to my upload screen, the progress percentage is not changing.. though files received & processed by server.

Summary

When using an image editor to edit the image (like Doka) it doesn't fire an event to let you know that the image has been edited.

Expected behaviour

I expect a custom event to be called like onfileedit or just onfileadd for a more immutable approach with the file as argument.

Additional information

Because I want to handle the upload process myself I manually call filepond.processFile which works fine for just adding images, but if you edit them there's no event to track that and upload the edited image.

Versions

"filepond": "^3.5.1",
"filepond-plugin-image-crop": "^2.0.0",
"filepond-plugin-image-edit": "^1.0.1",
"filepond-plugin-image-exif-orientation": "^1.0.3",
"filepond-plugin-image-preview": "^3.1.4",
"filepond-plugin-image-resize": "^2.0.1",
"filepond-plugin-image-transform": "^3.1.0",

I have successfully uploaded the files over the server with this plugin, now i want to display the already uploaded files ( residing on S3 bucket). Even if i use :files property, i dont get a preview of the image. So my question is, what is the best way to display the uploaded images/URL ?? (in my case AWS S3 url)

<file-pond
        name="filepond"
        ref="pond"
        class="user-profile-picture"
        label-idle='Drag & Drop your files or <span class="filepond--label-action"> Browse </span>'
        
        dropValidation="true"
        instantUpload="false"    
        @processfile="updateFiles"
        :server="server"
        :files = myFiles
        /> 

return {
      myFiles: [{
          source: "https://www.google.com/logos/doodles/2018/baba-amtes-104th-birthday-6729609885253632-s.png",
          options:{
                type: 'remote'
          }
      }],
}

Summary

FilePond hangs in uploading state on Firefox 52

How to reproduce

Use Firefox 52, either natively or via Browserstack. Go to www.ilovefreegle.org Click on Give Enter a UK postcode e.g. PR3 2NX and click Next Click Add Photos Click the Browse button Select a photo file

The entire browser locks at this point.

I haven't done a standalone demo because I think this is probably not related to my code - I see the same thing on https://codesandbox.io/s/github/KimGenius/React-file-pond/tree/master/?from-embed, for example.

Expected behaviour

File is uploaded and process callback is triggered.

This works on later versions of Firefox.

Additional information

I've checked the return from supported(), which returns true.

| Environment | Version |------------- | ----------- | OS | Windows | Device | BrowserStack W7 PC | Browser | Firefox 52

Hi there,

I'm using FilePond to upload a file within in an interface for a data object. The user can then go back to edit that data object, where I would like to show them the currently uploaded file and give them the option to delete that one and upload another.

FilePond does this very well, as I can add the previously uploaded file data to the files array and use the load part of the server API to show the file's name and size.

This is great, except it seems to require that I return the file contents in the server load request, so it appears that each time the user visits the page of a data object FilePond will download the file, which isn't necessary.

I might be missing something obvious, but is there a way to simply add the file details (e.g. name and size) to the files array instead of performing a request for the file?

Thanks!

Hello! I try updated my file from Doka, but when sending files to the server, the base64 file remains the same as it was. The preview of the image changes, but the image itself is not when it is sent.

import {
    // editor
    openEditor,
    processImage,
    createDefaultImageReader,
    createDefaultImageWriter,
    imageOrienter,
    locale_en_gb,
    legacyDataToImageState,
    // plugins
    setPlugins,
    plugin_crop,
    plugin_crop_defaults,
    plugin_crop_locale_en_gb,
    plugin_finetune,
    plugin_finetune_defaults,
    plugin_finetune_locale_en_gb,
    plugin_filter,
    plugin_filter_defaults,
    plugin_filter_locale_en_gb,
    plugin_decorate,
    plugin_decorate_defaults,
    plugin_decorate_locale_en_gb,
    component_shape_editor_locale_en_gb,
} from '/assets/uploader/doka/doka.js';
setPlugins(plugin_crop, plugin_finetune, plugin_filter, plugin_decorate);
FilePond.registerPlugin(
    FilePondPluginFileValidateType,
    FilePondPluginImageEditor,
    FilePondPluginFilePoster,
    FilePondPluginImageCrop,
    FilePondPluginFileMetadata,
    FilePondPluginImageTransform,
    FilePondPluginFileEncode
);

FilePond.setOptions({
    allowMultiple: true,
    allowReorder: true,
    onconfirm: (output) => {
        console.log(output);
    },
    onpreparefile: (file, output) => {
        console.log(file, output, 'file')
    },
    imageTransformImageFilter: (item) =>
        new Promise((resolve) => {
            resolve(false);
        }),
    onpreparefile: (fileItem, res) => {
        console.log(res);
    },
    // Added this ----------------------------------------
    onreorderfiles(files, origin, target) {
    }
});

pondImg = FilePond.create(document.querySelector('#filepond-imgs'), {
    imageEditor: {
        // map legacy data objects to new imageState objects
        legacyDataToImageState: legacyDataToImageState,

        // used to create the editor, receives editor configuration, should return an editor instance
        createEditor: openEditor,

        // Required, used for reading the image data
        imageReader: [createDefaultImageReader],

        // optionally. can leave out when not generating a preview thumbnail and/or output image
        imageWriter: [createDefaultImageWriter],

        // used to generate poster images, runs an editor in the background
        imageProcessor: processImage,

        // editor options
        editorOptions: {
            imageOrienter: imageOrienter,
            ...plugin_crop_defaults,
            ...plugin_finetune_defaults,
            ...plugin_filter_defaults,
            ...plugin_decorate_defaults,
            locale: {
                ...locale_en_gb,
                ...plugin_crop_locale_en_gb,
                ...plugin_finetune_locale_en_gb,
                ...plugin_filter_locale_en_gb,
                ...plugin_decorate_locale_en_gb,
            },
        },
    },
    filePosterMaxHeight: 100
});

And code sending on click my button:

let filesImg = pondImg.getFiles();
let formData = new FormData();
formData.append('object_id', response.object_id);
$.each(pondImg.getFiles(), function (i, file) {
        formData.append('X', file.file);
         formData.append('X['+i+']', file.getFileEncodeBase64String());
 })
$.ajax({
     url: "/file_upload",
    method: "POST",
    data: formData,
    cache: false,
    processData: false,
    contentType: false
 }).done((response_files) => {
     console.log(response_files);
});

On server all time i get the same string base64. Please help me.

Hi,

I am not sure why but I can not manage to get filepond to upload a transformed file with the proper exif orientation.

The preview is working as expected, alas no matter what i do the uploaded file is always missing the proper orientation.

I am really turning crazy, the metadata file generated returns the orientation of the picture taken. The resizing is applied all right but the exif correction is not applied.

This is probably not the right place to come for help so feel free to delete this. But any pointers should the answer be an obvious thing would be most welcome.

Thanks for an amazing module that is filepond.

<input type="file" class="filepond" accept="image/png, image/jpeg">
		
<!-- Load FilePond library -->
<script src="https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-rename/dist/filepond-plugin-file-rename.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>

<script>
FilePond.registerPlugin(FilePondPluginImageExifOrientation,FilePondPluginFileValidateType,FilePondPluginFileRename,FilePondPluginImagePreview,FilePondPluginImageResize,FilePondPluginImageTransform);
 
const inputElement = document.querySelector('input[type="file"]');

const pond = FilePond.create(inputElement, {
	labelIdle: `<span class="filepond--label-action" style="padding: 0px ; margin: 0px">Take animal picture</span>`,
	imageResizeTargetWidth: 800,
	imageTransformOutputMimeType: 'image/jpeg',
	imageTransformOutputQuality: 85,
	imagePreviewHeight: 350,
	}
);

FilePond.setOptions({
	server: 'filepond/',
        fileRenameFunction: (file) => {
		return `tmp_patient${file.extension}`;
		}
	})
</script>

First of all thanks for this component, it's great!

On the React version, when uploading a picture, I get the preview and everything works great, then I store in my resource the picture url. But then when I consult my resource, I try to set up the initial state with a file, but somehow I can't get the preview of that image url.

My code :

<FilePond allowMultiple={false} server={{process: this.handleProcessing.bind(this)}}>
    <File source='http://liviogama.com/img/Pioneer-CDJ2000-Nexus.png' type='local'/>
</FilePond>

Result :

Added getItemWidth function to be used in dragItem to get the number of rows and columns. Combining this information with our drag position we can find out where in the grid (column mod is a grid of one column) we are and how the index should update.

Known issue: If user drags item left or right outside of root it will continue updating the index.

Bumps qs from 6.5.2 to 6.5.3.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Is there an existing issue for this?

• [X] I have searched the existing issues

Have you updated FilePond and its plugins?

• [X] I have updated FilePond and its plugins

Describe the bug

The following code is expected to create a hidden field with the base64String but nothing is happening, i am not getting the base64String in the request neither as a hidden field. I am in Laravel Blade

Reproduction

    <input type="file" multiple name="image" />

    <!-- Get FilePond JavaScript and its plugins from the CDN -->
    <script src="https://unpkg.com/filepond/dist/filepond.js"></script>
    <script src="https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.js"></script>
    <script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script>

    <!-- FilePond init script -->
    <script>

    // Register plugins
    FilePond.registerPlugin(
        FilePondPluginFileEncode,
        FilePondPluginFileValidateSize,
    );

    // Set default FilePond options
    FilePond.setOptions({

        // allow multiple files
        allowMultiple: true,

        // allow file encoding
        allowFileEncode: true,

        // maximum allowed file size
        maxFileSize: '255KB',

        // upload to this server end point
        server:{
            process: '/image-upload',
            revert: '/image-delete',
            headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            }
    });

    // Turn a file input into a file pond
    var pond = FilePond.create(document.querySelector('input[type="file"]'));

        pond.onaddfile = (err, item) => {

        if (err) {
            console.warn(err);
            return;
        }

        const dataURL = item.getFileEncodeDataURL();

        const base64String = item.getFileEncodeBase64String();

        }

    </script>

Environment

- Device:
- OS:
- Browser:

Is there an existing issue for this?

• [X] I have searched the existing issues

Is your feature request related to a problem? Please describe.

I'm using the reorder feature to drag my images in order and this works perfectly, the 'problem' occurs when im trying to save this order of images. The initial images will be posted with a hidden input and their indentifier as the value and the files get send through a file input. On the PHP side we would have to retrieve these values in 2 different ways, the $_POST for the initial file identifiers and the $_FILES for any extra uploaded files. Now these 2 properties have their own index, so the order we set in the filepond instance is lost.

Describe the solution you'd like

I seems like we could easily solve this by forcing the index for each input based on their rank, so instead of this:

<fieldset class="filepond--data">
    <input type="hidden" name="images[]" value="3">
    <input type="file" name="images[]">
    <input type="hidden" name="images[]" value="4">
</fieldset>

it will become:

<fieldset class="filepond--data">
    <input type="hidden" name="images[0]" value="3">
    <input type="file" name="images[1]">
    <input type="hidden" name="images[2]" value="4">
</fieldset>

Then we can easily merge the $_POST and $_FILES without problems because they have their own indexes.

Describe alternatives you've considered

The alternatives would be keeping track of these kind of values through their own hidden input. So we send an input array for the order of the files. I dont like this because then there are also other things we should keep track of that the solutation above would prevent. For example, if certain files are deleted.

Is there an existing issue for this?

• [X] I have searched the existing issues

Have you updated FilePond and its plugins?

• [X] I have updated FilePond and its plugins

Describe the bug

This problem is occurred only in Chrome browser and in case when you are using drag and drop methods to add files to the filepond uploading area. To view the problem you can log the data in onwarning event like:

onwarning: (oObject) => {
                    const { body, type } = oObject;
                    if (type === 'warning' && body === 'Max files') 
                        console.log(oObject);
                },

Reproduction

1. set option maxFiles to 5
2. open area with files and select 5 items -> then drag and drop them to filepond uploading area
3. remove 4 files from filepond uploading area after finishing
4. open area with files again and drag and drop at least one file

So, you will see that now there are only 2 files in filepond area, but onwarning still occurs with Max files error.

Environment

- Device: PC
- OS: MAC Sierra, Windows 11
- Browser: Chrome 99+