drag and drop images

This commit is contained in:
Kyle
2021-02-15 16:58:08 -08:00
parent a20ebbf857
commit 225a0a2379
2 changed files with 30 additions and 10 deletions

View File

@@ -133,11 +133,16 @@ include('../globalHTML/header-1.php');
<div class='readable-background padding'> <div class='readable-background padding'>
<h5 class='margin-bottom padding input-description'>Upload custom frame images</h5> <h5 class='margin-bottom padding input-description'>Upload custom frame images</h5>
<div class='input-grid'> <div class='input-grid'>
<input type='file' accept='.png, .svg, .jpg, .jpeg, .bmp' placeholder='Via File Upload' class='input' oninput='imageLocal(event, uploadFrameOption);'> <div class='padding drop-area'>
<h5 class='margin-bottom padding input-description'>Drag and drop</h5>
<input type='file' multiple accept='.png, .svg, .jpg, .jpeg, .bmp' placeholder='File Upload' class='input' oninput='uploadFiles(event.target.files, uploadFrameOption);' data-dropFunction='uploadFrameOption' data-otherParams=''>
</div>
<div>
<input type='url' placeholder='Via URL' class='input' onchange='imageURL(this.value, uploadFrameOption);'> <input type='url' placeholder='Via URL' class='input' onchange='imageURL(this.value, uploadFrameOption);'>
</div> </div>
</div> </div>
</div> </div>
</div>
<div id='creator-menu-text' class='hidden'> <div id='creator-menu-text' class='hidden'>
<div class='readable-background padding margin-bottom'> <div class='readable-background padding margin-bottom'>
<h5 class='margin-bottom padding input-description'>Select a text area to edit</h5> <h5 class='margin-bottom padding input-description'>Select a text area to edit</h5>
@@ -196,9 +201,14 @@ include('../globalHTML/header-1.php');
<div class='readable-background padding margin-bottom'> <div class='readable-background padding margin-bottom'>
<h5 class='margin-bottom padding input-description'>Choose/upload your art</h5> <h5 class='margin-bottom padding input-description'>Choose/upload your art</h5>
<div class='input-grid margin-bottom'> <div class='input-grid margin-bottom'>
<input type='file' accept='.png, .svg, .jpg, .jpeg, .bmp' placeholder='Via File Upload' class='input' oninput='imageLocal(event, uploadArt, "autoFit");'> <div class='padding drop-area'>
<h5 class='margin-bottom padding input-description'>Drag and drop</h5>
<input type='file' multiple accept='.png, .svg, .jpg, .jpeg, .bmp' placeholder='File Upload' class='input' oninput='uploadFiles(event.target.files, uploadArt, "autoFit");' data-dropFunction='uploadArt' data-otherParams='autoFit'>
</div>
<div>
<input type='url' placeholder='Via URL' class='input' onchange='imageURL(this.value, uploadArt, "autoFit");'> <input type='url' placeholder='Via URL' class='input' onchange='imageURL(this.value, uploadArt, "autoFit");'>
</div> </div>
</div>
<h5 class='margin-bottom padding input-description'>Or enter a card name (and index)</h5> <h5 class='margin-bottom padding input-description'>Or enter a card name (and index)</h5>
<div class='input-grid margin-bottom'> <div class='input-grid margin-bottom'>
<input id='art-name' type='text' placeholder='Enter Card Name' class='input' onchange='fetchScryfallData(this.value, artFromScryfall);'> <input id='art-name' type='text' placeholder='Enter Card Name' class='input' onchange='fetchScryfallData(this.value, artFromScryfall);'>
@@ -229,9 +239,14 @@ include('../globalHTML/header-1.php');
<div class='readable-background padding margin-bottom'> <div class='readable-background padding margin-bottom'>
<h5 class='margin-bottom padding input-description'>Choose/upload your set symbol</h5> <h5 class='margin-bottom padding input-description'>Choose/upload your set symbol</h5>
<div class='input-grid margin-bottom'> <div class='input-grid margin-bottom'>
<input type='file' accept='.png, .svg, .jpg, .jpeg, .bmp' placeholder='Via File Upload' class='input' oninput='imageLocal(event, uploadSetSymbol, "resetSetSymbol");'> <div class='padding drop-area'>
<h5 class='margin-bottom padding input-description'>Drag and drop</h5>
<input type='file' multiple accept='.png, .svg, .jpg, .jpeg, .bmp' placeholder='File Upload' class='input' oninput='uploadFiles(event.target.files, uploadSetSymbol, "resetSetSymbol");' data-dropFunction='uploadSetSymbol' data-otherParams='resetSetSymbol'>
</div>
<div>
<input type='url' placeholder='Via URL' class='input' onchange='imageURL(this.value, uploadSetSymbol, "resetSetSymbol");'> <input type='url' placeholder='Via URL' class='input' onchange='imageURL(this.value, uploadSetSymbol, "resetSetSymbol");'>
</div> </div>
</div>
<h5 class='margin-bottom padding input-description'>Or enter a set code/rarity</h5> <h5 class='margin-bottom padding input-description'>Or enter a set code/rarity</h5>
<div class='input-grid margin-bottom'> <div class='input-grid margin-bottom'>
<input id='set-symbol-code' type='text' placeholder='Set Code' class='input' oninput='fetchSetSymbol();'> <input id='set-symbol-code' type='text' placeholder='Set Code' class='input' oninput='fetchSetSymbol();'>
@@ -268,10 +283,15 @@ include('../globalHTML/header-1.php');
<div class='readable-background padding margin-bottom'> <div class='readable-background padding margin-bottom'>
<h5 class='margin-bottom padding input-description'>Choose/upload your watermark</h5> <h5 class='margin-bottom padding input-description'>Choose/upload your watermark</h5>
<div class='input-grid'> <div class='input-grid'>
<input type='file' accept='.png, .svg, .jpg, .jpeg, .bmp' placeholder='Via File Upload' class='input' oninput='imageLocal(event, uploadWatermark, "resetWatermark");'> <div class='padding drop-area'>
<input type='url' placeholder='Via URL' class='input' onchange='imageURL(this.value, uploadWatermark, "resetWatermark");'> <h5 class='margin-bottom padding input-description'>Drag and drop</h5>
<input type='file' multiple accept='.png, .svg, .jpg, .jpeg, .bmp' placeholder='File Upload' class='input' oninput='uploadFiles(event.target.files, uploadWatermark, "resetWatermark");' data-dropFunction='uploadWatermark' data-otherParams='resetWatermark'>
</div>
<div>
<input type='url' placeholder='Via URL' class='input margin-bottom' onchange='imageURL(this.value, uploadWatermark, "resetWatermark");'>
<input type='text' placeholder='Via Set Code' class='input' onchange='getSetSymbolWatermark(this.value);'> <input type='text' placeholder='Via Set Code' class='input' onchange='getSetSymbolWatermark(this.value);'>
</div> </div>
</div>
<h5 class='collapsible collapsed padding input-description' onclick='toggleCollapse(event);'> <h5 class='collapsible collapsed padding input-description' onclick='toggleCollapse(event);'>
How to find set codes How to find set codes
</h5> </h5>

View File

@@ -62,7 +62,7 @@ function dropDrop(e) {
e.stopPropagation(); e.stopPropagation();
e.target.closest('.drop-area').classList.remove('hover'); e.target.closest('.drop-area').classList.remove('hover');
destination = window[e.target.closest('.drop-area').children[1].getAttribute('data-dropFunction')]; destination = window[e.target.closest('.drop-area').children[1].getAttribute('data-dropFunction')];
otherParams = window[e.target.closest('.drop-area').children[1].getAttribute('data-otherParams')]; otherParams = e.target.closest('.drop-area').children[1].getAttribute('data-otherParams');
uploadFiles(e.dataTransfer.files, destination, otherParams); uploadFiles(e.dataTransfer.files, destination, otherParams);
} }
async function uploadFiles(filesRaw, destination, otherParams) { async function uploadFiles(filesRaw, destination, otherParams) {