[Проблема]

I am trying implement a drag and drop uploader in the newattachment template. I have used all variables in the default template, and everything is looking right, the hover is good when I hover a file over it. but when I release the mouse on the box it does not upload the file.

I have included all code I felt relevant that could be causing a problem. I can not figure out what the issue is.

*keep in mind this is a stripped code*

the form:

<form enctype="multipart/form-data" action="newattachment.php?do=manageattach&amp;p=$postid" id="manageAttachmentForm" name="newattachment" method="post">
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
<input type="hidden" name="do" value="manageattach" />
<input type="hidden" name="t" value="$threadid" />
<input type="hidden" name="f" value="$forumid" />
<input type="hidden" name="p" value="$postid" />
<input type="hidden" name="poststarttime" value="$poststarttime" />
<input type="hidden" name="editpost" value="$editpost" />
<input type="hidden" name="posthash" value="$posthash" />

The drop zone:

<div class="upload-container" id="uploadholder">
  <input type="hidden" name="MAX_FILE_SIZE" value="$inimaxattach">
  <div class="attachment-form">
    <div class="form-group"><label for="fileInput">Select files to upload</label></div>
    <input type="file" name="attachment[]" id="fileInput" multiple />
  </div>
  <div class="js-only">
  <p class="help-block prompt">
    <span class="banner-text">Drag files here to upload</span>
    <br>or<br>
    <button class="btn btn-lg btn-default" data-action="choose-files">Select Files</button>
  </p>
  <div id="uploadStatus" style="display: none;"><i class="fal fa-spinner fa-spin"></i> Uploading files. Please wait.</div>
  <p class="help-block prompt">Maximum upload file size: 20 MB.<br><a href="#" data-toggle="modal" data-target="#uploadInfo">What can I upload?</a></p>
  </div>
</div>

The Submit button:

<input type="submit" id="btnUpload" class="btn btn-lg btn-block btn-primary" name="upload" value="$vbphrase[upload]" onclick="return verify_upload(this.form);">
</form>

The Js:

<script>
$('form#manageAttachmentForm #fileInput').change( function(event) {
	$('<input />').attr('type', 'hidden')
              .attr('name', 'upload')
              .attr('value', '1')
              .appendTo('#manageAttachmentForm');
	$('form#manageAttachmentForm #uploadStatus').show();
	$('form#manageAttachmentForm').submit();
});

$('#uploadholder').on({
	'dragover dragenter': function(e) {
		$('#uploadholder .banner-text').text("Drop files here");
		$(this).addClass("holder-hover");
		e.preventDefault();
		e.stopPropagation();
	},
	'dragleave': function(e) {
		$('#uploadholder .banner-text').text("Drag files here to upload");
		$(this).removeClass("holder-hover");
	},
	'drop': function(e) {
		$('#uploadholder .banner-text').text("Drag files here to upload");
		$(this).removeClass("holder-hover");
		var dataTransfer =  e.originalEvent.dataTransfer;
		if( dataTransfer && dataTransfer.files.length) {
			fileInput.files = dataTransfer.files;
			e.preventDefault();
			e.stopPropagation();
		}
	}
});
</script>

Also, I can upload attachments manually just fine. But I cant get the drag and drop portion to work.

DrCustUmz добавил 05-25-2020 в 02:12 PM
edited the code to better target the problem

I think the problem may lay in this bit of Js, but evrything looks correct to me.

'drop': function(e) {
  $('#uploadholder .banner-text').text("Drag files here to upload");
  $(this).removeClass("holder-hover");
  var dataTransfer =  e.originalEvent.dataTransfer;
  if( dataTransfer && dataTransfer.files.length) {
    fileInput.files = dataTransfer.files;
    e.preventDefault();
    e.stopPropagation();
  }
}