multiple image upload & display

[Len Hatfield]

Hi, everyone--

I've a 2-part problem with handling images in XF3 and in the filesystem--the system will need to store thousands of images in various folders according to their respective categories while also being able to accept multiple images per category per Unit and to display the images and their filenames.  

So far I've created the database and the appropriate table for the Units to which the images will be associated.  My fields.ini has the image-category fields defined as containers, and these use the 'savepath' and 'url' options to store the uploaded image to the respective category folders.  All this works fine for single images, but of course it doesn't handle multiple images in any category.

Anticipating that the best way to handle multiple images per category per unit, I've built an images table and have set up a relationship between the Units and Images tables.  

But I'm uncertain how best to proceed from here: is there a way to make these image container fields allow users to upload multiple images?   I assume the information will go into the related Images table, but the image files will need to be stored in their respective category folders.

Perhaps the display task should be handled with __SQL__ query to the related images table?  

But how to enable uploading multiple images and, later, editing those images?

Any suggestions most welcome!

[Steve Hannah]

I'd like to focus on the fact that it works for single images.  Are you using delegate methods to dynamically set the savepath and url depending on the category?  Maybe there's something that needs to be changed in multi-image support to respect these delegate methods.

--
You received this message because you are subscribed to the Google Groups "Xataface" group.
To unsubscribe from this group and stop receiving emails from it, send an email to xataface+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/xataface/a0ac73b0-da09-4f88-96d9-b189c08458f2n%40googlegroups.com.

--

Steve Hannah

Web Lite Solutions Corp.

[Len Hatfield]

Thanks, Steve--

I hadn't thought about using delegate classes to set the paths dynamically--can you point me to a spot in the docs that has an example of this great idea?  I'd need to do this for each of the categories, I suppose, so there'd be a delegate class for each category, no?

Setting the path dynamically should solve the problem of saving to different category folders, and using the table relationship should allow for saving multiple images to the same category for a given Unit.

But how to display those several images per category in a Unit's record?

Thanks much!

You received this message because you are subscribed to a topic in the Google Groups "Xataface" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/xataface/IUVMxBj-XKQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to xataface+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/xataface/CABiRg%2BQO8HgL0LJfZMk3%2Bis4%2BCMSaDgPnTZbdF4Wk3DnDRQWAg%40mail.gmail.com.

--

... Len
      Len Hatfield

[Steve Hannah]

Actually, I'd like to know how you're doing it now that works for your "single" upload case, because presumably you have some way to make the directory dynamic depending on category, unless I'm mis-reading your original message.  If I understand how you're doing it, I can try to pinpoint why that doesn't *just* work with multi-uploads.

To view this discussion on the web visit https://groups.google.com/d/msgid/xataface/CAPkYg%3DxXu%3Db6vR%3DnXupv1KK8y0hX%2B3GZWFaGn9X_oQqb6RNTCw%40mail.gmail.com.

[Len Hatfield]

Oh, sorry I wasn't clear: what I have working is only category container fields for a single image with a different savepath and url for each category—no relationships yet in place.  (I’m still reviewing the docs on relationships to make sure I understand them, and in a staging version of the app, I’m starting to implement those relationships.)

Here's an example from fields.ini for two categories, Img_Ballroom_BR and Img_BedChamber1_BC1:

[Img_Ballroom_BR]
 visibility:list=hidden
 visibility:browse=hidden
 widget:description="One image file only (<span style='color:red'>for more, use Zipped materials above</span>)"
 Type=container
 widget:type=file
 allowed_mimetypes="image/jpg,image/gif,image/png"
 disallowed_mimetypes="text/javascript,application/x-httpd-php,application/java-archive,application/x-sh,application/x-python-code,text/x-python"
 savepath=../house_media/Img_Ballroom_BR
 url=../house_media/Img_Ballroom_BR

[Img_Bedchamber1_BC1]
 visibility:list=hidden
 visibility:browse=hidden
 widget:description="One image file only"
 Type=container
 widget:type=file
 allowed_mimetypes="image/jpg,image/gif,image/png"
 disallowed_mimetypes="text/javascript,application/x-httpd-php,application/java-archive,application/x-sh,application/x-python-code,text/x-python"
 savepath=../house_media/Img_Bedchamber1_BC1
 url=../house_media/Img_Bedchamber1_BC1

As you can see, this will allow a single image to be uploaded per category, but as soon as the user tries to upload a second image in that category, the new info and file will overwrite the previous ones.

So I think I can build the relationships but I'm not sure how to adapt the above to allow for multiple image uploads per category, nor how to display those once they're uploaded...

Thanks again for your help!

—-

... Len

To view this discussion on the web visit https://groups.google.com/d/msgid/xataface/CABiRg%2BT1uwFU2mVD_KPd1U%2BD2C-Y4uM4iYzhr2B5Z1u_%3DmfbDQ%40mail.gmail.com.

