pqina / filepond Goto Github PK

🌊 A flexible and fun JavaScript file upload library

License: MIT License

CSS 4.05% JavaScript 95.81% HTML 0.15%

file-upload drag-and-drop javascript vanilla plugin filepond image-processing

filepond's Introduction

A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.

FilePond adapters are available for React, Vue, Angular, Svelte, and jQuery

Buy me a Coffee / Use FilePond with Pintura / Dev updates on Twitter

Core Features

Accepts directories, files, blobs, local URLs, remote URLs and Data URIs.
Drop files, select on filesystem, copy and paste files, or add files using the API.
Async uploads with AJAX, supports chunk uploads, can encode files as base64 data and send along form post.
Accessible, tested with AT software like VoiceOver and JAWS, navigable by Keyboard.
Image optimization, automatic image resizing, cropping, filtering, and fixes EXIF orientation.
Responsive, automatically scales to available space, is functional on both mobile and desktop devices.

Learn more about FilePond

Also need Image Editing?

Pintura the modern JavaScript Image Editor is what you're looking for. Pintura supports setting crop aspect ratios, resizing, rotating, cropping, and flipping images. Above all, it integrates beautifully with FilePond.

Learn more about Pintura

FilePond Plugins

Adapters

Backend

Quick Start

Install using npm:

npm install filepond

Then import in your project:

import * as FilePond from 'filepond';

// Create a multi file upload component
const pond = FilePond.create({
    multiple: true,
    name: 'filepond'
});

// Add it to the DOM
document.body.appendChild(pond.element);

Or get it from a CDN:

<!DOCTYPE html>
<html>
<head>
  <title>FilePond from CDN</title>

  <!-- Filepond stylesheet -->
  <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">

</head>
<body>

  <!-- We'll transform this input into a pond -->
  <input type="file" class="filepond">

  <!-- Load FilePond library -->
  <script src="https://unpkg.com/filepond/dist/filepond.js"></script>

  <!-- Turn all file input elements into ponds -->
  <script>
  FilePond.parse(document.body);
  </script>

</body>
</html>

Getting started with FilePond

Internationalization

The locale folder contains different language files, PR's are welcome, you can use locale files like this:

import pt_BR from 'filepond/locale/pt-br.js';

FilePond.setOptions(pt_BR);

Contributing

At the moment test coverage is not great, it's around 65%. To accept pull requests the tests need to be better, any help to improve them is very much appreciated.

Tests are based on Jest and can be run with npm run test

To build the library run npm run build

Publications

Browser Compatibility

FilePond is compatible with a wide range of desktop and mobile browsers, the oldest explicitly supported browser is IE11, for best cross browser support add FilePond Polyfill and Babel polyfill to your project.

FilePond uses BrowserStack for compatibility testing.

License

Please don't remove or change the disclaimers in the source files

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

filepond's People

Contributors

Stargazers

Watchers

Forkers

bansicloud kkac baa-archieve sisuware safarishi intensify leijingdao faghani kustomzone shaunstanislauslau lyrl kinnamuri penguinofwar andyprasetya linecode alvarlaigna thanhthientk wg-com umarmughal amirfawzy aws-europe luisrain folkevil mengyou658 furqanfreed mohity47 phpsmarter rocketgaea kidzhy lucanos fengweijp 5-digits ichenzhifan dagnisslogis philliez mikeleshtembari pandahisham adioslabs ktkaushik boxinabox bsidio asa1230 ariborneo alx100 a973c moyus zmilan niilante alexanderbluhm topojuly pathvine alexlaforge chadgonzales texiontech lottepie touchx liujianbing214 ynx0 casson kofeve siberianbear caironm unetics sumshare adri78 hisayan shop2007 jimjslibs jiehanlin yaronlp1 omkarkirpan tommytong2002 orandih kengitahi cybernetics hrmshandy voolaacodetome tweezz seyedabbasseyedi hugoren aliciawangeci js-mk kazimolmez kalle81 kucukharf parweb qvmaster galaxyshen sunnyday90210 mikodes stevexyz taytus arrlancore pitsanujiw mexarm ykankaya xemasiv jdrew1303 tarajavascript mul14

