| Dr.CustUmz |
05-25-2020 06:22 AM |
Drag & Drop Upload Problem
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:
HTML Code:
<form enctype="multipart/form-data" action="newattachment.php?do=manageattach&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:
HTML Code:
<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:
HTML Code:
<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:
Code:
<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.
--------------- Added [DATE]1590415855[/DATE] at [TIME]1590415855[/TIME] ---------------
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.
Code:
'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();
}
}
|
More Information