Topic: File Upload Plugin Issue

BizRTC pro asked 5 years ago


Expected behavior

I have bought material file upload -drag and drop plugin.I have attached both the css and js file in my projectlike this:

<link href="/customer/assets/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="/customer/assets/fontawesome/js/all.min.js"></script>
<link rel="stylesheet" type="text/css" href="/customer/assets/fontawesome/css/all.css">
<link rel="stylesheet" type="text/css" href="/customer/assets/datatables/datatables.css"/>
<link href="/customer/assets/css/mdb.min.css" rel="stylesheet">     
<script type="text/javascript" src="/customer/assets/sweetalert2/sweetalert2.all.js"></script>
<script type="text/javascript" src="/customer/assets/js/jquery-3.3.1.min.js"></script>            
<script type="text/javascript" src="/customer/assets/js/bootstrap-notify.js"></script>
<link rel="stylesheet" type="text/css" href="/customer/assets/sweetalert2/sweetalert2.css">
<script src="/customer/assets/plugins/ckeditor/ckeditor.js"></script>
<link href="/customer/assets/css/style.css" rel="stylesheet">
<link href="/customer/assets/dropzone/dropzone.css" rel="stylesheet">
<script src="/customer/assets/dropzone/dropzone.js"></script>
<link rel="stylesheet" type="text/css" href="/customer/assets/css/mdb-file-upload.min.css">
<script type="text/javascript" src="/customer/assets/js/mdb-file-upload.min.js"></script>

However when I do not get the desired results. Below is my code :

<div class="file-upload-wrapper">
    <input type="file" id="input-file-max-fs" class="file-upload" data-max-file-size="2M" />
</div>

<script type="text/javascript">
    $('.file_upload').file_upload();
</script>

*Actual behavior*How ever I see the following screen :Issue File Upload

I am not sure what I am doing wrong.

Resources (screenshots, code snippets etc.)

<div class="file-upload-wrapper">
    <input type="file" id="input-file-max-fs" class="file-upload" data-max-file-size="2M" />
</div>

<script type="text/javascript">
    $('.file_upload').file_upload();
</script>

Magdalena Dembna staff answered 5 years ago


I've created a snippet which seems to work fine - it would be great help, @jallenmorris if you would be able to provide additional information such as browser you're using, plugin version and code snippet. You can also test the code I was using and see if it works for you (file should be in the same directory as css font html img js scc folders):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Material Design Bootstrap - File Uplad Plugin</title>
    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <!-- Material Design Bootstrap -->
    <link href="css/mdb.min.css" rel="stylesheet" />
    <!-- Your custom styles (optional) -->
    <link href="css/style.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/addons/mdb-file-upload.css" />
  </head>

  <body>
    <div class="file-upload-wrapper">
      <div class="input-group mb-3">
        <input type="file" id="input-file-now" class="file_upload" />
      </div>
    </div>

    <!-- SCRIPTS -->
    <!-- JQuery -->
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="js/popper.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="js/mdb.min.js"></script>
    <script type="text/javascript" src="js/addons/datatables.min.js"></script>
    <script
      type="text/javascript"
      src="js/addons/mdb-file-upload.min.js"
    ></script>
    <script>
      $(".file_upload").file_upload();
    </script>
  </body>
</html>

Anna Morawska staff answered 5 years ago


Ok, thank you for letting us know - I will fix this in the documentation. In your case - the code should be written like this:

  <div class="file-upload-wrapper">
    <input type="file" id="input-file-max-fs" class="file_upload" data-max-file-size="2M" />
  </div>

  <script type="text/javascript">
    $('.file_upload').file_upload();
  </script>

jallenmorris priority commented 5 years ago

This is exactly the same as he has written above. I'm using it and it's not working for me either. There is LITTLE documentation on how to make this thing work. Great tools, but I'm not impressed with the documentation. I spent a lot of money on MDBootstrap and am rather shocked by the lack of documentation.


Anna Morawska staff answered 5 years ago


Hi there, It's because you have added .file-upload class to the input and then you initialized it using file_upload jQuery class selector - just make sure these two classes are consistent with each other and then everything should work fine :)

Best, Ania


BizRTC pro commented 5 years ago

Ever after changing it to this :

     $('.file_upload').file_upload();
<div class="file_upload-wrapper">
            <input type="file" id="input-file-max-fs" class="file-upload" data-max-file-size="2M" />
          </div>

it does not work, and FYI i had took this snippet from this tutorial page : https://mdbootstrap.com/plugins/jquery/file-upload/



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.7.5
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No
Tags