filepond's Issues

File upload not cooperating with PHP upload script

Hello,

I am using a tested and proven php snippet to get the file and upload it to a server directory. However, I am now getting a getimagesize error - (getimagesize(): Filename cannot be empty). Perhaps i am missing something in this library that is hindering this and causing the script to think the filename is empty.

<input type="file" name="fileToUpload" id="fileToUpload" class="filepond" accept="image/png">

if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    } else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}

File Type Validation Issues

I'm having trouble validating file types using the File Type Validation plugin

Here's my jQuery:

$('.filepond').filepond({
    server: './',
    acceptedFileTypes: [
        'application/doc',
        'application/pdf',
        'application/rtf',
        'application/txt',
        'application/odf',
        '.docx',
        'application/pages'
    ]
});

PDF's are passing the validation, but nothing else is. I've tried removing the "application/" text and using an extension with a dot (.doc) too, but with no luck.

Also, check out the attached screenshot. Is there anyway to style this so the file types subtitle doesn't push everything out of view?

Access to the raw response object

I'm uploading a file to a temp bucket in my app. I'm trying to integrate filepond but am having a hard time getting access to the raw response object on upload success. As part of that payload there is a temp file ID I need to get to submit with a later request. Is there a way to do that? It's kind of a deal breaker for using filepond.

Error not triggering on incorrect file type uploaded through drag and drop

Everything works perfectly fine when uploading via the "Browse" link provided by the plugin, but when I drag and drop a file that is an invalid type, nothing happens. Filepond does not produce the same red error component as it does when uploading via the link. However, drag and drop does work perfectly fine for uploading - the issue lies only with producing the error component. Is this a known bug, or could it possibly be a configuration issue? I'd be happy to dive in deeper if you need more information regarding the error/anything else I can do to help.

Events don't get triggered

Hi,

I'm figuring out which file upload library to use in my project. I bumped into yours and am giving it a try.
For unknown reason, events don't seem to be triggered.

What am I doing wrong?

https://jsfiddle.net/6j2h8trL/7/

Automatically load included plugins

Hi again !

Although it's great to be able to load plugins selectively, it would be great to have a bundled versions of filepond that includes all plugins.

Also, it would be wonderful if plugins were able to auto register themselves if they have been loaded before filepond. I'm using standard script tags (so no vue, react or anything) and basically, since the plugin is declared as a global variable, it's just a matter of checking if the variable is defined to register the plugin on load.

Example for picture upload not working for me

Hi, I tried using the picture upload example in the website and it failed with JS errors in both FF and Chrome. I'm on GNU/Linux if that makes any difference. Could it be a problem here or with the specific image?

FF 52 console:
https://alexa.pro.br/pond/ff.jpg

Chrome 57 console:
https://alexa.pro.br/pond/chrome.jpg

Picture used as test:
https://alexa.pro.br/pond/Landscape_5.jpg

Best wishes.

[React] Can't load File preview from URL

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 :

multiple uploads using the same name

Hello,

I'm trying to use the multiple uploads feature, but it seems that the hidden fields created to store the temporary id use all the same name (and not the array notation, like filepond[]).

Therefore, when I post the form, only one id gets through.

In your examples on the website, there is no mention of any other setting

<input type="file" 
    class="filepond"
    name="filepond" 
    multiple 
    data-max-file-size="3MB"
    data-max-files="3">

I'm currently using multiple attribute (although I use multiple="multiple" but I don't expect it to work differently) and also using allowMultiple option.

Any help is appreciated!

How to get compressed/resized image?

How to get the result of image after uploading process?

I tried the codes below:

$('.filepond').on('FilePond:processfile', function(e) {
            if (e.detail.error) {
                console.log('Oh no');
                return;
            }
            console.log('File processed', e.detail.file);
        });

but when i inspect back the image size or dimension is still the same as original file.

Allow only adding one file at a time

