Any idea for other way how to upload images to post from frontend?

[Jimmi08]

Hi,
imagine submit news form and upload images to news.

Only way now supported on the frontend is imagepicker() . But there is no preview of uploaded image, changing order, remove them.

If you use mediapicker with dropzone, then images are uploaded to server before form is sent. So if user doesn't send form, images are already uploaded.

Any idea how to add multiple images to some record on frontend?

I need to post property on frontend (user is not admin) and some modern way for adding images.

Thanks

[tgtje]

well @Jimmi08 thats a very difficult one. How to implement the features in 1 (preview/order/remove).
Got a menu area or placeholder available somewhere.. or think alike a slider form (by looks, not content) (eg area which 'could' be hidden or sorts off.
Since you are quite good in coding ;-)
Iff these 3 could be incorporated into 1 you would nearly have it all.
preview > this fiddle
upload > this coding
arrange > this tutorial with example.
so basically the idea behind it would be that a user can do it, (no guest) and still have a working modell. Aka a mini gallery per page or something like that, boxed in, into that area... hope it triggers some more ideas too.

[Jimmi08]

Great, thank you. I found this: https://www.youtube.com/watch?v=EOi9kzzUW1E&list=PLY3j36HMSHNUCsG7S1lnBg_mOg3_VZrcq&index=12

for bootstrap5 and connection with the database. I got it working, but the question is - where to save images? Nobody was able to explain to me why so big change as media manager was made and why there is need to save each image as database record... Not to mention not very clear media owner and media category logic. And restriction to only user images, not uploaded by other user.

I always hit so broad topic...

[tgtje]

trigger idea : how about #1805 and #2205 (2016) reply from yourself, so a start could be seen there ?? and is this usefull? (just ideas for searching a method.

[Jimmi08]

This is the solution that worked with 1.0.4

https://studio-42.github.io/elFinder/

In 1.0.4 files from submit_news were saved in e_IMAGE.'newspost_images/'

[Jimmi08]

Actual submit news solution:

[Jimmi08]

And this is an example from @Vodhin plugin but again - too advanced for me to understand how it is built (all plugin not only this part)

[Vodhin]

Cats is out of the bag :)

That is a "simple" image gallery (simple to use, not to code) that uses PHP to create target elements for unused images and used images, and JavaScript to populate them with thumbnails. It is a modification of several scripts I created over a decade ago for another video management plugin created for a small TV station. The version shown by @Jimmi08 above is coded specifically for the real-estate plugin I am developing for e107 and as such is not easily converted to something that can be generically used in e107.

There is a hidden FILE field, wrapped in a LABEL field tied to the UPLOAD button. AJAX does all the work to upload the file and process it though another PHP script that verifies the file. The same JS code that creates each thumbnail when the page loads is then used to add the new file to the unused images element. Additional JS code called by mouseenter and mouseleave on each thumbnail adds buttons to replace or delete the file - and now I've added a crop function button, too (using cropperjs). You can also drag and drop the thumbnails (using jquery-sortablejs) to reorder them and add/remove them from different galleries.

The trick here is that each thumbnail's file information is recorded in a special Media table, along with the index of the Property Listing that the file belongs to. The file, when processed, is renamed using the index of the Property Listing and the new index of the Media database record. In this plugin I also add some other Index keys that help the scripts find and manage groups of images though their database records and file names. This makes filenames that are "messy" for human reading (eg 10-2-15-234.jpg) but easy for the database and JavaScript to use. When a thumbnail is added to the page the corresponding database record is stored in the data() property of the thumbnail element, making it easy for JS to know about the file without making a database call.

I did toy with creating sub-directories in which to store each Property Listing's files, and may choose to go that route in the future but for now all files get saved into the plugin's own media directory. I did look into e107's Media Manager functions but documentation is sparse. Once I finish the real-estate plugin (and it seems like I'll never truly finish it) I might consider making a generic version that can be used by other plugins. Just thinking about it, I might just work on the needed changes within the real-estate plugin (see? That's why it seems like I'll never finish it).

** thinks out loud: Will need data about the image's owner (User ID), the Plugin ID and/or other e107 area's Identifier, Post Id... **

Meh... maybe not... maybe...

[Jimmi08]

I hope you don't mind that screenshot. It is awesome work. I was waiting for some Wow reaction from others, a bit disappointed that nobody noticed this.

I already solved the preview during submitting (pretty easy if you know javascript which I don't know well). For now, I am playing with Submit News only.

Don't complicate your own stuff, please. Media tables (structure) are a bit complicated.

Thanks for your time.

[Vodhin]

I hope you don't mind that screenshot. It is awesome work.

Not at all. Thanks for the compliment.

I was waiting for some Wow reaction from others, a bit disappointed that nobody noticed this.

I'm sure it has been noticed by some, but there aren't many people hanging around e107 these days: e107 has never really been the most popular CMS available but it was a good one. I started using it back in 2005 when I created my Roller Coaster Tycoon 3 custom scenery website. I looked at other CMS and found that e107 had excellent documentation and a very active community. Most of what I needed to know had already been asked and answered on the old e107 forums, and I got a lot of good help for the questions I posted.

CMS systems in general have been on the decline as more and more companies that offer website design and management sprang to life over the past 10 years or so. If we go back to 1995, when I started writing static HTML files, the concept of a script based webpage was just in early experimentation stages. By the time e107 and other CMS software got off the ground in the early 2000's, things like Twitter and Facebook were lurking just around the corner. Gaming Forums were the big thing, and some small businesses looked to CMS software, too, but the rise of Social Media really killed the idea of a Forum-based website (or at least put them in the Intensive Care Unit). Then the iPhone turned up and changed everything by pouring gasoline on the little fire known as e-commerce.

e107, and indeed many other CMS software packages, started life as community based open source software, made and maintained by people with "real" jobs, coding in their spare time. The pace at which internet protocols evolved to allow secure transactions and interactive content is so unbelievably fast, it is no surprise that upgrades and development of CMS systems is dying. Right now I could get a custom real-estate website by just asking an AI to write all the scripts needed to build it, including a dynamic image gallery. For the right price.

But I like coding. I like the challenge. I like dreaming up some user interface and getting that Ah Ha! moment when I figure out what else I can do...

[Vodhin]

oh, @Jimmi08 - I have been coding my real-estate plugin to allow Members to post their own Property listings via a front-end form, as you suggested. Current progress: Testing of UI form elements. I expect the plugin to be testable by you in a week or two. Further refinements, such as a list displaying their own listings, in-plugin tracking (Views, Favorite, Shares), and PM integration is in development.

[Jimmi08]

Yes, I know, I saw this. I supposed your question about help functionality was connected with this. There is no v2 plugin with frontend submission and editing records without admin rights. I mean, with using new v2 handlers and models stuff.
Sadly, as I said, I don't understand your code. But with testing I can help.

[Vodhin]

There is no v2 plugin with frontend submission and editing records without admin rights.

The Forum Plugin has front end forms, with preference settings to control who can post and edit, even upload images.

Oh, and earlier you asked why there is need to save each image as database record and I forgot to answer. Something has to keep track of what goes where and it is far easier to record that data separately. If you think about it, considering the Forum plugin: what happens to an image posted to a reply to a post in a forum thread inside a forum parent when you delete the entire forum parent? Without a record of the images associated, you would have a lot of unused images filling up your server space.

If you had a record of each file added to any thread in that forum parent then you would just fetch all the file names by searching for the media records with that forum's parent ID. Same goes with News and any other multi-level dataset (News does have Categories, which are essentially Parents).