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

Question

我在 Laravel 应用程序中使用 Dropzone。在 Dropzone 中，我可以限制一次上传的最大文件数。但是，刷新页面后，用户可以上传更多照片。

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

我可以通过计算此用户已为此页面上传的照片数量然后将 class 更改为 display:none 来在前端删除此功能；并发出如下警告：

<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>

这里的问题是，如果用户上传了 9 张照片，他们可以再上传 5 张照片，总共得到 14 张照片，而不是 10 张照片，这是所需的最大值。此外，如果用户是恶意的，他们可以简单地转到 Inspect Elements，删除显示：none;设置样式并上传任意数量的照片。

我想禁用用户在 Javascript 中上传更多照片的功能，我正在尝试使用 Laravel 的 Blade 来执行此操作，但遇到了一些问题。

所以，我有几个问题：

1) 我可以在 Javascript 内使用 Blade 吗？

我已经尝试过，例如使用：

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

然后我得到错误，

Uncaught SyntaxError: Unexpected token >

如果我能让它工作，我的想法是在 Dropzone 选项中执行此操作。

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

2) 有没有更好的方法来限制所有上传到 Dropzone？
我在 SO 上尝试了一些建议，但没有成功。

谢谢！

布拉德

编辑：解决方案

感谢@Lukas 和@Miguel Cabrera 的快速回复！

我已经根据您的意见采用了解决方案。

<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>

这非常有效。再次感谢！！ :)

Answer 1

>我可以在 Javascript 内使用 Blade 吗？

假设 $rooms->photos 是一个数组或正在实现一个 Countable 接口，下面是如何使用 blade 将照片计数传递给 javascript:

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

2) 有没有更好的方法来限制所有上传到 Dropzone？

我认为你的解决方案很好。请记住关于过多文件上传的后端保护。

Answer 2

在 blade 上执行此操作非常困难，而且无论哪种方式，您都必须将数据持久保存到某种形式的数据库中。

我会说你必须先将上传传递给你的 API 然后你必须向用户添加一个字段来记录用户在 dropzone 中的上传量。然后你会在 API 请求到达 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);
        }
    }
}

成功后您将发送文件上传请求。您可以选择从 JavaScript 或 Laravel 发送。我只想从 Laravel.

发送请求

这将向您展示如何使用 Guzzle 从您的 API 发送 http 请求。 https://whosebug.com/a/28281787/5231528

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

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

javascript

laravel-5

blade

dropzone.js