Hi @rikschennink,

I want to allow the user to add one file at a time and able to add 10 files maximum. Hence, the options I have is:

const _inputElement = document.querySelector('input[type="file"]');
    _pond = FilePond.create( _inputElement, {
      allowMultiple: false,
      maxFiles: 10,
      imageCropAspectRatio: '1:1',
      maxFileSize: '3MB',
      instantUpload: false,
      acceptedFileTypes: ['image/jpeg'], // Only allow jpeg file type.
      imageResizeTargetWidth: Meteor.settings.public.image.maxWidth,
      imageResizeTargetHeight: Meteor.settings.public.image.maxHeight,
      imageTransformOutputMimeType: 'image/jpeg',
      imageTransformOutputQuality: 100
    });

However, the FilePond wouldn't let me add more files after the first file. The preview of the first photo covers the entire pond area so that the "Drag & Drop your files or Browse" area is hidden. Is there any way to configure the FilePond properly for this purpose? I can remove the photo in the preview queue of the pond upon the addition of each photo, but this seems like not the proper way to achieve this.

Filepond inside accordion does not have the right height

When placing the filepond enhanced file input inside an accordion, the height of the "drag and drop" zone is not calculated correctly.

See fiddlejs

Questions about Filepond that are not clear from the documentation

I currently use Slim image cropper to handle image uploads in a project. And with what I have read so far, implementing this in lieu of Slim would be a walk in the park. But I have some questions.

In the profile picture selection example, can I pass an external URL of an image (say from S3 or CloudFront) to the preview area and have the image loaded into the preview area? I know this is possible with Slim but Slim downloads the image onto the server first before rendering it in the preview. I don't want the images downloaded to the server before rendering. Is this possible?
I use Dropzone to directly upload audio files (file size ranges between 100 - 200MB) to S3 and use callbacks to get the filename of the uploaded file and its full S3 URL, then pass these as hidden fields to a form that user then submits. Which callbacks in the documentation should I implement to get this same functionality?

Thanks for doing a great job...

Advanced server

Hi!, I am trying to use filepond with firebase and I am having troubles using advanced server, it would awesome to have an example of it. For example my process function would be

process(fieldName, file, metadata, load, error, progress, abort) {

   console.log('process');

   var uploadTask = this.$storage.child('images/' + file.name).put(file, metadata);

   uploadTask.on(this.$storage.TaskEvent.STATE_CHANGED,
       function(snapshot) {
           var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
           console.log('Upload is ' + progress + '% done');
           progress(true, snapshot.bytesTransferred, snapshot.totalBytes)
       },
       function(e) {
           console.log('error')
           error(e.message)
       },
       function() {
           console.log('done')
           load(uploadTask.snapshot.ref)
       }
   );
   return {
       abort: () => {
           uploadTask.cancel();
           abort()
       }
   }
}

But doesn´t work and abort method neither.

Uploading File manually

Is it possible to upload the file manually by letting the user click on a normal submit button alongside with a form either using ajax or direct post

File upload to external image server

Hi @rikschennink,

Very Sorry to bother you again, I am trying to implement custom upload to my image server.
My image server accepts the image name, dimensions, dataURL via POST API and returns a unique server file name for the uploaded image. I have attempted to implement the handler function but no success, is there an example that you can show us on how this works?

I have seen someone asked if FilePond would work with Amazon S3. It seems Amazon S3 and other custom image servers do not support the serverId feature in FilePond. Does this mean other operations such as revert, abort, restore are impossible with these servers? Thanks!

Translations

Missing feature. I think using options for this problem is scary.

test issue

test issue for linking up wipbadge

Getting dataURL

Hey Rik, I have set the instantUpload to false to intercept the image upload and handle the saving of images to the server myself. How do I get the dataURL of the images after browsing for them? The File object is returned by the FilePond:addfile event in this case, but the File object does not have the dataURL within. Thanks!

P.S. It would be great to have a search box on your site as the documentation grows in the future.

Browser Droping down on all devices when I uploading file(video) ~100mb and more

