@uzi_no_uzi

Почему formData отправляется пустым?

По сути в formData должно было собраться все значения с инпутов + файл, который я сам добавляю, но этого не происходит.

+ я в консоли проверил, действительно ли все правильно передаю:
5c3b1e29dff8d777715571.jpeg

Что я делаю не так?

Форма:

<form action="/add/file"  id="report" method='POST'  enctype="multipart/form-data" name='upload'>
    <p><?=$lang_add_files[0]?></p>
    <div>
      <input name="uploadfile" type="file" id="fileElem">
      <label for='fileElem' class="fake-fileload button">Select file</label>
      <span class="fake-fileload-label">
          .pdf
      </span>
    </div>
    <br><br>
	
	
	
	<?=$lang_add_files[2]?><br>
	<input type=text size="60" name="title"></input><br><br>
	<?=$lang_add_files[3]?><br>
	<input type=text size="60" name="tags"></input><br><br>
	
	
	<?=$lang_add_files[4]?><bR>
	<textarea class="panel" name="desk" id="" cols="57" rows="10" ></textarea>
	
	<br><br>
	<input type="submit" class="panel" value="<?=$lang_add_files[5]?>" />
	
	
	
  </form>


Сам код JS.

function StyleInput(options) {
            this.inputsFile = document.querySelector(options.targetInputsSelector);
            this.elementOutputPath = options.elementToOutputSeelector;
            this.classToCloseButton = options.classToCloseButton;
            this.selectorToCloseButton = options.selectorToCloseButton;
            this.dropArea = document.querySelector(options.dropArea);
            this.data = [];
            this.form = document.querySelector(options.form);
          
          
          
            var self = this;
          
            this.changePath = function() {
              filePath = self.data[0].name;
              var output = self.inputsFile.parentNode.querySelector(self.elementOutputPath);
              if(self.checkfile(filePath)) {
                output.innerHTML = filePath + '<div class="'+ self.classToCloseButton + '"> </div> ';
              } else {
                output.innerHTML = '.pdf'; 
              }
          
              var closeButton = document.querySelector(self.selectorToCloseButton);
              if(closeButton) {
                closeButton.onclick = function() {
                  self.deleteFile()
                }
              }
          
              
            }
          
          
           
            this.sendFile = function() {
                file = self.data;
                console.log(document.forms.upload);
                var url = 'ВАШ URL ДЛЯ ЗАГРУЗКИ ФАЙЛОВ'
                var xhr = new XMLHttpRequest()
                var formData = new FormData(document.forms.upload)
                xhr.open('POST', url, true)
              
                xhr.addEventListener('readystatechange', function(e) {
                  if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById('drop-area').innerHTML = xhr.responseText;
                  }
                  else if (xhr.readyState == 4 && xhr.status != 200) {
                    // Ошибка. Информируем пользователя
                  }
                })
              
                formData.append('file', file)
                xhr.send(formData)
            }
          
            this.checkfile = function(filepath) {
              if (filepath.indexOf('rar', filepath.lastIndexOf('.')+1) > -1) {
                return true;
              } else {
                self.data = [];
                return false;
              }
            }
          
          
            this.addFile = function() {
          
                  //Drag and drop
          
                  var eventsDrop = ['dragenter', 'dragover', 'dragleave', 'drop',];
          
          
                  function preventDefaults (e) {
                    e.preventDefault()
                    e.stopPropagation()
                  }
                
                  for(var i = 0; i < eventsDrop.length; i++) {
                    self.dropArea.addEventListener(eventsDrop[i], preventDefaults)
                  }
                
                
                  var eventsEnter = ['dragenter', 'dragover'];
          
                  function highlight(e) {
                    self.dropArea.classList.add('highlight')
                    console.log(1)
                  }
                
                  for(var i = 0; i < eventsEnter.length; i++) {
                    self.dropArea.addEventListener(eventsEnter[i], highlight)
                  }
                
                  
                
                  var eventsLeave = ['dragleave', 'drop',];
          
                  function unhighlight(e) {
                    self.dropArea.classList.remove('highlight')
                  }
                  
                  for(var i = 0; i < eventsLeave.length; i++) {
                    self.dropArea.addEventListener(eventsLeave[i], unhighlight)
                  }
          
                  self.dropArea.addEventListener('drop', function(e) {
                    self.data = e.dataTransfer.files;
                    self.changePath()
                  })
                
          
                  self.inputsFile.addEventListener('change', function() {
                    self.data = self.inputsFile.files;
                    self.changePath()
                  });
          
                  self.form.addEventListener('submit', function() {
                    self.sendFile();
                  })
            }
          
            this.deleteFile = function() {
              self.data = [];
            
              var output = self.inputsFile.parentNode.querySelector(self.elementOutputPath);
              output.innerHTML = '.pdf';
            }
          
            this.addFile();
          }
          
          new StyleInput({
            dropArea: '#drop-area',
            targetInputsSelector: '#fileElem',
            elementToOutputSeelector: '.fake-fileload-label',
            classToCloseButton: 'fake-fileload-icon',
            selectorToCloseButton: '.fake-fileload-icon',
            form: '#report',
          })
  • Вопрос задан
  • 176 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы