InputfieldFile/Image – file upload enhancements

[Adam Kiss]

Rewriting this issue from Github, Inputfield[File/Image] fields have a HTML5/JS upload funcionality.

Currently, the functions handling the upload and addition to field, etc. seem really baked in the rest of the JS the field uses for other purposes. I'd really like them to have some sort of interface, so we could possibly peruse this fields - as shown in this video.

Right now, I use all sorts of hacks to get correct data (and they might be even not correct), so there could possibly be some API like interface to:

• push a file to upload (and get a filename back - i currently had to duplicate/hack in page name cleaning function)
  
• have the field trigger some events on $(document) [or $(window)], like 'upload started', 'upload finished'
  
• have those events somehow put together with the real filename the field uses
  

That's just from the top of my head. Ryan seems to not understand me (waiting for the a-ha moment), so I'm posting this here in hopes @apeisa will)

Adam

[apeisa]

Just to make sure I understand: you want to use JS to upload files, without actually dragging and dropping them into image/file field? Can you show me how you currently do it?

[Adam Kiss]

…as shown in this video.

Edit: or do you mean code?

[apeisa]

Code.

[Adam Kiss]

https://github.com/adamkiss/InputfieldAceEditor/blob/image-upload/_coffee/modules/editor.coffee#L50

and the last two functions are helpers

[apeisa]

Ok. (didn't understand much, I just spilled my coffee.. heh heh).

Can you provide example usage which would be most helpful for you. Pseudo-code or js. Something like along these lines I assume:

for(var i=0, l=files.length; i<l; i++) {
 var urlToFile = HTML5Uploader.uploadFile(files[i]);
}

Where HTML5Uploader would be provided by ProcessWire?

I assume you would need a way to poll the upload progress also?

[Adam Kiss]

Ding ding ding bingo!

We have a winner.

Follow my thoughts here:

I thought, that the user of ACE Editor sets field in the config he wants to use for images (when dropped on ACE), thus it makes sense that it would be simplest if the InputfieldFile had accessible interface (since it handles upload, etc. already).

The code you've provided is exactly what I hope for - with this, I'd only send the urlToFile to ACE Editor and be done.

I assume you would need a way to poll the upload progress also?

I'm going minimal - I need only the start/stop events (jQuery.trigger with custom event seems to be great for this), but I imagine people are capable of coming up with weird stuff, so if you open up this interface to access from other modules, progress might be great, you know.

[apeisa]

Thinking about the code snippet I provided... Maybe it should be more like this:

for(var i=0, l=files.length; i<l; i++) {
 var urlToFile = HTML5Uploader.uploadFile(files[i], "images");
}
// Where "images" is the name of the field that get's the files.

[Adam Kiss]

It depends, I read it as follows:

$.each(files, function(i, file){
 var urlToFile = $(config.InputfieldACE.dropTarget).pushFile(file);
});

But looking at the code, it seems that you may be thinking about moving the HTML5 upload stuff into it's own module (or JS object)