Browser Droping down on all devices when I uploading file(video) ~100mb and more
maybe somebody can help

Translations (i18n) ...

Hi Rik,

First of all, CONGRATZ with this software.
I'm currently using it within my Vue Apps, and it works like a charm !

My question:
Do you plan to implement translations ?
e.g. currently, (when trying to upload an invalid FileType), I see the message "File is of invalid type".

It would be great if this string can become language dependent...

It's just a question, but do you have any plans to implement this ?

Thanks in advance for your reply,

Kind regards,
Johnny (Belgium, and speaking Dutch as well :) )

File uploaded to server success or failure events?

How can I get the event where file was successfully uploaded to server or failed to upload to server event.

Photos are not cropped after upload.

Hi @rikschennink,

I have set up the multipart/form-data upload and am able to accept the uploaded photos to my image server. However, the transformations are not applied to the photos upon upload. Can you please advise how the transformation, cropping, and resize plugins work upon the file upload?

All of the plugins are registered properly.
Here are my settings for FilePond instance:

_pond = FilePond.create( _inputElement, {
      allowFileEncode: true,
      allowMultiple: true,
      maxFiles: 10,
      allowImageCrop: true,
      imageCropAspectRatio: '1:1',
      maxFileSize: '2MB',
      instantUpload: false,
      acceptedFileTypes: ['image/jpeg'], // Only allow jpeg file type.
      allowImageResize: true,
      imageResizeTargetWidth: Meteor.settings.public.image.maxWidth,
      imageResizeTargetHeight: Meteor.settings.public.image.maxHeight,
      allowImageTransform: true,
      imageTransformOutputMimeType: 'image/jpeg',
      imageTransformOutputQuality: 100
    });

Here is my XMLHttpRequest code.

