Datasprings Dynamic Forms and image upload problems - a fix for specific scenarios

This may not interest lots of people, but if you're using the very powerful Datasprings' Dynamic Forms module, you may come across it.

 

The setup

 

Historically, there have been quite a few bugs with the image upload field in this module, especially when using in combined with the Preview functionality. I had the following setup:

 

Dynamic Forms module with more than one image upload field.

Preview ON

Thumbnail ON

Initial SQL rendering/bind ON

More than one image fields

 

Other attributes for image fields (not that it matters, just describing the full scenario):

Custom image folder

Save filename only

Save system generated unique name

 

I wanted to setup Dynamic Forms to let a user upload, let's say, four images on the same form. I needed to save those in my own database tables and load them from those tables, so I had initial SQL rendering/bind as well as an sql event to save the images back to my custom database table.

 

The problem

 

When you use your own sql query to get data for your form, (at least at versions 03.30 to 03.40) thumbnails do not get loaded the first time the form is loaded. Instead, you see the full-sized image (after all, that's what stored in the database).

 

If you cause a postback (e.g. by clicking on the "upload new image" link on another image field) then the image url is correctly prefixed with "thumb_" and it is presented in the correct dimensions.

 

The solution

 

To overcome this, I just added code to my select query that would put the "_thumb" prefix in place even if it wasn't there, like the following:

 

SELECT

  field1

, field2

, ...(other fields)

, case

  when ltrim(rtrim(isnull(myfield,''))) =''

  then ''

  else 'thumb_' + myfield

  end as myfield

, ...(other fields)

...(rest of query)

 

So this would always add the thumb_ prefix to the field "myfield".

 

This solved the problem with the initial form rendering. The first time a user sees the form, the thumbnails are shown instead of the full images.

 

The second problem

 

The first solution caused an additional problem: In the case of a postback, as I mentioned before, DF puts its own "thumb_" prefix in the images that are displayed on image fields! So if you attempt to click on "upload new image" in any fields, all the other fields will now have an image starting with "thumb_thumb_", and, since no filename exists that starts with this prefix, broken images will be all you'll see.

 

Please note that you'll see this only if you're using two or more image fields on the same form (or use any other postback that triggers this behaviour).

 

The additional solution

 

I found no way to circumvent this, since it's by design. So I had to resort to JQuery in order to correct the problem. I added a Custom Javascript (you can do that in the Module Configuration section) like the following one:

 

$(document).ready(function() {

    $('img[src*="/Portals/0/imageuploadfolder/"]').each(function(i,d) {
   
        $(d).attr("src",
                 $(d).attr("src").replace("thumb_thumb_", "thumb_")
                 );

    });
});

What it does is take all images that have an src attribute that contains the path /portals/0/imageuploadfolder (replace this with your path) and changes any double "thumb_" prefixes to a single one.

 

This dual workaround seems to work good so far. Now I know this is a very special situation (Dynamic Forms with more than one image field and initial sql rendering) but I hope someone benefits from this. Take care.

Read more...