Upload multiple images At Once

This guide will explain how to upload multiple images simultaneously with one click.

We will explain two examples: uploading multiple photos AWS and uploading multiple Salesforce photos.

Multiple Photos AWS:

Initial Setup:

Drag and drop a “Repeat” field, and a “Photo” field inside it onto your form.
Drag and drop a ”Field Update Button”, an “HTML”, and a “JavaScript” field onto your form.
Rename the fields as needed.

Configuring The “HTML” Field:

Click the pencil icon of the “HTML” field.
Paste the code.

Please use this HTML code:
Here,

3b98-b145-b313 is the field ID of the “HTML” field.
97e1-230d-d7ba is the field ID of the “Photo” field.

<div class="col-sm-12">
<input class="content_media-3b98-b145-b313" id="myfile" name="myfile" type="file" accept="image/*" multiple style = "display:none">
</div>
<style>
tbody.new_repeat_entry_panel.group_component_list {
    display: none;
}
td:nth-child(2) {
    display: none;
}
th:nth-child(2) {
    display: none;
}
td#component-97e1-230d-d7ba {
    pointer-events: none;
}
</style>

Please make sure to update the field IDs as per your form.

Configuring The “JavaScript” Field:

Click the pencil icon of the “JavaScript” field.
Paste the code.
Here,

3b98-b145-b313 is the field ID of the “HTML” field.
f965-4786-4937 is the field ID of the “Field Update Button” field.
e7df-62ab-95a9 is the field ID of the “Repeat” field.

Please use this JavaScript Code.

// Define selectors
var hidden_photo_input = '.content_media-3b98-b145-b313';
var photo_upload_button = '#component-f965-4786-4937 .btn';
var photo_display_repeat = 'e7df-62ab-95a9';
var photo_field_repeat_group = '#component-e7df-62ab-95a9 .content_media';

// Remove any existing click listners
$( photo_upload_button ).off( 'click' );
// Add click event on field update button
$( photo_upload_button ).on( 'click', function() {
  // Trigger click on hidden file input with multiple photos options
  $( hidden_photo_input ).click();
} );

// Listen to the change event of multiple file upload element
$( hidden_photo_input ).on( 'change', function( event ) {
  // Reset the file preview repeat group
  formyoula.form_fields[ photo_display_repeat ].set( 'repeat_value', [] );
  // Transfer files to repeat group
  display_multiple_images();
} );
// Function to transfer multiple files to repeat group
function display_multiple_images() {
  // Multiple files selected by user
  var files_selected = $( hidden_photo_input )[ 0 ].files;

  // Create number of repeat entries based on selected files
  for ( let i = 0; i < files_selected.length; i++ ) {
    // Simulate button click on repeat group
    $( '.add' ).click();
  }
  // Select all the input type file items from the repeat entries
  var preview_images = $( photo_field_repeat_group ).toArray();
  // Put each file from the selected files to the each repeat entry photo element
  for ( let i = 0; i < preview_images.length && i < files_selected.length; i++ ) {
    // Create a new DataTransfer object
    var data_transfer = new DataTransfer();
    // Add file to the data transfer object
    data_transfer.items.add( files_selected[ i ] );
    // Set file of photo element to the files
    preview_images[ i ].files = data_transfer.files;
    // Trigger change so that photo element can run as per its logic
    $( preview_images[ i ] ).change();
  }
}

Paste this javascript for allowing multiple photos multiple times without removing the existing selections

// Define selectors
var hidden_photo_input = '.content_media-3b98-b145-b313';
var photo_upload_button = '#component-f965-4786-4937 .btn';
var photo_display_repeat = 'e7df-62ab-95a9';
var photo_field_repeat_group = '#component-e7df-62ab-95a9 .content_media';

// Remove any existing click listners
$( photo_upload_button ).off( 'click' );
// Add click event on field update button
$( photo_upload_button ).on( 'click', function() {
  // Trigger click on hidden file input with multiple photos options
  $( hidden_photo_input ).click();
} );

// Listen to the change event of multiple file upload element
$( hidden_photo_input ).on( 'change', function( event ) {
  // Transfer files to repeat group
  display_multiple_images();
} );
// Function to transfer multiple files to repeat group
function display_multiple_images() {
  // Multiple files selected by user
  var files_selected = $( hidden_photo_input )[ 0 ].files;

  // Create number of repeat entries based on selected files
  for ( let i = 0; i < files_selected.length; i++ ) {
    // Simulate button click on repeat group
    $( '.add' ).click();
  }
  // Select all the input type file items from the repeat entries
  var preview_images = $( photo_field_repeat_group ).toArray();
  // Reverse the array 
  preview_images.reverse()
  // Remove the new repeat entry input from the array of inputs
  preview_images.shift()
  // Put each file from the selected files to the each repeat entry photo element
  for ( let i = 0; i < preview_images.length && i < files_selected.length; i++ ) {
    // Create a new DataTransfer object
    var data_transfer = new DataTransfer();
    // Add file to the data transfer object
    data_transfer.items.add( files_selected[ i ] );
    // Set file of photo element to the files
    preview_images[ i ].files = data_transfer.files;
    // Trigger change so that photo element can run as per its logic
    $( preview_images[ i ] ).change();
  }
}