var _req = new XMLHttpRequest();
_req.open("POST", Meteor.settings.public.paths.formPostUrl, true);
_req.onload = function (_data) {
    
    var _output = JSON.stringify(_req.response, undefined, '\t');
    _output = _output.replace(/(\\")/g, "'");
};
 
 _req.send(_formData);

Thanks!

RFC: Angular wrapper

Thanks for such excellent library!

Want to help with Angular (2, 4, 5, 6) wrapper, but faced few problems to get started:

Only dist folder available on repo
Want to see project structure and source code.
AJAX requests implementation backed-in
Angular uses own wrapper on top of requests HttpClient and also it is possible to use any external library instead it, for example, axios. In this case will be great to have ability use filepond without its implementation. Also Angular has change detection stuff listening for ajax calls.
DOM manipulations
Angular has its abstraction on top of DOM manipulation to make it possible to use it in any environment (back-end, Web Worker, etc.) and change detection plugged into it. So it will be great to have the ability to use framework API for DOM manipulations instead library one.

removeFiles not working correctly

Idk why but it's just not working correctly. I've tested it multiple times in the console.

removeFile() works but
removeFiles() doesn't (regardless of whether I set allowMultiple on the instance or multiple attribute on the element)

Here's the file I used to test it.

Try uploading some files into it and you can see that removeFiles() does nothing.

<!doctype html>

<html>
	<head>
		<meta charset="utf-8">
		<title>test</title>
		

		<script src="filepond.js"></script>
		<link href="filepond.css" rel="stylesheet">

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

		<script src="filepond-plugin-file-encode.js"></script>
		<style>
			.filepond--root {
				max-width: 320px;
			}
		
		</style>
	</head>

	<body>
		<input type="file" multiple>
		
		
		<button>Remove All Files</button>

		<script>

		FilePond.registerPlugin(
			FilePondPluginImagePreview,
		);
		
		const inputElement = document.querySelector('input[type="file"]');
		var pond = FilePond.create(inputElement, {
			server: "https://pqina.nl/filepond/api/",
		//	allowFileEncode: true,
		//	instantUpload: false
		
		// still doesn't change anything
		//	allowMultiple: true
		});


		console.log(pond["imagePreviewMinHeight"]);
		console.log(pond["imagePreviewMaxHeight"]);
		
		
		document.querySelector('button').onclick = function(evt) {
			// removeFile works but removeFiles doesn't
			// pond.removeFile();
			pond.removeFiles();
			console.log("attempted to remove all files");
		}
		</script>
	</body>
</html>

Take a look at tus for chunked uploading

https://tus.io/

Can filepond upload to amazon s3?

with the help of a hosted server side api?

Stale files when replacing an already-uploaded temporary file

First of all, FilePond is very awesome and slick, superb job!

Anyhow, I'll go right to the point. Lets say you have a FilePond instance which allows only 1 file. You drag-and-drop the file and it is immediatly uploaded as a tmp file on the server. Now you realised that its the wrong file, the natural behaviour would be to just drag another file over that one, FilePond behaves accordingly: it removes the previous one and replaces it with the newly-dragged one.

But when the user does so, no revert method is called for the previous file. This means that the server will have a lot of stale files!

It would be great, if the revert method is called in this case so that the server can clean the tmp directory!

Kind regards,
Denis

Addfile fires before hidden input is populated by file-encode plugin

Hi! Awesome work on this plugin, I love it 😄

I'm trying to dynamically render the preview image (using the base64 string) outside of the plugin. In order to achieve this, I'm trying to get the base64 string as soon as it's ready so I can update my preview. However, it seems like the FilePond:addfile event fires before the hidden input is created (let alone ready) and FilePond:processfile doesn't seem to fire at all..?

How can I access the information in the hidden input when a file is added? Is there a special event for when the file-encode plugin is ready?

My attempt:

FilePond.registerPlugin(FilePondPluginFileEncode);

// original input[type=file]
var input = document.querySelector('input');

// upgrade file input to filepond
FilePond.create(input);

var pond = document.querySelector('.filepond--root');

pond.addEventListener('FilePond:addfile', function() {
    // Element doesn't exist yet
    console.log('No element: ', pond.querySelector('input[name="filepond"]'));
   
    setTimeout(function () {
      // Now the element exists and the value is accessible
      console.log('Value: ', pond.querySelector('input[name="filepond"]'));
    }, 5000);
});

pond.addEventListener('FilePond:processfile', function(event) {
    // Doesn't seem to fire at all?
    console.log('Nothing..', event);
});

https://codepen.io/RijkvanZanten/full/QmJLZv

Upload src file

Uploading src file will open way to contribute :D

restoring state after page submit

I have a page with the filepond control and some other controls.
Suppose the user uploads a couple files, and the filepond control shows them in green.
Then the user submits the page and there is a validation error, so all the controls are shown again.
My server knows the current state of the uploads; how can I update the filepond UI on the client to show the files that were uploaded previously?

Jquery event handler not run.

I'm trying use more than one filepond in page.
I registered one process event and want know wich one are already changed but all filepond triggered.

Recursively add files in a directory and it's sub directories

The question says it all :)

Can't use "multiple" option.

I'm using this example in my electron-vue app. I should be able to upload multiple files.
This is shown:

But I expected this:

So I can't upload multiple files.
I tried to:

reinstall the npm package
set the "multiple" attribute from code
remove all .css dependencies
checked other examples with "multiple".

I'm using macOS HighSierra, filepond version 1.2.0, vue.js and electron.
My code is:
<input type="file" class="filepond" name="filepond" multiple data-max-file-size="3MB" data-max-files="3">

and the call from the vue component:
mounted() { FilePond.parse(document.body); }

Post additional data

There should be a data property to post additional data without using custom handler functions.

Canvas toBlob quality option

FilePondPluginImageTransform

image.toBlob(resolve, options.type, options.quality);

Canvas toBlob function accepts values for quality parameter between 0-1

so if the parameter imageTransformOutputQuality specified by docs between 0-100 is used directly images are always encoded 100% quality

So either use imageTransformOutputQuality: 0.6, or change to image.toBlob(resolve, options.type, options.quality/100);

Possible error in documentation

When following the instruction on the website about how to register filepond plugins, I found what seems to be an error in the documentation. It says here that you should import plugins like this: import FilepondPluginImagePreview from 'filepond-plugin-image-preview'; however, this was giving me errors. Turns out you need to import them as such: import * as FilepondPluginImagePreview from 'filepond-plugin-image-preview.

Not totally sure if this is a mistake or not, but thought I'd bring it up. Maybe it's the way I set things up in Aurelia.

File upload status design and progressbar

I am trying to keep file uploading status on right and design like this screenshot . Can i do this with filepond ?

Here is the Screenshot

Please ! Thanks in advance

React wrapper - no onprocessfile event fired

Hi! First of all, thank you very much for this library. Saved massive amount of time for us.

Here is an example https://codesandbox.io/s/x2zw6jzj24 (server code here: https://runkit.com/lytvynenko/5ab2b90f25eebc0012140268) , where "onprocessfile" event isn't happening.

Boilerplate Express/Node

Anyone has example how to handle the upload process?

Parameter available on event functions

Hi @rikschennink,

For the pond.on(event, function), the addfile event yields parameters of (error, file) for the callback function. Do you happen to have a list of what parameters are available for other events such as processfile and removefile, etc.?

Loading files without transferring file contents

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!

Can't load remote url via files attribute in vue js

<file-pond
    allow-multiple="false"
    name="upload"
    ref="pond"
    drop-on-page="true"
    label-idle="Drop files here..."
    :files="uploadedFile[0].source"
    @addfile="onFilePicked()"
    @removefile="removeFile()"
    @init="handleFilePondInit"/>

uploadedFile: [
    {
        source: this.getRemoteUrlforEditing,
        options: {
            type: 'remote'
        }
    }
]

this.getRemoteUrlforEditing computed property is giving me the remote URL. but filepond giving me 400 error everytime .. i have configured everything successfully. but can't figure out this issue

Unable to change the default remove behaviour

Hi,

I have troubles handing de DELETE file method

The revert handler works well when upload is done with the component, but when I load
the files preloaded with this format:

{
  source: file,
  options: {
    type: 'local'
  }
}

I'm unable to change the remove file default behaviour

Thanks for your time

AngularJS Component

Hey! Just for letting you know that I made a AngularJS Component for FilePond (inspired by the other Angular Component) :)
I still need to do some tests, so there might be errors :)
If you are interested you can check it out here.

