I created a form that allows drag and drop for images. So what I've done is that when a user drops an image then the $("#fileuploader").on('drop', function(e) grabs the filename and then uses the $(this).trigger('got-dropped', [filename_list]); to then pass on the filename to the saveForm(). The problem I'm having with my code is that if I do submit a form with an image then my form is submitted twice, one with the image and one without the image. I know that the problem I'm having is due to this

1. $('#fileuploader').on('got-dropped', function(event, files){
2.     saveForm(files);
3. });
4. 
   
5. files = '';
6. saveForm(files);

but I'm not sure on how I should go about finding out if there was a file uploaded or not. If I remove

1. files = '';
2. saveForm(files);

then I can't submit my form, because the saveForm() function only works if I've dropped an image, but if I keep the code then my form is submitted twice.

Here is my full js code

1. $(document).ready(function()
2. {
3.     var getUrl = "http://cms.test";
4. 
   
5.     $("#fileuploader").uploadFile({
6.         url: getUrl+"/admin/includes/upload.php",
7.         multiple: true,
8.         dragDrop: true,
9.         showPreview: true,
10.         previewWidth: "100px",
11.         showDelete: true,
12.         fileName:"myfile"
13.     });
14. 
    
15.     $("#fileuploader").on('drop', function(e){
16.         e.preventDefault();
17. 
    
18.         var files_list = e.originalEvent.dataTransfer.files;
19. 
    
20.         var filename_list = [];
21.         for(x = 0; x < files_list.length; x++)
22.         {
23.             var filename = files_list[x].name;
24.             filename_list.push(filename);
25.         }
26. 
    
27.         $(this).trigger('got-dropped', [filename_list]);
28.     });
29. 
    
30.     $('#fileuploader').on('got-dropped', function(event, files){
31.         saveForm(files);
32.     });
33. 
    
34.     files = '';
35.     saveForm(files);
36. });
37. 
    
38. function saveForm(files_list)
39. {
40.     var getUrl = "http://cms.test";
41. 
    
42.     $(".create_menu").click(function(){
43.         var menu_title = $('input#menu_title').val();
44.         var type = $("input[name='type']:checked").val();
45.         var main_menu_checkbox = $('input[name=main_menu]').is(':checked');
46.         var side_menu_checkbox = $('input[name=side_menu]').is(':checked');
47. 
    
48.         if(main_menu_checkbox == true)
49.         {
50.             var main_menu = 1;
51.         }else{
52.             var main_menu = 0;
53.         }
54. 
    
55.         if(side_menu_checkbox == true)
56.         {
57.             var side_menu = 1;
58.         }else{
59.             var side_menu = 0;
60.         }
61. 
    
62.         var files = files_list;
63. 
    
64.         var selectParentMenu = $('#selectParentMenu').val();
65. 
    
66.         var dataString = 'menu_title='+menu_title+'&type='+type+'&main_menu='+main_menu+'&side_menu='+side_menu+'&selectParentMenu='+selectParentMenu+'&files='+files;
67. 
    
68.         $.ajax({
69.             type: 'post',
70.             url: getUrl+'/admin/menus.php?source=add_menu',
71.             data: dataString,
72.             success: function(){
73.                 // $("#message").html("<h2>It has been submitted</h2>");
74.             }
75.         })
76.     });
77. }