Custom Image upload field

[krishna kiriti]

Hello Team,

Can anyone help me with creating a custom field that accepts multiple images and will be stored to dotCMS DB when published with preview image as well?

I tried to use the custom dojo FileAjaxUploader to get the UI similar to binary field. But I need the functionality of saving those images to dotCMS db as well. 

Please let me know if this can be achieved using custom fields. 

Regards

Krishna Kireeti 

[Nathan Keiter]

Hi Krishna,


In order to save an image to the DB, you need to have a binary field defined in the content type for each image. These "extra" fields could then be hidden via Javascript at page load.


In my opinion however, this approach will cause you problems later on. With a single multiple image uploader field randomly assigning images to a set of binary fields, how will you distinguish one from another? A better approach is to simply have a binary field dedicated to each image rather than a single multiple upload field. Then in your display code, you will know exactly what each image should be and where and how it should be displayed.


randomImage_1, randomImage_2, randomImage_3, randomImage_4, randomImage_5 etc. vs. headerImage, profileThumb, profileFull, bodyThumb, bodyFull etc.


In the first example, you won't be sure what is stored where.


Your approach could work if you are just letting users upload X number of images to a personal account, but you'll have to pre-define each binary field, resulting in a set limit to the number of images that could be uploaded to the content type. In a gallery type scenario, you might have better success giving each user a folder where they can store images, then reading the contents of that folder on a page. This would eliminate the pre-defined limit issue. That approach however would involve micro-managing folder permissions, and relating the folder to the user somehow.

Nathan I. Keiter | Network Applications Programmer
Gettysburg College | Information Technology | DataSystems
Campus Box 2453 | 300 North Washington Street | Gettysburg, PA 17325
Phone: 717.337.6993
https://www.gettysburg.edu<https://www.gettysburg.edu/>
________________________________
From: dot...@googlegroups.com <dot...@googlegroups.com> on behalf of krishna kiriti <krishnakir...@gmail.com>
Sent: Sunday, September 11, 2022 2:02 AM
To: dot...@googlegroups.com
Subject: [dotcms] Custom Image upload field

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.
________________________________

--
http://dotcms.com<https://linkprotect.cudasvc.com/url?a=http%3a%2f%2fdotcms.com&c=E,1,2HY0zFiE5IQ_hwQI5pAtgaVyL__2E8kVYH3neZeWZYf9_fT-GX-Z_-6Ge38oatXxPCR4qi7wQIdFCou1FOcjXYOWu0gvEce8GAUkuCQ9oU4BT6xStwuzkzk6ZuLQ&typo=1> - Open Source Java Content Management
---
You received this message because you are subscribed to the Google Groups "dotCMS User Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dotcms+un...@googlegroups.com<mailto:dotcms+un...@googlegroups.com>.
To view this discussion on the web visit https://groups.google.com/d/msgid/dotcms/CAFKt-CDpRxJWVOgANzmrte31%3Dn4knJERbKp%3D%2BqFpCBQ-x-rspg%40mail.gmail.com<https://linkprotect.cudasvc.com/url?a=https%3a%2f%2fgroups.google.com%2fd%2fmsgid%2fdotcms%2fCAFKt-CDpRxJWVOgANzmrte31%253Dn4knJERbKp%253D%252BqFpCBQ-x-rspg%2540mail.gmail.com%3futm_medium%3demail%26utm_source%3dfooter&c=E,1,ZHGIQXibCjxN3OfSw0GBDR6bBVx6dcbst1qqJb0ygGrK9qUgUiCuWYzgEWmUomrVlBOzafunKrrPqLfOkbyR6iGDf7FzFGQJh1bjKWqh5rf2zg,,&typo=1>.

[krishna kiriti]

Hello Nathan,

Totally agree with your approach but the requirement is such that the field should accept multiple images as we don't know how many images one can upload in one go. So having individual binary fields for each of them is a bit of over work I guess. 

Let's park the multiple images functionality aside for a bit. I want to know how I can copy the functionality of binary field as I'm trying to implement a binary field type image upload using a custom field in my content type. I can't directly use the binary field provided by the dotCMS in the drag drop section. 

I want to implement removing of image, preview of the uploaded image and get the path of uploaded file upon publish just like the binary field.

Is there any way we can implement this? Or any Api endpoint I can use that binary field internally uses?

Thanks and Regards,

Krishna Kireeti 

--
http://dotcms.com - Open Source Java Content Management

---
You received this message because you are subscribed to the Google Groups "dotCMS User Group" group.

To unsubscribe from this group and stop receiving emails from it, send an email to dotcms+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/dotcms/1662990807769.59011%40gettysburg.edu.

[Nathan Keiter]

Krishna,


A good first step would be to study how the core code does it in the JSPs. This will help you discover what Dojo classes and Javascript hooks can be used.