Please make sure to update the field IDs as per your form.

Multiple Salesforce Photos:

Initial Setup:

Drag and drop a “Repeat” field, and a “Salesforce Photo” field inside it onto your form.
Drag and drop a ”Field Update Button”, an “HTML”, and a “JavaScript” field onto your form.
Rename the fields as needed.

Configuring The “HTML” Field:

Click the pencil icon of the “HTML” field.
Paste the code.

Please use this HTML code:

<div class="col-sm-12">
<input class="content_media-9f8d-f304-ceea" id="myfile" name="myfile" type="file" accept="image/*" multiple style="display:none">
</div>
<style>
tbody.new_repeat_entry_panel.group_component_list {
    display: none;
}
td:nth-child(2) {
    display: none;
}
th:nth-child(2) {
    display: none;
}
td#component-0e41-112c-8885 {
    pointer-events: none;
}
td#component-0e41-112c-8885 label {
    display: none;
}
</style>

Please make sure to update the field IDs as per your form.

Configuring The “JavaScript” Field:

Click the pencil icon of the “JavaScript” field.
Paste the code.

Please use this JavaScript Code.

$('#component-9c64-39ea-b9ea .btn').off('click')
$('#component-9c64-39ea-b9ea .btn').on('click',function(){
$( '.content_media-9f8d-f304-ceea' ).click()

})

// Listen to the change event of multiple file upload element
$( '.content_media-9f8d-f304-ceea' ).on( 'change', function( event ) {
  // Reset the file preview repeat group
  formyoula.form_fields[ '9198-d779-5418' ].set( 'repeat_value', [] );
  // Transfer files to repeat group
  transfer_files();
} );
// Function to transfer multiple files to repeat group
function transfer_files() {
  // Multiple files selected by user
  var files_selected = $( '.content_media-9f8d-f304-ceea' )[ 0 ].files;

  // Create number of repeat entries based on selected files
  for ( let i = 0; i < files_selected.length; i++ ) {
    // Simulate button click on repeat group
    $( '.add' ).click();
  }
  // Select all the input type file items from the repeat entries
  var preview_images = $( '#component-9198-d779-5418 .formyoula_file_input' ).toArray();
  // Put each file from the selected files to the each repeat entry photo element
  for ( let i = 0; i < preview_images.length && i < files_selected.length; i++ ) {
    // Create a new DataTransfer object
    var data_transfer = new DataTransfer();
    // Add file to the data transfer object
    data_transfer.items.add( files_selected[ i ] );
    // Set file of photo element to the files
    preview_images[ i ].files = data_transfer.files;
    // Trigger change so that photo element can run as per its logic
    $( preview_images[ i ] ).change();
  }
}

Use this javascript to allow multiple photos multiple times without removing the existing selections

$('#component-9c64-39ea-b9ea .btn').off('click')
$('#component-9c64-39ea-b9ea .btn').on('click',function(){
$( '.content_media-9f8d-f304-ceea' ).click()

})

// Listen to the change event of multiple file upload element
$( '.content_media-9f8d-f304-ceea' ).on( 'change', function( event ) {
  // Transfer files to repeat group
  transfer_files();
} );
// Function to transfer multiple files to repeat group
function transfer_files() {
  // Multiple files selected by user
  var files_selected = $( '.content_media-9f8d-f304-ceea' )[ 0 ].files;
  // Create number of repeat entries based on selected files
  for ( let i = 0; i < files_selected.length; i++ ) {
    // Simulate button click on repeat group
    $( '.add' ).click();
  }
  // Select all the input type file items from the repeat entries
  var preview_images = $( '#component-9198-d779-5418 .formyoula_file_input' ).toArray();
  // Reverse the array 
  preview_images.reverse()
  // Remove the new repeat entry input from the array of inputs
  preview_images.shift()
  // Put each file from the selected files to the each repeat entry photo element
  for ( let i = 0; i < preview_images.length && i < files_selected.length; i++ ) {
    // Create a new DataTransfer object
    var data_transfer = new DataTransfer();
    // Add file to the data transfer object
    data_transfer.items.add( files_selected[ i ] );
    // Set file of photo element to the files
    preview_images[ i ].files = data_transfer.files;
    // Trigger change so that photo element can run as per its logic
    $( preview_images[ i ] ).change();
  }
}

Please make sure to update the field IDs as per your form.

Test The Form:

Try the form.
Click “Select Photos”.

Choose multiple images from the gallery.
It will upload the photos on the form.

Example Form.json22.3KB

Multiple Photos[Existing photos support ].json21.5KB

For any questions, please contact us - [email protected] or the Formyoula in-app chat. 🙂