[Ruben]

Hello,

I was looking for a way to do exactly this (storing images in different subfolders depending of say for instance, a dropdown with subfolders), and I think I found the reason why you replace the image with every subsequent upload.

You need to seperate the the images from the rest of your records and create a relationship between the two tables like this:

Units:

Unit_Id

Unit_Title

...

Images

Image_Id

Image_File (stores the filename)

Unit_Key

 

Then you create a relationship in relationships.ini file in your folder for the Units that looks like this:

[Images]

  Images.Unit_Key="$Unit_Id"

In your fields.ini for that table you add:

[Images]

  widget:label = "Images"

  transient=1

  relationship=Images

  widget:type=grid

  widget:columns="Image_File"

This will setup a grid that allows you to upload multiple images from your units table directly into the table for your images, and retrieve them as well

Next step is to actually tell that grid to allow for IMAGES to be written.

This can be achieved by adding the following configuration to the fields.ini of your Images table

[Image_File]

  Type = container

  widget:type = ajax_upload

  logo=1

  savepath = %I use a realtive path here, that ends with /table_name%

  url = %Same here, but due to my setup I prefer to add here the FULL url, so starting with https://, might be needed in your case as well to allow to go all the way to root level%

  allowed_mimetypes = image/gif,image/png,image/jpg,image/jpeg,image/webp

  allowed_extensions = jpg,jpeg,webp,gif,png

  disallowed_mimetypes = application/json,application/xml,application/exe

  disallowed_extensions = exe

Now that I am writing this out, I believe I see a possible solution for our use case:

by Creating a text field in the Images table, concatenating that to both the savepath and url directives here, this should be possible (Given both the parent and subfolder exist and have the needed permission)

It would then Look a bit like this in your images fields.ini:

[Image_Category]

widget:type = text

[Image_File]

  Type = container

  widget:type = ajax_upload

  logo=1

  savepath = %I use a realtive path here, that ends with /table_name%/"$Image_Category"

  url = %Same here, but due to my setup I prefer to add here the FULL url, so starting with https://, might be needed in your case as well to allow to go all the way to root level%/"$Image_Category"

  allowed_mimetypes = image/gif,image/png,image/jpg,image/jpeg,image/webp

  allowed_extensions = jpg,jpeg,webp,gif,png

  disallowed_mimetypes = application/json,application/xml,application/exe

  disallowed_extensions = exe

 and of course you would need to add the Images_Category to the grid in your transient field in the parent table configuration.

I hope this made any sense, I will try out the solution with multiple subdirectories and post here again whether or not my tests are successful.

Ruben

Op vrijdag 11 maart 2022 om 01:12:43 UTC+1 schreef len.ha...@gmail.com:

[Len Hatfield]

Thanks for this helpful response, Ruben.  Do let me know if it gets working for you.  

I tried something like this, but couldn’t get the relationship + grid to work unless each area (bedroom, ballroom, etc) was in its own table in the DB as well as in its own subfolder in the file system.  That route would have been too cumbersome for the current project.

In the end, I was able to use an open source datatable project (LazyMoFo Datatable) to accomplish what I was after.

But I’d really like to be able to resolve this kind of thing right in Xataface.

Anyways, many thanks! 

To view this discussion on the web visit https://groups.google.com/d/msgid/xataface/3a7563d1-82e5-4952-a614-7a260783f243n%40googlegroups.com.

[Ruben]

I tried it myself, with every type of templating and using variables I have seen in the rest of the ini files, but no luck this far.

The subfolders will always need to exist for this to work, and indeed for the current setup, 1 folder to store images means a different table to store the image names.

I believe at this moment the issue lies in that the fields.ini file (more specifically the savepath and the url directives) don't seem to allow for a variable.  Once that is possible, I believe it would work like a charm.

However, When (and IF) this gets implemented, I would caution whoever uses this method, to not allow just random text be inputted in this field.  A better aproach would be to have a dropdown of categories (which represent the available subfolders) and have users use that.

With the delegate classes this might be able to be circumvented, but I don't think that if we want to adress this type of use case permanently and elegantly, this would be the best approach.

Ruben

Op zondag 15 oktober 2023 om 20:31:07 UTC+2 schreef len.ha...@gmail.com:

[Len Hatfield]

Yes, that’s my experience exactly.  Thanks, tho, for those additional comments—some variables in the fields.ini might well be the ticket.

I should have also have said that I had great help from the programmer of the LazyMoFo DataTable project, Ian Sokolowski.  The project is at https://github.com/lazymofo/datagrid.

Best, 

To view this discussion on the web visit https://groups.google.com/d/msgid/xataface/312f6c79-5778-4f19-8afe-d204fbf4431bn%40googlegroups.com.