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

Question

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="{{ route('myroute', [$rooms->slug]) }}" method="POST" class="dropzone" id="addPhotosForm">
    {{ csrf_field() }}
  </form>
</div>
<div class="@if(count($rooms->photos) < 10) d-none @endif">
  <p>You have uploaded {{ count($rooms->photos)}} 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

EDIT: SOLUTION

Thanks @Lukas and @Miguel Cabrera for your quick replies!

I have adopted a solution based on your input.

<script type="text/javascript">
  var count = {{ count($rooms->photos) }};
  var maxFiles = 10 - {{ count($rooms->photos) }};
</script>

 <script type="text/javascript">
   Dropzone.options.addPhotosForm = {
    maxFiles: maxFiles,
   }
 </script>

This works perfectly. Thanks again!! :)

score 2 · Accepted Answer · answered Sep 27 '17 at 10:02

>Can I use Blade within Javascript?

Assuming $rooms->photos is an array or is implementing a Countable interface, here is how you can pass the photos count using blade to javascript:

<script type="text/javascript">
  var count = {{ count($rooms->photos) }};
</script>

2) Is there be a better way to limit all uploads to Dropzone?

I think your solution is good. Just remember about the backend protection for too many file uploads.

score 1 · Answer 2 · answered Sep 27 '17 at 10:06

It would be very difficult to do it on the blade and either way you would have to persist the data to some form of database.

I would say that you would have to pass the uploads to your API first and then you would have to add a field to the user that records the amount of uploads that the user has in dropzone. Then you would succeed or fail the API request before it hits the dropzone API.

class DropZoneController extends Controller {


    public function testAndUploadFile($user_id, Request $request)
    {

        $numUploads = DB::table('profile')
        ->select('dZUploads')
        ->where('user_id', '=', $user_id)
        ->get();

        if($numUploads >= 5){
            return response('Too Many Uploads', 412);
        } 

        else 
        {

        $numUploads += 1;
        $rows = DB::table('profile')
        ->where('user_id', '=', $user_id)
        ->update(['dZUploads' => $numUploads]);

        if(collect($rows)->isEmpty()){
            return response('Not Found', 404);
        } else {
            return response('Success', 200);
        }
    }
}

Then on success you would send the request for the file upload. You can choose to send it from JavaScript or from Laravel. I would just send the request from Laravel.

This will show you how to use Guzzle to send http requests from your API. https://stackoverflow.com/a/28281787/5231528

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

2 Answers2