Skip to content

Instantly share code, notes, and snippets.

@mudassaralichouhan

mudassaralichouhan/drag and drop.html

Last active November 24, 2022 04:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mudassaralichouhan/49733dead835182eda4b7f4161863d02 to your computer and use it in GitHub Desktop.
Save mudassaralichouhan/49733dead835182eda4b7f4161863d02 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
drag and drop.html
@extends('layouts.merchant')
@section('css')
<style>
body {
font-family: sans-serif;
}
a {
color: #369;
}
img:after {
display: inline-block;
content: "\00d7"; /* This will render the 'X' */
content: 'x';
font-weight: 300;
font-family: Arial, sans-serif;
}
.note {
width: 500px;
margin: 50px auto;
font-size: 1.1em;
color: #333;
text-align: justify;
}
#drop-images, #drop-thumbnail {
border: 2px dashed #ccc;
border-radius: 20px;
padding: 20px;
}
#drop-images.highlight, #drop-thumbnail.highlight {
border-color: purple;
}
p {
margin-top: 0;
}
.my-form {
margin-bottom: 10px;
}
#gallery-thumbnail, #gallery-images {
margin-top: 10px;
}
#gallery-thumbnail img, #gallery-images img {
width: 150px;
margin-bottom: 10px;
margin-right: 10px;
vertical-align: middle;
}
.button {
display: inline-block;
padding: 10px;
background: #ccc;
cursor: pointer;
border-radius: 5px;
border: 1px solid #ccc;
}
.button:hover {
background: #ddd;
}
</style>
@endsection
@section('content')
<div class="row">
<div class="col-lg-12">
<h1>{{$title}}</h1>
</div>
</div>
<div class="row pt-10">
<div class="col-lg-12">
<a href="{{ route('albums.list', $album->merchant_service->id) }}"
class="btn btn-primary pull-right">Back</a>
</div>
</div>
<div class="row" id="form">
<div class="col-lg-12 pt-20">
<div class="panel panel-default">
<div class="panel-heading">
Add Album
</div>
<div class="panel-body">
<div class="row">
<form role="form" action="{{ route('albums.edit', $album->id) }}" method="post"
enctype="multipart/form-data">
{{csrf_field()}}
<div class="col-lg-12">
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="form-group">
<label>Name<span class="required-star">*</span></label>
<input type="text" name="name" id="name"
class="form-control {{ $errors->has('name') ? ' is-invalid' : '' }}"
placeholder="Enter Album Name" value="{{ old('name', $album->name) }}"
required>
@if ($errors->has('name'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('name') }}</strong>
</span>
@endif
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="form-group">
<label>Headline</label>
<input type="text" name="headline" id="headline"
class="form-control {{ $errors->has('headline') ? ' is-invalid' : '' }}"
placeholder="Enter Headline"
value="{{ old('headline', $album->headline) }}"
>
@if ($errors->has('headline'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('headline') }}</strong>
</span>
@endif
</div>
</div>
</div>
<div class="col-lg-12 mb-20">
{{--<div class="form-group col-md-6 col-sm-6 col-xs-12">
<label>Your Business <span class="required-star">*</span></label>
<select name="business" id="business"
class="form-control {{ $errors->has('business') ? ' is-invalid' : '' }}">
<option value="">Select Business</option>
@foreach($business_list as $business)
@if(old('business', $album->merchant_service_id) == $business->id)
<option value="{{ $business->id }}"
data-phone="{{ $business->phone_code }}"
selected>{{ $business->name }}</option>
@else
<option value="{{ $business->id }}"
data-phone="{{ $business->phone_code }}">{{ $business->name }}</option>
@endif
@endforeach
</select>
@if ($errors->has('business'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('business') }}</strong>
</span>
@endif
</div>--}}
<div class="form-group col-md-6 col-sm-6 col-xs-12">
<label class="">Status</label>
<div>
<input name="is_active" type="checkbox"
{{ ($album->status == 1? "checked":'') }} data-toggle="toggle">
<input type="hidden" name="status" id="is_active"
value="{{ ($album->status == 1 ? 1 : 0) }}">
{{-- <input name="status" type="checkbox"
{{ $album->status == 1? "checked":'' }} data-toggle="toggle">
<input type="hidden" name="status" id="status"
value="{{ (old("status", $album->status) == 1 ? 1 : 0) }}"> --}}
</div>
</div>
</div>
<div class="col-lg-12 mb-20">
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="form-group">
<label>Thambnail <span class="required-star">*</span>
<progress id="progress-bar-thumbnail" max=100 value=0></progress>
</label>
<div id="drop-thumbnail">
<div class="my-form">
<p>Upload multiple files with the file dialog or by dragging and
dropping images onto the dashed region</p>
<input type="file" name="thumbnail" id="thmbnail" accept="image/*"
onchange="handleFiles(this.files, 'gallery-thumbnail', 'progress-bar-thumbnail', false)"
class="d-none {{ $errors->has('thumbnail') ? ' is-invalid' : '' }}">
<div id="gallery-thumbnail">
<img
src="{{ asset('images/albums/thumbnail/'.$album->thumbnail) }}"/>
</div>
<label class="button" for="thmbnail">Select some files</label>
</div>
</div>
@if ($errors->has('thumbnail'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('thumbnail') }}</strong>
</span>
@endif
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="form-group">
<label>Image(s) <span class="required-star">*</span>
<progress id="progress-bar-images" max=100 value=0></progress>
</label>
<div id="drop-images">
<div class="my-form">
<p>Upload multiple files with the file dialog or by dragging and
dropping images onto the dashed region</p>
<input type="file" name="images[]" id="images" accept="image/*" multiple
onchange="handleFiles(this.files, 'gallery-images', 'progress-bar-images')"
class="d-none {{ $errors->has('images') ? ' is-invalid' : '' }}">
<div id="gallery-images">
@foreach($album->images as $image)
<img src="{{ asset('images/albums/'.$image->image) }}"
data-set="{{ $image->id }}"/>
@endforeach
</div>
<label class="button" for="images">Select some files</label>
</div>
</div>
@if ($errors->has('images'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('images') }}</strong>
</span>
@endif
</div>
</div>
</div>
<div class="col-lg-12 mt-10">
<div class="col-sm-6 col-md-6 col-lg-6">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('script')
<script>
drapable('drop-images', 'gallery-images');
drapable('drop-thumbnail', 'gallery-thumbnail');
function drapable(targetDiv, preview) {
let dropArea = document.getElementById(targetDiv);
dropArea.addEventListener('drop', (e) => {
var dt = e.dataTransfer
var files = dt.files
handleFiles(files, preview)
}, false);
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false)
document.body.addEventListener(eventName, preventDefaults, false)
})
;['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, (e) => {
dropArea.classList.add('highlight')
}, false)
})
;['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, (e) => {
dropArea.classList.remove('active')
}, false)
})
}
function preventDefaults(e) {
e.preventDefault()
e.stopPropagation()
}
function initializeProgress(numFiles, uploadProgress, progressBar) {
progressBar.value = 0
uploadProgress = []
for (let i = numFiles; i > 0; i--) {
uploadProgress.push(0)
}
}
function updateProgress(fileNumber, percent, uploadProgress, progressBar) {
uploadProgress[fileNumber] = percent
let total = uploadProgress.reduce((tot, curr) => tot + curr, 0) / uploadProgress.length
progressBar.value = total
}
function handleFiles(files, preview, bar, multiple = true) {
let uploadProgressImages = [];
let progressBarImages = document.getElementById(bar);
files = [...files];
initializeProgress(files.length, uploadProgressImages, progressBarImages);
// files.forEach((file, i) => {
// var url = ''
// var xhr = new XMLHttpRequest()
// var formData = new FormData()
// xhr.open('POST', url, true)
// xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
//
// // Update progress (can be used to show progress indicator)
// xhr.upload.addEventListener("progress", function (e) {
// updateProgress(i, (e.loaded * 100.0 / e.total) || 100, uploadProgressImages, progressBarImages)
// })
//
// xhr.addEventListener('readystatechange', function (e) {
// if (xhr.readyState == 4 && xhr.status == 200) {
// updateProgress(i, 100, uploadProgressImages, progressBarImages)
// } else if (xhr.readyState == 4 && xhr.status != 200) {
// // Error. Inform the user
// }
// })
//
// formData.append('upload_preset', 'ujpu6gyk')
// formData.append('file', file)
// xhr.send(formData)
// });
files.forEach(function (file) {
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onloadend = function () {
let img = document.createElement('img')
img.src = reader.result;
// img.ondblclick = (el) => {
// img.remove();
// }
if (multiple) {
document.getElementById(preview).appendChild(img)
} else {
document.getElementById(preview).innerHTML = '';
document.getElementById(preview).appendChild(img)
}
}
})
}
function removeImages() {
document.querySelectorAll('#gallery-images img').forEach((value, index) => {
value.ondblclick = (el) => {
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
},
type: 'POST',
url: 'http://localhost/bbb-web/merchant/albums/' + value.getAttribute('data-set') + '/image/delete',
data: {
id: value.getAttribute('data-set'),
_token: '{{ csrf_token() }}'
},
success: function (data) {
alert("Image has been successfully removed!!");
value.remove();
},
error: function (e) {
console.log(e);
alert("error");
}
});
}
});
}
removeImages();
</script>
@endsection
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment