Multiple image uploading to Photologue from the frontend

[morlandi]

Hello @richardbarran , I'm considering django-photologue for a new project; thanks for your great work.

I would rather have the user upload images in a gallery from the front-end, but before doing that in the project I wonder whether you would be interested in adding this feature to the photologue app itself.

My contribution, in case, would be based on this work:

https://github.com/morlandi/django_upload_form

br, Mario

[richardbarran]

Hi,
In principle it sounds like a good idea.
I think that it would make sense to have an external app that can work with Django's admin.This would make it (in theory) relatively straightforward to use it with Photologue.
There are several packages out there that seem to already provide this functionality (e.g. https://github.com/mbraak/django-file-form) although I'm not familiar with any of them.
I see that you've written similar code in django_upload_form - I'm wondering why you didn't go with an existing application?

[morlandi]

Hello @richardbarran ,
first of all let me clarify that I was rather thinking about a support for uploading multiple images from the frontend; in the admin, Photologue provides the possibility to upload a zip file, and that is already an effective tool for a site administrators.
Not sure whether as an external app or integrated in Photologue: I'm still rather unfamiliar with the internals of Photologue.
I also noticed you mentioned both a "JS photo uploader" and "Lightbox-style way of displaying photos from a gallery" in the wish list for future enhancements - does this mean you're interested in including some frontend features ?

I never ever start a new project from scratch before checking what's already available, but being mostly a front-end issue, I didn't restrict my research to django apps.
The most interesting solutions I came across have been:

• https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/
• https://davidwalsh.name/multiple-file-upload
• https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

and I resolved to incapsulate them in a Django Form with as few javascript as possible.
In the past I've been using this with considerable satisfaction:

https://github.com/blueimp/jQuery-File-Upload

It's a really great solution, however the javascript code is quite big, and with a clever usage of the "multiple" attribute in the tag could be considerably reduced - for this reason I consider that project a little bit outdated; finally, the integration in a Django project is not trivial at all.

Thank you for reporting django-file-form, I will certainly check it, and possibly give some feedback.

[richardbarran]

Hi,
Ok - you were thinking of front-end uploading. Sorry, I misunderstood your first post.
I think that allowing uploading of multiple images from the front-end via a JS widget would be an interesting feature.
The code - I think - would be pretty independent of Photologue. It builds on Photologue, but it does not need to be tightly integrated in it.
In the past I'd started a contrib folder in Photologue to allow adding 'extra features' that were not core to Photologue, but added useful extra functionality. The idea was not really developed, and right now that folder has gone (as I recently deprecated the only code that used it).
But I think that this contrib folder would be a good place to put the JS photo uploaded that you mention. It could have its own urls.py, its own views.py (for accepting the uploaded photos) etc...
This way we don't add to the existing codebase (which I think is already too heavy) a feature which only a minority of users will need.
Would you be interested in writing an app (called photologue_js_uploader or some similar name) to go into the contrib folder?

[morlandi]

I like the idea of a "contrib" folder, and agree on all the motivations you mentioned.
And yes, I could contribute with a "photologue_js_uploader" app.
My plans are as follows: I will migrate an existing project to Python 3 / Django 2.2; the old project uses "Imagestore" as a backend for images; it's a nice app, but in recent years has evolved in a direction not very usefull for my needs, as it now supports Django-CMS. That would be over-engeenering in my case, so I planned to replace it with Photologue.

My needs on the front-end are:

• a support for bulk images upload
• a gallery for images navigation

I've not a precise schedule yet, as the project migration is still under discussion, but I will probably cope with it in a few months or so. In the meantime, it you agree, we could exchange some ideas on how to organize it for better integration with Photologue, and on the desiderable features to provide.

At the moment, I have a working POC for files upload; there's a specific Form class in the app that takes care of all heady duties, and provides the required javascript (based on jQuery) through it's "media" meta attribute.
To use it, the project needs to provide both a Form-derived class and a view; I'm not totally happy with this, and I wonder if a single FormView could encapsulate all required project-side customizations; of maybe even better a Form, instead, for greater flexibility: the project will need to include the upload functionality in an already exisitng view, and some conflicts could arise if using a FormView as a mixin.
Another option I would consider is to serve the upload form in a popup modal window, instead of requiring the inclusion of the form in the main template.
Other possible feature are:

• possibility to include some user-supplied metadata for images in the form
• possibility to resize the images client-side before uploading
• some validations (available formats, max image size)
• configurable option to upload the images in parallel

[richardbarran]

Hi,
It sounds like you have a good plan!
My only suggestion would be to have separate Form and FormView. The Form would be used in the user's own website. The FormView would be there purely for receiving POSTed images i.e. it would not be the same url as the page on which the form sits.
I'm thinking that end users would code a custom page in their own website, and just include an instance of the Form in the context - for displaying in the template.
When they POST the form it goes to a 'standard' "photologue_js_uploader" URL that receives the data and sends back a success/failure code.

[datatalking]

Any progress on this, a multiple photo uploader is exactly what we could use this django app for.

[morlandi]

@datatalking I have something ready to work with, but very busy right now.
Tomorrow I will provide more details with a proper comment

[morlandi]

@datatalking, in the past I used some fancy javascript library to accomplish this; they work great, but I finally ended up to build my own minimal Django-friendly solution for the sake of simplicity and to recover control over my codebase.

The result is in an open source "satellite" project, mainly for individual use till now; it is currently in use in a real "production" project (Django 2.x) and in a test project (Django 3.0.5).
I had to do some cleanup (mainly revising the Readme) before submitting it to you attention.
You can find it here:

https://github.com/morlandi/django-upload-form

I would be glad to hear your opinions on this; I'm willing to take this project more seriously, and publish it on the Pypi soon.
I'm going to recover soon some refactorings which have been lost in the "develop" branch for a long time; they have no impact on the public interface, however.
Finally, I also did some experiments on possible improvements (listed in the "Issue" section) and could include them as well in a reasonable time.

Also, I'ld love to here @richardbarran opinion on these:

• is it appropriate to integrate this with Photologue ?
• in case, which modification are required/suggested ?

[derek-adair]

Django Upload Form uses a custom implemented jquery script on the front-end. I'd recommend staying away from that as x-browser file upload is an ever-changing endeavor. I'd recommend picking a solid front-end solution and making a decision on your python code from there. You could easily fork Django upload form and drop in plupload or Filepond.

Personally, I have a need for a Django rest API so I'm going to be integrating Filepond with a custom backend that will be doing this. Which can be pretty light work if you're only needing a simple multi-image upload. Literally posting to /api/photos/ using default django rest views, etc.

[morlandi]

Thank you @derek-adair ... Filepond seems very interesting indeed.
I also would like to mention Dropzone.js which I used occasionally.