Forums

ChronoForms v8 is now WordPress ready, ChronoMails is out

The JED needs volunteers!

Avoid file upload duplicates

ChronoForms v5
st
stojsins 18 Jan, 2019
Hello.
​
How can I avoid duplicate file upload in form? I'm using 3 file upload elements in my form, and I will like to prevent user to upload files with the same names.
he
healyhatman 18 Jan, 2019
PHP block:
​
$array = array($this->data("filefieldname1"), $this->data("filefieldname2"), $this->data("filefieldnam3"));
return count($array) > count(array_unique($array));
This will return false if there are duplicates, true if there are no duplicates. Then you just use an event switcher with data source {var:phpname} and do whatever you need to do in the events.
st
stojsins 19 Jan, 2019
Thank you very much healyhatman.
But, since that I am a beginner with CF, could you please tell me where to add all that?
Thank you in advanced.
he
healyhatman 19 Jan, 2019
In a PHP block. Don't copy and paste it, type it out manually.
​
By the way, this just checks if the files have the same name, not if the content of the files is identical.
st
stojsins 19 Jan, 2019
Thank you very much healyhatman.
I'm using CF5, so I guess that PHP block is Custom Code element?
I have added next PHP code in Custom Code element with a label "my_php":

<?php
$array = array($this->data("file3"), $this->data("file4"), $this->data("file5"));
return count($array) > count(array_unique($array));
?>


Then I added Event Switcher with next code:

{var:my_php}


Is this ok so far?
If it is, where should I add Custom Code element and Event Switcher in Setup? I guess that it should go in element "On Submit"? If so, where then? In File Uploads element "On success"?
​
Please check image:
​
he
healyhatman 19 Jan, 2019
Sorry I didn't see that you were going it in the older CFv5. I have no idea how to help you.
st
stojsins 19 Jan, 2019
Thank you one more time for trying healyhatman 🙂
Anybody else?
he
healyhatman 19 Jan, 2019
If you're only beginning, begin with v6.
Gr
GreyHead 19 Jan, 2019
Hi stojsins,
​
In CFv5 the form data is in $form->data (not $this->data - that is used in CFv5).
​
Bob
st
stojsins 19 Jan, 2019
Thank you very much Bob.
Could you please be so kind and tell me what and where to add?
​
PHP code should be, right:

<?php
$array = array($form->data("file3"), $form->data("file4"), $form->data("file5"));
return count($array) > count(array_unique($array));
?>


But where should I add it?
And where should I add Event switcher with code:

{var:my_php}


Thank you in advanced.
st
stojsins 22 Jan, 2019
Answer
I have managed to resolve this with custom JS.
Here is the process, maybe one day someone will need it...
​
In Designer, I have created three file upload element with next:
  1. Names: file_1, file_2 and file_3
  2. Classes: files (same class for all three files upload elements)
  3. ID's: file_1, file_2 and file_3
On Submit action I have added onclick action with next code:
onclick=checkDuplicates(event)
After submit button element I have added custom code element with three JS:
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script >
    $('#file_1, #file_2, #file_3').change(function (e) {
        if ($('#file_1').val() != '' && $('#file_1').val() == $('#file_2').val() != '' && $('#file_2').val() || $('#file_1').val() != '' && $('#file_1').val() == $('#file_3').val() != '' && $('#file_3').val() || $('#file_2').val() != '' && $('#file_2').val() == $('#file_3').val() != '' && $('#file_3').val())
        {
            alert("You can not send two or more same files.");
        }
    });
</script>
<script type="text/javascript">
    checkDuplicates = function(e){
      var arr = ;
      var fileInputs = document.querySelectorAll(".files");
       fileInputs.forEach(function(input){
        if(arr.length == 0){
          arr.push(input.files[0].name);
        } else {
          if(arr.indexOf(input.files[0].name) > -1){
            e.preventDefault();
            alert("You can not send two or more same files.");
          } else {
            arr.push(input.files[0].name);
          }
        }
      }); 
    };
</script>
That's is.
​
Here how it works:
There is two validations: First validation will be triggered instantly during file selection, when duplicated file is selected. This validation will be a warning for user that two same files are selected. In case that user ignores the first validation, second validation will be triggered at submit action. User will not be able to submit files as long as he does not remove duplicated file(s).
This topic is locked and no more replies can be posted.