Ввод HTML-файла в Dropzone - PullRequest
Новая
       12

Ввод HTML-файла в Dropzone

0 голосов
/ 06 мая 2018

Я хочу использовать dropzone для ввода файла другой формы

Ниже приведен код с <input type="file"> с некоторой помощью из Dropzone.js и Stackoverflow : 

<form class="form-horizontal" action="/details/store" method="post" enctype="multipart/form-data">
    {{ csrf_field() }}
    <div class="row">
        <div class="form-group col-lg-6">
            <label for="title" class="control-label col-lg-3 text-semibold">Title</label>
            <div class="col-lg-9 {{ $errors->has('title') ? 'has-error' : '' }}">
                <input name="title" type="text" class="form-control" value="{{ old('title') }}" required>

                @if ($errors->has('title'))
                  <span class="help-block">{{ $errors->first('title') }}</span>
                @endif
            </div>
        </div>

        <div class="form-group col-lg-6">
            <label for="subtitle" class="control-label col-lg-3 text-semibold">Sub Title</label>
            <div class="col-lg-9">
                <input name="subtitle" type="text" class="form-control" value="{{ old('subtitle') }}">
            </div>
        </div>

        <div class="form-group col-lg-12">
            <label for="description" class="control-label col-lg-1 text-semibold">Description</label>
            <div class="col-lg-11">
                <textarea name="description" class="form-control">{{ old('description') }}</textarea>
            </div>
        </div>

        <div class="form-group col-lg-12">
            <label for="images" class="control-label col-lg-1 text-semibold">Images</label>
            <div class="col-lg-9" style="margin-left:4em;">
                <span class="help-block text-semibold" style="color:blue">Accepted Formats: .jpg, .jpeg, .png, .gif</span>

<!-- Here is the file input I want to convert to dropzone -->
                <input type="file" name="images[]" class="file-styled btn btn-primary" accept=".jpg, .jpeg, .png" required multiple>

                <span class="help-block">Accepted formats: png, jpg, gif</span>
                @if ($errors->has('images'))
                  <span class="help-block">{{ $errors->first('images') }}</span>
                @endif
            </div>
        </div>
    </div>

    <div class="text-center">
        <button type="submit" class="btn btn-primary">Create</button>
    </div>
</form>

Я пробовал разные способы использования dropzone с div, например: 

<div action="#" id="dropzone" class="dropzone">
    <div class="fallback">
        <input type="file" name="images[]" class="file-styled btn btn-primary" accept=".jpg, .jpeg, .png" required multiple>
    </div>
</div>

и JS 

Dropzone.options.dropzone = {
  url: "/properties/store",
  headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  },
  autoProcessQueue:false,
  uploadMultiple:true,
  paramName:"images",
  maxFilesize:1,
  maxFiles:10,
  addRemoveLinks:true,
  acceptedFiles: ".jpeg,.jpg,.png,.gif",
};

Dropzone отображается внутри формы, и она даже загружает (и удаляет) изображения, но когда я отправляю форму, на стороне сервера ничего не получалось как images . При нормальном input type="file" данные были получены по мере необходимости ...

Я не могу понять использование отдельных action="" в div и url:"" в JS, так как мне не нужны отдельные URL для файлов. Я хочу отправить его вместе с формой, используя маршрут действия формы.

Кстати, я использую PHP-Laravel для обработки на стороне сервера.

1 Ответ

0 голосов
/ 06 мая 2018

вы можете управлять им, используя другой подход.

  1. Удалите этот autoProcessQueue:false, и используйте отдельный URL (вместо url: "/properties/store") для загрузки своего изображения. Вы можете использовать что-то вроде ниже кода 

    Dropzone.options.dropzone = {
  url: "/your_controller/store_image",
  sending: function(data, xhr, formData){
      formData.append('_token', "{{ csrf_token() }}" );

   },

  paramName:"images",

  maxFiles:10,
  addRemoveLinks:true,
  acceptedFiles: ".jpeg,.jpg,.png,.gif",
  success: function(results, callback){
    //set value of your hidden input field here
    console.log(results['name']);
  }
};

  2. Затем, используя этот URL, управляйте этими загруженными файлами во временной папке и используйте скрытое поле для хранения данных этих файлов в основной форме. 

    public function store_image(Request $request){
  $file = Input::file('images');
  //getting image extension
  $extension = Input::file($filename)->getClientOriginalExtension(); 
  //renameing image
  $fileName = time() . '-' . uniqid() . '.' .$extension; 
  //uploading file to given path
    Input::file($filename)->move($destinationPath, $fileName); 
   echo json_encode($file->getClientOriginalName());
  }

  3. Наконец, вы можете сохранить данные формы без каких-либо хлопот. Когда пользователь отправит основную форму, переместите ваши файлы в основные папки и сохраните соответствующие данные в БД.

...