Comments (10)
@rijkvanzanten For now as a temporary solution, here's what I did to detect whether the encoding is finished. I'm just polling every 300ms. To a user it should be imperceptible and seems to work. Let's assume you're submitting a form. The following code should work.
var encodedChecker = null; //global namespace
function beginUpload() {
// only one repeating interval should exist at any time for uploading (assuming you only want to upload one file)
if (encodedChecker !== null) {
clearInterval(encodedChecker); // perfectly safe to clear null, but we don't need to do that.
encodedChecker = null; // just to be safe
}
// set encodedChecker to the interval id
encodedChecker = setInterval(function() {
console.log('polling...');
// if value is there
if ($('input[name="filepond"]')[0].value !== "") {
callbackfunction(); // start actual upload
clearInterval(encodedChecker);
}
}, 300);
};
If you're not using a form to submit, you may need to check for whether the hidden element exists before calling the starting the interval!
from filepond.
Ah I understand. The problem here is that when the FileReader object is called to read in the data uri, it does it ASYNCHRONOUSLY. You have to wait for the readIn to finish before it's ready.
Also your processFile()
only works when you set the server
option when you create the object or when you setOptions
. As default, it will attempt to upload or processFile()
when you drop in a file / add a file unless you specified instantUpload: false
. Check out the docs.
To be more specific. You never processed the file in the first place. Process file simply initiates the upload sequence. If you don't specify where it should upload, processFile will never fire.
from filepond.
Hi @rijkvanzanten and @DamSenViet !
I would like the addfile
event to fire after the file has been encoded, having a separate file encoded event might be a bit confusing, also, is another plugin does some other alterations on the file we'd need another event to track when it's done.
The file encode action is currently run after the load of the file, which causes the event to fire before the encoding is done. What makes this tricky is that the File Encode plugin will have to apply any output transforms ( resizing, cropping ) which are only applied when the interface is in an idle state ( otherwise these actions would block the UI ).
I'm looking to creating a hook that allows plugins and other heavy internal processes to be run at certain moments without interfering with the normal flow of the events.
- add file ( drop, browse or use api )
- create file item
- get file data ( could be on a remote server )
- get file data progress
- file loaded
- apply file transformations ( this needs to happen when the interface is idle, but should ideally be skipped when no transformations are required )
- addfile event!
from filepond.
@rijkvanzanten @DamSenViet Just published version 1.2.11
of FilePond and 1.0.4
of the File Encode plugin. Should fix the issue.
from filepond.
Maybe the file-encode
plugin could emit an event when the worker is done?
from filepond.
Ahhh gotcha! I didn't realize from the docs that the process events were for server only. I think this boils down to the feature request for an event onencode :)
from filepond.
Even better, allow us to set certain properties on the FileReader object when FileEncode is allowed, but before FileReader actually starts reading. So you can keep most of the source code intact this way with minimal addition. Like just letting us pass in an object with key and values. Set those key and value properties for us and voila.
Or what you can do is allow us to pass in our own FileReader object (if the actual FileReader object is left pretty much intact). When we setOptions, allow us to set a custom FileReader object and make a copy of that to read in.
Allow us to edit the FileEncode at least lets us figure out when the encoding is finished.
from filepond.
@DamSenViet I'd consider that a suboptimal solution as it would require devs to have knowledge of FilePond's internal systems in order to use the file encode plugin. Whether you're uploading async or encoding files, the addfile
event should be fired when the file has been fully added. Using plugins should be as easy as registering them and setting some options, seamless.
If you do need access to the FileReader you can fork the file-encode plugin and add a callback option to the configuration object.
from filepond.
Awesome and thank you so much! Will you be updating the npm modules too?
from filepond.
@DamSenViet Noth npm modules have been updated as well.
from filepond.
Related Issues (20)
- [Feature] Option to Disable the Remove File Button HOT 2
- [Bug] Please remove the shaking animation.
- [Feature] Customize Animation Duration
- [Bug] [react-filepond] State update in onremovefile event handler triggers file re-upload HOT 2
- [Bug] url.split is not a function when attempting to load "local" images (React 18) HOT 6
- Converting Headers key to CamelCase? HOT 1
- Bootstrap 5 image preview as gallery [Feature] HOT 2
- [Feature] How to show file limits to a custom html area with a selector HOT 5
- filepond--list-scroller overlays other elements [Bug] HOT 1
- Display a custom message on Upload complete, including data from the server response HOT 3
- I'm not able to drag an attachment from Outlook or Gmail HOT 3
- [Bug?] HOT 1
- [Bug] typings missing processfiles event HOT 1
- Upload of a large file (100s Mb) restarted each time a response received from back-end HOT 3
- Foreign character failure - unescape(encodeURIComponent(options.headers[key])); [Bug] HOT 2
- Filepond not working HOT 2
- [Bug] Method 'onupdatefiles' doesn't recognize states updates HOT 1
- [Bug] Safari click on custom idleLabel prop requires 2 clicks to trigger file upload dialog
- how to handle custom error message on maxFilesLimit HOT 2
- [Feature] is it possible to create custom file preview HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from filepond.