Using Laravel Blade in Javascript with Dropzone -> Max total Files uploaded

I'm using Dropzone within my Laravel application. In Dropzone, I can limit the maximum number of files uploaded at one time. However, after refreshing the page, users can then upload more photos.

Dropzone.options.addPhotosForm = {
  maxFiles: 5,
};

I am able to remove this ability on the front end by counting the number of photos that this user has already uploaded for this page and then changing the class to display:none; and giving a warning as follows:

<div class="@if(count($rooms->photos) >= 10) d-none @endif">
  <form action="" method="POST" class="dropzone" id="addPhotosForm">
    
  </form>
</div>
<div class="@if(count($rooms->photos) < 10) d-none @endif">
  <p>You have uploaded  photos. This is too many.</p>
</div>

The problem here is that if a user has uploaded 9 photos, they can then upload 5 more and get a total of 14 instead of 10 photos, which is the desired maximum. Furthermore, if the user is malicious, they can simply go to Inspect Elements, remove the display: none; style and upload as many photos as they want.

I would like to disable a user's ability to upload more photos within the Javascript and I am trying to use Laravel's Blade to do this, but with some problems.

So, I have a few questions:

1) Can I use Blade within Javascript?

I have tried this by, for example using:

 var count = count($rooms->photos);

I then get the error,

Uncaught SyntaxError: Unexpected token >

If I could get this to work, my idea was to do this within the Dropzone options.

init: function(file) {
  if (count >= 10){
      myDropzone.removeFile(file);
  };

2) Is there be a better way to limit all uploads to Dropzone?
I have tried a few of the suggestions here on SO with no luck.

Thanks!

Brad

via Chebli Mohamed