Image (Select from existing. Uses core widget.)

https://github.com/dotCMS/core/blob/master/dotCMS/src/main/webapp/html/portlet/ext/contentlet/field/edit_field.jsp#L567-L579


Binary (Upload file.)

https://github.com/dotCMS/core/blob/master/dotCMS/src/main/webapp/html/portlet/ext/contentlet/field/edit_field.jsp#L567-L579


Note: You'll see some features in this code block that are only available to Enterprise licenses.

Nathan I. Keiter | Network Applications Programmer
Gettysburg College | Information Technology | DataSystems
Campus Box 2453 | 300 North Washington Street | Gettysburg, PA 17325
Phone: 717.337.6993
https://www.gettysburg.edu<https://www.gettysburg.edu/>
________________________________
From: dot...@googlegroups.com <dot...@googlegroups.com> on behalf of krishna kiriti <krishnakir...@gmail.com>

Sent: Saturday, September 17, 2022 1:36 PM
To: dot...@googlegroups.com
Subject: Re: [dotcms] Custom Image upload field

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.
________________________________

Hello Nathan,

Totally agree with your approach but the requirement is such that the field should accept multiple images as we don't know how many images one can upload in one go. So having individual binary fields for each of them is a bit of over work I guess.

Let's park the multiple images functionality aside for a bit. I want to know how I can copy the functionality of binary field as I'm trying to implement a binary field type image upload using a custom field in my content type. I can't directly use the binary field provided by the dotCMS in the drag drop section.

I want to implement removing of image, preview of the uploaded image and get the path of uploaded file upon publish just like the binary field.

Is there any way we can implement this? Or any Api endpoint I can use that binary field internally uses?


Thanks and Regards,
Krishna Kireeti

On Mon, 12 Sep, 2022, 7:23 pm 'Nathan Keiter' via dotCMS User Group, <dot...@googlegroups.com<mailto:dot...@googlegroups.com>> wrote:
Hi Krishna,


In order to save an image to the DB, you need to have a binary field defined in the content type for each image. These "extra" fields could then be hidden via Javascript at page load.


In my opinion however, this approach will cause you problems later on. With a single multiple image uploader field randomly assigning images to a set of binary fields, how will you distinguish one from another? A better approach is to simply have a binary field dedicated to each image rather than a single multiple upload field. Then in your display code, you will know exactly what each image should be and where and how it should be displayed.


randomImage_1, randomImage_2, randomImage_3, randomImage_4, randomImage_5 etc. vs. headerImage, profileThumb, profileFull, bodyThumb, bodyFull etc.


In the first example, you won't be sure what is stored where.


Your approach could work if you are just letting users upload X number of images to a personal account, but you'll have to pre-define each binary field, resulting in a set limit to the number of images that could be uploaded to the content type. In a gallery type scenario, you might have better success giving each user a folder where they can store images, then reading the contents of that folder on a page. This would eliminate the pre-defined limit issue. That approach however would involve micro-managing folder permissions, and relating the folder to the user somehow.

Nathan I. Keiter | Network Applications Programmer
Gettysburg College | Information Technology | DataSystems
Campus Box 2453 | 300 North Washington Street | Gettysburg, PA 17325
Phone: 717.337.6993

https://www.gettysburg.edu<https://linkprotect.cudasvc.com/url?a=https%3a%2f%2fwww.gettysburg.edu&c=E,1,za8cBaNw8xvMIOmDjL28pgtBPOQ-XFWG-awvb4-im2j9Jxv2zHDag-R5lHVVwDqoU5HkJujLJ6EVU6UxHVbhOMxrkhmGdxcC4cspprX6Mr3nDsv10rLOGw,,&typo=1><https://www.gettysburg.edu/<https://linkprotect.cudasvc.com/url?a=https%3a%2f%2fwww.gettysburg.edu%2f&c=E,1,-seCTBcaPt2vrKbffWTKvM53DpG-JtekfrlrIHD8TScYlKR9jnoni7TLIOzGW6A4HwCIQ4Cqn3M1PlSc9WR4u8Yr7sh9gNMxXmTYpzNEAQ,,&typo=1>>
________________________________
From: dot...@googlegroups.com<mailto:dot...@googlegroups.com> <dot...@googlegroups.com<mailto:dot...@googlegroups.com>> on behalf of krishna kiriti <krishnakir...@gmail.com<mailto:krishnakir...@gmail.com>>

Sent: Sunday, September 11, 2022 2:02 AM

To: dot...@googlegroups.com<mailto:dot...@googlegroups.com>

Subject: [dotcms] Custom Image upload field

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.
________________________________
Hello Team,

Can anyone help me with creating a custom field that accepts multiple images and will be stored to dotCMS DB when published with preview image as well?