allowRevert: falseOption is changing request parameters

When I added allowRevert: false
The json schema is changing.
request is changing to this:

{"filepond"=>"{"base64":"dHJhY2tpbmdfY29kZQo3MTE2ODUyMjcwNjgKODEzNDU2NzgxMDIzMwoxMjQyMzQyMzQyMzQy"}"}

//The original is here:
{"shipment"=>{"csv"=>"{"base64":"dHJhY2tpbmdfY29kZQo3MTE2ODUyMjcwNjgKODEzNDU2NzgxMDIzMwoxMjQyMzQyMzQyMzQy"}"}}

Vue js: Upload button not showing when adding files

trouble trying to get FilePondPluginFileValidateSize working

Thank you for creating filepond, I found the integration really easy and it looks great.

I'm having a little problem trying to get the file size validator plugin working though -- the following code from docs doesn't seem to work, I get an error about setDefaults not existing. Any help would be appreciated; I'm restricting filesize on the server but the UI experience will be better if I can get this working. Thanks!

$(function(){

    $.fn.filepond.registerPlugin(FilePondPluginFileValidateSize);

    $.fn.filepond.setDefaults({
        maxFileSize: '3MB'
    });

});```

When angular component will be release ?

Waiting for angular component

Disabling Undo option

How to disable Undo feature?

pqina / filepond Goto Github PK

filepond's Introduction

Core Features

Also need Image Editing?

FilePond Plugins

Adapters

Backend

Quick Start

Internationalization

Contributing

Publications

Browser Compatibility

License

filepond's People

Contributors

Stargazers

Watchers

Forkers

filepond's Issues

Recommend Projects

Recommend Topics

Recommend Org