File Upload Plugin Issue

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>

Add comment

Magdalena Dembna staff answered 5 years ago

0 0 Best answer

<p>I've created a snippet which seems to work fine - it would be great help, <a href="/profile/?id=68328" target="_blank" rel="nofollow">@jallenmorris</a> 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 <code>css font html img js scc</code> folders):</p>

<pre class="prettyprint"><code><!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>
    
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />
    
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    
    <link href="css/mdb.min.css" rel="stylesheet" />
    
    <link href="css/style.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/addons/mdb-file-upload.css" />
  </head>

<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    
    <script type="text/javascript" src="js/popper.min.js"></script>
    
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    
    <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>
</code></pre>

Please insert min. 20 characters.

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>

Add comment

Anna Morawska staff answered 5 years ago

0 0 Best answer

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.

Add comment

Anna Morawska staff answered 5 years ago

0 0 Best answer

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/

Add comment

Write

Create snippet

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

BizRTC

Pro User 95Support score
18Questions 2Answers 2Snippets