I tried to use the custom dojo FileAjaxUploader to get the UI similar to binary field. But I need the functionality of saving those images to dotCMS db as well.

Please let me know if this can be achieved using custom fields.

Regards
Krishna Kireeti

--

http://dotcms.com<https://linkprotect.cudasvc.com/url?a=http%3a%2f%2fdotcms.com&c=E,1,NqPDqO1eeTgaaq3yHbcNm3u5LY6m6S-Rdt3iXdlMs7reUE4oWW3jipK5dolMrXjX8PXQW8V3ONaxlsnQq1KjXAoMGzmgH8LSnxzComNAN9T9W4pQhWM,&typo=1><https://linkprotect.cudasvc.com/url?a=http%3a%2f%2fdotcms.com&c=E,1,2HY0zFiE5IQ_hwQI5pAtgaVyL__2E8kVYH3neZeWZYf9_fT-GX-Z_-6Ge38oatXxPCR4qi7wQIdFCou1FOcjXYOWu0gvEce8GAUkuCQ9oU4BT6xStwuzkzk6ZuLQ&typo=1> - Open Source Java Content Management

---
You received this message because you are subscribed to the Google Groups "dotCMS User Group" group.

To unsubscribe from this group and stop receiving emails from it, send an email to dotcms+un...@googlegroups.com<mailto:dotcms%2Bunsu...@googlegroups.com><mailto:dotcms+un...@googlegroups.com<mailto:dotcms%2Bunsu...@googlegroups.com>>.
To view this discussion on the web visit https://groups.google.com/d/msgid/dotcms/CAFKt-CDpRxJWVOgANzmrte31%3Dn4knJERbKp%3D%2BqFpCBQ-x-rspg%40mail.gmail.com<https://linkprotect.cudasvc.com/url?a=https%3a%2f%2fgroups.google.com%2fd%2fmsgid%2fdotcms%2fCAFKt-CDpRxJWVOgANzmrte31%253Dn4knJERbKp%253D%252BqFpCBQ-x-rspg%2540mail.gmail.com&c=E,1,Mir1xjKrsFTOiBfN_MrdAiwUE2rGU-YrLyJBiNg_DbzSBGb4cHL8XBliFmKrY-wsDqqfKbbb8m68Rt7jQ2eACfR2TshOduXNwNR_6KOlolJD6jZ9RQ,,&typo=1><https://linkprotect.cudasvc.com/url?a=https%3a%2f%2fgroups.google.com%2fd%2fmsgid%2fdotcms%2fCAFKt-CDpRxJWVOgANzmrte31%253Dn4knJERbKp%253D%252BqFpCBQ-x-rspg%2540mail.gmail.com%3futm_medium%3demail%26utm_source%3dfooter&c=E,1,ZHGIQXibCjxN3OfSw0GBDR6bBVx6dcbst1qqJb0ygGrK9qUgUiCuWYzgEWmUomrVlBOzafunKrrPqLfOkbyR6iGDf7FzFGQJh1bjKWqh5rf2zg,,&typo=1>.

--
http://dotcms.com<https://linkprotect.cudasvc.com/url?a=http%3a%2f%2fdotcms.com&c=E,1,iEu7uRUHqyMbFDSneLzVU0GR1ICXlvusUOvyh7CrLkXStBPHGHveBYR6oT3Vw-Ccdo1lVfFiTmGRk-Bs-qAqMV8Kkvr5S0w3bmydPzYmezhuoAjmtiVv&typo=1> - Open Source Java Content Management

---
You received this message because you are subscribed to the Google Groups "dotCMS User Group" group.

To unsubscribe from this group and stop receiving emails from it, send an email to dotcms+un...@googlegroups.com<mailto:dotcms%2Bunsu...@googlegroups.com>.
To view this discussion on the web visit https://groups.google.com/d/msgid/dotcms/1662990807769.59011%40gettysburg.edu<https://linkprotect.cudasvc.com/url?a=https%3a%2f%2fgroups.google.com%2fd%2fmsgid%2fdotcms%2f1662990807769.59011%2540gettysburg.edu&c=E,1,zCH4RXlwHDfh6V7oSp2kHiYc-llVfqfrrlsrAdMw461_2Ba6XbzPtH77oizZgsy3IKw-G-Igglp1c5teliGRsANjXE0S8xrCq-bzh6ifgQ,,&typo=1>.

--
http://dotcms.com<https://linkprotect.cudasvc.com/url?a=http%3a%2f%2fdotcms.com&c=E,1,r9jQnEE-FJiCh130NFDms0A_ULkzfeyckFMhX92_Ahk56CzGXj26qXDltcCSvjRMMxeulyIpSJd74-Z9lt-h6hDtToTwkXSaqD1B8REWr0gHnu8,&typo=1> - Open Source Java Content Management

