Creating a Zip file from Repeating Fields that have links to attached Media

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to use a JavaScript system to create a zip file that Users can download on the front-end of the site. The zip file generation will be handled by a third-party plugin. I need to be able to loop over repeatable field groups (RFGs) containing file fields so I can push each file into the files array.

Solution: Use jQuery.each to traverse the DOM and find the file URL and filename. Push those items into the zip plugin API. Loop:

<ul>
<wpv-loop>
  <li class="rfg">
    <span class="filepath">https://yoursite.com/path/to/image.jpg</span>
    <span class="filename">File name</span>
  </li>
</wpv-loop>
</ul>

JS:

// loop over each result and add the necessary file info to folder
jQuery.each('.rfg', function( index, item ){
  folder.file( jQuery(item).find('.filepath').text(), jQuery(item).find('.filename').text());
});

Relevant Documentation:
http://api.jquery.com/jquery.each/

This support ticket is created 5 years, 8 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will start replying to tickets in about 3.30 hours from now. Thank you for your understanding.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Types plugin, Views plugin

This topic contains 2 replies, has 2 voices.

Last updated by aprilA 5 years, 8 months ago.

Assisted by: Christian Cox.

Author

Posts

March 14, 2019 at 5:46 pm #1214351

aprilA

So I have a custom post type that has custom fields. Within these custom fields I have a repeatable field group where our users are able to attached multiple files to said custom post. I am wanting to use javascript to create a download all media attached to this post button when the user views said post.

I saw this post about creating an accordion from a looped repeating field and was wondering if the same could be achieved, but for my usage.

https://toolset.com/forums/topic/use-repeating-fields-for-accordion-title-and-content/

My thought process was to use jsZip and use the code below to collect all the files.

Javascript on Page

var zip = new JSZip();

//skip this step if you don't want your files in a folder.
var folder = zip.folder("example");
folder.file("fileURLHERE1.jpeg", "FileNameFromRepeatingField"); //requires filesaver.js
folder.file("fileURLHERE1.jpeg", "FileNameFromRepeatingField");

//...so on until loop of all repeating fields

zip.generateAsync({type:"blob"})
.then(function(content) {
//see FileSaver.js
saveAs(content, "posttitle_media.zip");
});

Maybe I am overthinking this and there is an easier way to do this.

March 14, 2019 at 7:03 pm #1214391

Christian Cox

You could use jQuery.each to loop over the results in the DOM, then grab the strings from those items. This will work best without AJAX. In your Loop editor of the View of RFGs:

...
<ul>
<wpv-loop>
  <li class="rfg">
    <span class="filepath"><em><u>hidden link</u></em>;
    <span class="filename">File name</span>
  </li>
</wpv-loop>
</ul>
...

In JS, something like this:

// loop over each result and add the necessary file info to folder
jQuery.each('.rfg', function( index, item ){
  folder.file( jQuery(item).find('.filepath').text(), jQuery(item).find('.filename').text());
});

March 14, 2019 at 9:18 pm #1214443

aprilA

My issue is resolved now. Thank you!