Integrate jquery files/images upload plugin in TXP

jpdupont · 2017-05-29 11:36:08

I’m looking for a plugin specialist to integrate Blueimp jquery file upload in :

Contents > Images
Contents > Files

As 1 or 2 plugin(s). Must work with last 4.7 dev release.

Paid job. Give me your quote by e-mail, please. Plugins then given to the community.

This jquery plugin is particularly well-documented, client-side and server-side.

Example: integration with a mysql database : github.com/blueimp/jQuery-File-Upload/wiki/PHP-MySQL-database-integration.

My goal is to get a tool to download multiple images or files at the same time, not related to flash, solid and maintained.

And why not integrated in the core :-) ?

After reading the documentation, I see how to integrate this into a custom tab, with php. But I’m not strong enough to turn that into a plugin.

Last edited by jpdupont (2017-05-29 15:13:23)

etc · 2017-09-28 20:50:53

Mind testing dropzone branch (currently for files only and Hive only) and feed me back? :-)

phiw13 · 2017-09-29 05:02:38

(a little OT, but posting this here as the subject cropped up)

Nice work Oleg! I‘ve been following that branch wit some interest.
There is currently one slightly puzzling behaviour: drag one or more files to the widget (actually the whole window is a target, interesting), then click the “Upload” button. The files are uploaded, but that is not reflected in the listing table below. One need either to refresh the window or follow one of the links in the message pane (goes to edit panel), Save or cancel to see the list of uploaded files in the table. But maybe that is a limit of that widget, IDKN.

BTW I think you need to check you source markup, there is some white-space missing been words or elements. Below copied from Safari source window

<div class="inline-file-uploader"><label for="file-upload">Upload file&#160;<a class="pophelp" rel="help" target="_blank" title="Help" role="button" onclick="popWin(this.href, 0, 0); return false;" href="http://rpc.textpattern.com/help/?item=upload&amp;language=en-gb"><span class="ui-icon ui-icon-help">Help</span></a></label><input name="thefile[]" type="file" required="required" id="file-upload" multiple="multiple" />Category
<select id="file_category" name="category">

etc · 2017-09-29 08:11:35

Thanks Philippe, now Category is wrapped in <label /> tag, so can be styled.

Re list refresh, I don’t know what is the best way to go UX-wise, we have no precedent in batch uploads. Just refresh it? New files will not necessary appear, depending on the current sort and filter. Populate the list with new files only? That’s a bit disruptive, we’d better then separate list and upload tabs. Any thoughts, anyone?

philwareham · 2017-09-29 08:38:06

Give me a couple of days to check over the branch again and add some CSS, and then we can work through any UX issues. Cheers all!

phiw13 · 2017-09-29 08:38:17

etc wrote #307256:

Thanks Philippe, now Category is wrapped in <label /> tag, so can be styled.

Yeah, that is a good addition – but I also mean, the different elements separated by a space character in the source – I think that is better for screenreaders and other AT (I now realise that the dev branch has basically the same problem).

Re list refresh, I don’t know what is the best way to go UX-wise, we have no precedent in batch uploads. Just refresh it? New files will not necessary appear, depending on the current sort and filter. Populate the list with new files only? That’s a bit disruptive, we’d better then separate list and upload tabs. Any thoughts, anyone?

Hmm separate list and upload tabs sounds attractive, from an end-user perspective, particularly when uploading multiple files (issue938) – independently of using the drag-and-drop dropzone widget. Using the JQ-UI “tab“ widget? The Files panel would have 2 tabs, one with the file list, one with the file upload widget (and show a list of the uploaded files after uploading).

One thing to think about: user upload files, gets a list, then goes to the edit panel for one of the uploaded files and saves. I think best would be to return to that list of just uploaded files.

(just thinking out loud).

PS – I love the category selector next to the upload widget, as that is the first action I take after uploading files. I suspect Bloke will love it as well.

etc · 2017-09-29 08:52:27

philwareham wrote #307257:

Give me a couple of days to check over the branch again and add some CSS, and then we can work through any UX issues. Cheers all!

No worries, just give me few hours to fix the list refresh (almost there).

Edit: ok, tentatively done, please test.

etc · 2017-09-29 09:03:20

phiw13 wrote #307258:

PS – I love the category selector next to the upload widget, as that is the first action I take after uploading files. I suspect Bloke will love it as well.

That’s the only action I usually take. Always been distracted by “edit file” redirect on upload.

jpdupont · 2017-09-29 09:55:15

Hello Oleg, Phillipe, and the others,

I tested quite intensively. This improvement on the file side and especially on the image side is for me a very big advance for Textpattern. Thank you for this work!

I agree with Philippe’s remarks. I would like to see under the line of components intended for the choice of files a panel to open with a sub-panel for each newly uploaded file. Ability to delete the uploaded file or drive to the file editing screen.

I tried to upload a very large file (more important than the server limit). It is possible to exceed this limit in upload thanks to the chunks technique that some files upload modules offer. I received an error message at this time that had nothing to do with the size of the file (‘unable to submit form’).
Allowing uploading using the chunks technique would be a big plus. This would break the server limit.

An other script :

Blueimp – multiple files upload + big files upload

jpdupont · 2017-09-29 10:16:09

Test with the last release :
Error at the end of the upload

Upload of 3 zip files (1.43Mo each)
When I refresh the page, I see the 3 files

Last edited by jpdupont (2017-09-29 10:57:55)

etc · 2017-09-29 16:42:32

jpdupont wrote #307262:

Test with the last release :
Error at the end of the upload

Your screenshot looks like you are not using dropzone branch or need to refresh textpattern.js, please check.

I will not break server file size limits, sorry :-)

etc · 2017-10-02 15:40:31

etc wrote #307267:

I will not break server file size limits, sorry :-)

Couldn’t resist… the Hive neutral theme in dropzone branch now can load large files in chunks. Be careful, the upload starts immediately as files are selected.

Textpattern CMS

Textpattern CMS support forum

#1 2017-05-29 11:36:08