По сути в formData должно было собраться все значения с инпутов + файл, который я сам добавляю, но этого не происходит.
+ я в консоли проверил, действительно ли все правильно передаю:
Что я делаю не так?
Форма:
<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',
})
