pqina / jquery-filepond Goto Github PK

I am not familiar with node, so i use jquery-filepond, but i cannot activate the image preview with jquery, below is my code:

    <link rel="stylesheet" href="statics/filepond.css">
    <link rel="stylesheet" href="statics/filepond-plugin-image-preview.css">
    <script src="statics/jquery-3.1.1.js"></script>
    <script src="statics/filepond-plugin-image-preview.js"></script>
    <script src="statics/filepond.js"></script>
    <script src="statics/filepond.jquery.js"></script>

<input type="file" class="my-pond" name="filepond"/>

<script>
    $(function () {

        // Turn input element into a pond registerPlugin(FilePondPluginImagePreview)
        $('.my-pond').filepond();

        // Set allowMultiple property to true
        $('.my-pond').filepond('allowMultiple', true);

        // Set allowImageExifOrientation to true
        $('.my-pond').filepond('allowImageExifOrientation', true);

        // Set allowMultiple property to true
        $('.my-pond').filepond('allowImagePreview', true);

        // Listen for addfile event
        $('.my-pond').on('FilePond:addfile', function (e) {
            console.log('file added event', e);
        });

        // Manually add a file using the addfile method
        $('.my-pond').filepond('addFile', 'index.html').then(function (file) {
            console.log('file added', file);
        });

    });

but it's not working, error occurred as below:

filepond.jquery.js:89 $().filepond("allowImageExifOrientation") is an unknown property or method.
(anonymous) @ filepond.jquery.js:89
filepond.jquery.js:89 $().filepond("allowImagePreview") is an unknown property or method.

Jquery filepond. Using JQuery on an hbs page and uploading to a Node.js api. On the backend the photo is being saved to a user specific folder. Is there a way I can pass the path back so the filepond delete button works. I can also set a custom endpoint that deletes based on the user. I just didn't see in the docs how to do this with the jquery version.

Hi!

When I upload files to server i had files ids in hidden field, and that is working normal.

Problem when i open page to edit and have files id. i try to use addFiles

pond.setOptions({

        server: {
            url: './',
            process: {
                headers: {
                    "X-CSRF-Token": document.querySelector('input[name=_token]').value,
                },
                url: '/uploadimage',
            },
            revert: './a/',
            revert: './r/',
            load: './l/',
            fetch: './f/'
        },
    });


pond.addFiles([{
  serverId:1235,
            options: {
                type: 'local'
            }
}]);

it makes xdr http://bloodyland.info/news/load/%7B%22serverId%22%3A1235%2C%22options%22%3A%7B%22type%22%3A%22local%22%7D%7D

plase give my example to show already upload file in list

I do not to need upload them again, just have delete options

How can I show an error while selecting the same file name which was already uploaded.

How do i find the status of the upload?

pqina/filepond#263

$('#fform').on('submit',function(e) {
if (pond.status != 4) {
return false;
}
$(this).find(':input[type=submit]').hide();
return true;
});

Hi,

Is it possible to send the requested images via a form?

Thanks

Summary

Hello, thank you for the amazing library! I have an issue with reorderfiles event it's not trigger whenever I re-order the items. Other events are working well without any issue. Tried this with Firefox and faced with same issue.

How to reproduce

<input id="images" class="filepond-custom-container" />

<script>
$('#images').filepond({
        name: 'chapter_images[]',
        allowMultiple: true,
        storeAsFile: true,
        required: true,
        allowReorder: true,
        itemInsertLocation: 'after',
});

// Working well
$('#images').on('FilePond:removefile', function (e) {
        console.log('remove is triggered', e);
});

// Not working
$('#images').on('FilePond:onreorderfiles', function (e) {
        console.log('the collection is just being reordered', e);
});
</script>

Expected behaviour

Event should be triggered.

Additional information

hi my freinds .

i searched about this option in imagePreviewPlugin styles but i did not find any answer about that . my problem is about how to change styles of images in box and put them together in a row .

Hello fellow developer!

💡 If you want to submit a feature request, go right ahead!

🐜 If you've found a bug, please use the template below to report it.

The more details you provide, the more inclined other developers are to help you and the faster the problem is resolved.

If you think the issue is related FilePond itself and not the jQuery library or adapter, please submit the issue in the FilePond repository.

Please format code snippets using backticks and don't forget to set the appropriate language.
https://help.github.com/articles/creating-and-highlighting-code-blocks/

Summary

Filepond triggering revert action while submitting the form where Filepond is initialized with uploaded files;

How to reproduce

JSON:

'source' => 1,
        'options' => [
            'type' => 'local',
            'file' => [
                'name' => 'abc',
                'size' => 100,
                'type' => 'image/...',
            ],
            'metadata' => [
                'poster' => 'file_path',
            ],
        ],

COMMON:

(function($) {
    $.fn.filepond.registerPlugin(
        FilePondPluginFileValidateSize,
        FilePondPluginFileValidateType,
    );

    var filepondOptions = {
        credits: false,
        server: {
            url: '/filepond',
            process: '/upload',
            revert: '/destroy',
            restore: '/load?id=',
            load: '/load?id=',
        }
    };

    $.fn.filepond.setDefaults(filepondOptions);
})(jQuery);

INIT ELEMENTS:

files = [json];
$('#input_file').filepond({files: files})

Now, everything works fine, except, while submitting the form, it trigger the revert method and send an delete ajax request to the server.

Expected behaviour

revert or delete method/request should not be triggered automatically, it must be triggered by the user while clicking the revert button

Additional information

Bare with me.. I'm very new at this. I have the following code in jQuery and am trying to get the list of files using getFiles() method.

	FilePond.registerPlugin(
		FilePondPluginImagePreview,
		FilePondPluginImageExifOrientation,
		FilePondPluginFileValidateSize,
		FilePondPluginFileValidateType
	);

	$('.filePond').filepond({
		acceptedFileTypes: ['image/jpeg', 'video/mp4'],
		fileValidateTypeLabelExpectedTypesMap: { 'image/jpeg': '.jpg', 'video/mp4': '.mp4' },
		allowFileTypeValidation: true,
		instantUpload: true,
		labelIdle: 'Drag & Drop your pictures & video or <span class="filepond--label-action">Browse</span>',
		maxFileSize: '100MB',
		maxTotalFileSize: '100MB',
		server: {
			url: '/includes/ajax.asp',
			process: {
				url: '?Action=ProcessUpload',
				onload: test
			},
			fetch: null,
			revert: null
		}
	});

	function test() {
		console.log( FilePond.getFiles() );
	}

SUMMARY
After successfully processing a file the test() function executes and errors out with Uncaught TypeError: FilePond.getFiles is not a function

I have also tried using $('.filePond').filepond().getFiles() which also errors out.

EXPECTED BEHAVIOR
I would like to get a list of all the files processed.

Summary

When Image Preview Plugin is Enabled and a file is uploaded, Firefox Developer Edition crashes.

How to reproduce

Go to https://pqina.nl/filepond/#examples and upload a file

Expected behaviour

Uploaded file and preview

Additional information

N/A

Hi

Hope you are doing well!

I really like your jquery-filepond it's really good and user-friendly. I am facing the issue after browser the image i am not getting an upload button.

It will be very grateful if you can help me with this.
I am also attaching an image of how it's looking after I upload the file or images

### Is there any solution for photo rotate under this filepond jquery plugin?

When editing an image record that has already been uploaded, I do not know how to set the default image url.
(Sorry, my English is very poor)

I'm using jquery filepond on my project and i'm trying to raise error on process's onload
process: {
url: '/api/v1/fileuploader/upload',
method: 'POST',
timeout: 7000,
onload: function (response) {
console.log(response,this)
if (response.Code == 200) {
//on successful save
return response.Data;
} else {
//on saving failed on server/i've done validation in server
//todo raise on error sothat view so upload error..
return false;
}
},
onerror: null

guide me.

I faced with the same error that was described here
pqina/filepond#681

Hello,

I am trying to load several documents at the same time with Filepond.

On my Dev server, I don't have any problem, the documents load completely one after the other.

On the Production server, when I try to upload several documents, the upload freeze.
Then after a while (1-2min), the request is canceled and I get the error "POST net::ERR_HTTP2_PROTOCOL_ERROR" in the console (with Chrome). With Firefox, no error in console and the request is just canceled.
As soon as I remove an item (any item) from the list, the loading resumes.

The error callback doesn't give me any more information (the error parameter is empty and the status is undefined).

Has anyone ever had the same problem before? Does anyone have any idea where to look?

I use the latest version of Filepond with the jQuery adapter. I use the standard processing method (like the example in the documentation)

Thank you in advance.

Estou tentando trazer as fotos que estão no banco(Mysql) sem sucesso, estou usando Laravel 8, jquery e filepond.
Abaixo esta o meu código.

$.fn.filepond.registerPlugin(
FilePondPluginFileEncode,
FilePondPluginImagePreview,
FilePondPluginImageResize,
FilePondPluginFileValidateType,
FilePondPluginImageExifOrientation,
FilePondPluginImageCrop,
FilePondPluginImageTransform,
FilePondPluginFileMetadata,
FilePondPluginFileRename
);

    $.fn.filepond.setOptions({
        'name': 'file[]',
        'server': {
            process: {
                url: '{{ route('uploads') }}',
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                onload: (response) => {
                    folders.push(response);
                },
            },
            load: {
                url: '{{ route('fetch', $produto->id) }}',
                method: 'GET',
                headers: {
                    'Access-Control-Expose-Headers': 'Content-Disposition',
                    'Content-Disposition': 'inline; filename="my-file.jpg"',
                },
                withCredentials: false,
                timeout: 7000,
                onload: function(response) {
                    console.log(response)
                },
                onerror: function (res) {
                    console.log(res)
                }
            }

        },

    });
    // Turn input element into a pond
    $('.my-pond').filepond();

    $('.my-pond').filepond({
        'allowMultiple': true,
        'labelIdle': `<h5 class="text-center text-muted"><i class="fa fa-fw fa-picture-o pr-4 fa-4x" style="font-size: 100px;"></i></h5>
                    <h5 class="text-center">Arraste e solte suas Imagens aqui</h5>
                       <p class="text-center">Máximo de 10 imagens. Tamanho máximo 3MB.&nbsp;<br>Para maior qualidade envie imagens no formato JPG ou PNG.</p>`,
        'allowReorder': true,
        'maxFileSize': '3MB',
        'maxFiles': 10,
        'imagePreviewMaxHeight': 150,
        'allowFileRename': true,
        'allowImagePreview': true,
        'instantUpload': true,
        //'acceptedFileTypes': ['image/png','image/jpg'],
        'labelFileTypeNotAllowed': 'Só é permitido imagens png e jpg',

    });

I'm trying reload and show files ,I tried to extend

load: {
                    url: '/api/v1/fileuploader/load',
                    method: 'GET',
                    onload: function(response) {
                    
                    },
                    onerror: function (response) {
                     
                    }
                }

but problem is load api not making any requests.
how do i invoke load functionality manually?

Hi,

I am trying to use the addFile method to add image dynamically using jquery. I am getting addFile is not function error. How can i solve this?

Thanks in advance