---
You received this message because you are subscribed to the Google Groups "dotCMS User Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dotcms+un...@googlegroups.com<mailto:dotcms+un...@googlegroups.com>.

To view this discussion on the web visit https://groups.google.com/d/msgid/dotcms/CAFKt-CDp2xmkvENYnkqU-mpRJ-YFg6UwBB85ttj2fmeTeegreg%40mail.gmail.com<https://linkprotect.cudasvc.com/url?a=https%3a%2f%2fgroups.google.com%2fd%2fmsgid%2fdotcms%2fCAFKt-CDp2xmkvENYnkqU-mpRJ-YFg6UwBB85ttj2fmeTeegreg%2540mail.gmail.com%3futm_medium%3demail%26utm_source%3dfooter&c=E,1,HY9LXAJvSyGQk_HykwgYl8zxDfMmYNeDMKER-cirv7ahH1sx00ekS-CPS2Wp-8_PsxMhQ3GRKyuqXbnA5Rx-Jce70lMwIWiRYyaVXJtThUWsNBXXR8Q,&typo=1>.

[Mark Pitely]

 You could actually loop through the filelist and create individual binary files for each one and then relate them to the content. My concern is that you would likely need to save/create the original base entry before allowing the uploads in order to prevent weirdness like people uploading files but then not saving the form. 

If the 'multiple files' aspect can be a one-at-a-time thing ('add file', it adds, updates, refreshes) it would be easier because that could also trigger the contentlet save. If you really need the full version of using the OS file selector and choose multiple files at once, that code becomes significantly harder, but not undoable. 

I wouldn't attempt this in the actual backend, I'd write an html form and use the API so I can utterly ignore dojo. 

Mark

Here's some old js code that does this (again, as Nathan says, you probably need Enterprise to do this). If you want to follow this path, let me know, I have some more modern code hanging around that does this (you know, with fetch), but if you can wrap your head around this, you have 75% of the way there. 

function addcomment(){   
   
    var formData = new FormData();
 request = new XMLHttpRequest();

//WHILE THIS IS First, this only executes when the XHR/Ajax call is complete!

//Adding the file here would be pointless, we are already done talking to the server

request.onreadystatechange = function() {
  if (request.readyState == 4){
        if (request.status === 200) {
          console.log("Create Eiffel Connect:");   
          console.log(request.responseText);
            location.href="${VTLSERVLET_URI}?dotcache=refresh";         //reload the page
        } else { 
           console.log("Error", request.statusText); 
        } 
}
};

request.open("POST", "/api/content/publish/1", true);  

//grab all our data from our form

var comment=document.getElementById('Comment').value;
var d=new Date();
var mon=d.getMonth()+1;
var day=d.getDate();
var atime=d.getFullYear()+"-"+mon+"-"+day+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
console.log(atime);

//Create our datablob which we will send to the API. It has to have either STname  (for a new entry)

//OR the identifier of the existing object we are updating!

//This creates a new entry.

 var dataObj={
          'stName':'ParisContentComment',
          'identifier1' : document.identifier,
          'pageurl' : '$VTLSERVLET_URI',
          'user' : '$reviewuser',
          'useremail' : '$reviewemail',
          'userdepartment' : '$reviewdept',
          'userjob' : '$reviewjob',
          'highlight' : document.highlit,
          'comment' : comment,
          'reported': atime,
          'contentHost':'SYSTEM_HOST'};   
   
 formData.append('json',JSON.stringify(dataObj));   

 

//we cannot pass the image the same way as a text field.

//GET The image.

var theimager=document.getElementById('tpic');

var file=theimager.files[0];//this also only GETS 1, this is a loop if you suppose multiples-at-once

//here we are just using the HTML input type equals file. You can get your image other ways!

if (file)
formData.append("document", file);

//append the file to our existing dataObj. 

//obviously only if you have a file that has been attached.

  
 request.send(formData);  
  
   
       

}

--
http://dotcms.com - Open Source Java Content Management

---
You received this message because you are subscribed to the Google Groups "dotCMS User Group" group.

To unsubscribe from this group and stop receiving emails from it, send an email to dotcms+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/dotcms/1663591978535.85785%40gettysburg.edu.

[krishna kiriti]

Hello Mark and Nathan,

@Nathan, Thanks a lot for your reply. I would definitely go through those resources 

@Mark, Thank you so much for the info. I'm going to have enterprise licence soon. So can you help me with the updated snippet? 

Regards

Krishna Kireeti 

To view this discussion on the web visit https://groups.google.com/d/msgid/dotcms/CAFeiKqNQxHGPM_CrdqEFVaYTc41iP52iPCBrQB%3DtCVNDGX0Pig%40mail.gmail.com.