|
|
@@ -27,34 +27,21 @@
|
|
|
border: 0px;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
-
|
|
|
+ .btn_photo{
|
|
|
+ margin-bottom: -50px;
|
|
|
+ position: relative;}
|
|
|
/* ---------------------------------------
|
|
|
/* Fine Uploader Gallery View Styles
|
|
|
/* ---------------------------------------*/
|
|
|
|
|
|
-.note {
|
|
|
- width: 500px;
|
|
|
- margin: 50px auto;
|
|
|
- font-size: 1.1em;
|
|
|
- color: #333;
|
|
|
- text-align: justify;
|
|
|
-}
|
|
|
#drop-area {
|
|
|
border: 2px dashed #ccc;
|
|
|
border-radius: 20px;
|
|
|
- width: 480px;
|
|
|
- margin: 50px auto;
|
|
|
- padding: 20px;
|
|
|
-}
|
|
|
-#drop-area.highlight {
|
|
|
- border-color: purple;
|
|
|
-}
|
|
|
-p {
|
|
|
- margin-top: 0;
|
|
|
-}
|
|
|
-.my-form {
|
|
|
- margin-bottom: 10px;
|
|
|
+ width: 50%;
|
|
|
+ border-color: purple;
|
|
|
+ padding: 10px;
|
|
|
}
|
|
|
+
|
|
|
#gallery {
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
@@ -64,20 +51,148 @@ p {
|
|
|
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;
|
|
|
+#progress-bar{
|
|
|
+ display: none;
|
|
|
}
|
|
|
+
|
|
|
#fileElem {
|
|
|
display: none;
|
|
|
}
|
|
|
+ /* */
|
|
|
+ .container {
|
|
|
+ padding-top: 3%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hide-element {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .glyphicon-remove-circle {
|
|
|
+ float: right;
|
|
|
+ font-size: 2em;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ /*
|
|
|
+ * http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
|
|
|
+ */
|
|
|
+
|
|
|
+ .btn-file {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ /*box-shadow: 10px 10px 5px #888888;*/
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-file input[type=file] {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ min-width: 100%;
|
|
|
+ min-height: 100%;
|
|
|
+ font-size: 100px;
|
|
|
+ text-align: right;
|
|
|
+ filter: alpha(opacity=0);
|
|
|
+ opacity: 0;
|
|
|
+ outline: none;
|
|
|
+ background: white;
|
|
|
+ cursor: inherit;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .alert,
|
|
|
+ .well {
|
|
|
+ box-shadow: 10px 10px 5px;
|
|
|
+ -moz-box-shadow: 10px 10px 5px;
|
|
|
+ -webkit-box-shadow: 10px 10px 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #uploadDataInfo p {
|
|
|
+ margin-left: 2%;
|
|
|
+ margin-top: 3%;
|
|
|
+ font-size: 1.2em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .media-left #edit {
|
|
|
+ z-index: 1000;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .thumbnail #edit {
|
|
|
+ position: absolute;
|
|
|
+ display: inline;
|
|
|
+ z-index: 1000;
|
|
|
+ top: 1px;
|
|
|
+ right: 15px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .thumbnail #delete {
|
|
|
+ position: absolute;
|
|
|
+ display: inline;
|
|
|
+ z-index: 1000;
|
|
|
+ margin-top: 4%;
|
|
|
+ top: 20px;
|
|
|
+ right: 15px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .caption input[type="text"] {
|
|
|
+ /*width: 80%;*/
|
|
|
+ }
|
|
|
+
|
|
|
+ .thumbnail .fa-check-circle {
|
|
|
+ color: #006dcc;
|
|
|
+ *color: #0044cc;
|
|
|
+ }
|
|
|
+
|
|
|
+ .thumbnail .fa-times-circle {
|
|
|
+ color: #E74C3C;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-header .close {
|
|
|
+ float: right !important;
|
|
|
+ margin-right: -30px !important;
|
|
|
+ margin-top: -25px !important;
|
|
|
+ background-color: white !important;
|
|
|
+ border-radius: 15px !important;
|
|
|
+ width: 30px !important;
|
|
|
+ height: 30px !important;
|
|
|
+ opacity: 1 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-header {
|
|
|
+ padding: 0px;
|
|
|
+ min-height: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-dialog {
|
|
|
+ top: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .media-left img {
|
|
|
+ cursor: pointer;
|
|
|
+ padding-left: 20px;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label-tags {
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 1%;
|
|
|
+ color: black;
|
|
|
+ background-color: white;
|
|
|
+ border: 1px solid blue;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label-tags i {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ /**/
|
|
|
+#errorMessaage{
|
|
|
+ display: none;
|
|
|
+}
|
|
|
</style>
|
|
|
@endslot
|
|
|
@slot('subject')
|
|
|
@@ -245,72 +360,109 @@ p {
|
|
|
@enderror
|
|
|
|
|
|
</div>
|
|
|
- <div class="row col-md-4">
|
|
|
- <div class="form-group ">
|
|
|
|
|
|
|
|
|
- <label for="title">{{ __('product.featured_image') }}</label><i
|
|
|
- class="required"> *</i>
|
|
|
- <input type="file" name="featured_image"
|
|
|
+ <div class="form-group col-md-5">
|
|
|
|
|
|
- class="form-control photo browse @error('featured_image') is-invalid @enderror"
|
|
|
- value="{{old('featured_image')}}" autocomplete="featured_image"
|
|
|
- autofocus accept="image/*">
|
|
|
|
|
|
+ <label for="title">{{ __('product.featured_image') }}</label><i
|
|
|
+ class="required"> *</i>
|
|
|
|
|
|
- @error('featured_image')
|
|
|
- <span class="invalid-feedback" role="alert">
|
|
|
+ <span class="btn btn-primary btn-file"> <input type="file" id="uploadImages" name="featured_image" accept="image/*" class="form-control photo browse @error('featured_image') is-invalid @enderror"
|
|
|
+ value="{{old('featured_image')}}" autocomplete="featured_image" autofocus>تصویر شاخص </span>
|
|
|
+ <div class="hide-element" id="previewImages">
|
|
|
+ <div class="media">
|
|
|
+ <div class="media-left ">
|
|
|
+ <a role="button" class="btn btn-danger pull-right" id="delete"> <i
|
|
|
+ class="icon fa fa-close"></i> </a>
|
|
|
+{{-- <a role="button" class="btn btn-danger pull-right" id="delete0">Delete</a>--}}
|
|
|
+ <img class="media-object thumbnail m-auto" src="img/150x150.gif"
|
|
|
+ alt="" id="0" title="" data-toggle="modal"
|
|
|
+ data-target="#individualImagePreview">
|
|
|
+ </div>
|
|
|
+ <div class="media-body">
|
|
|
+ <p><label for="description">توضیحات: </label><input type="text" class="form-control" value=""name="description"></p>
|
|
|
+ <p><label for="caption">عنوان: </label><input type="text" class="form-control" value="" name="caption"></p>
|
|
|
+ {{-- <p><label for="tags">Tags:max of 3 tags.comma seperated </label><input type="text" class="form-control" value="" name="tags" /></p>--}}
|
|
|
+{{-- <a role="button" class="btn btn-danger pull-right" id="delete0">Delete</a>--}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ @error('featured_image')
|
|
|
+ <span class="invalid-feedback" role="alert">
|
|
|
<strong>{{ $message }}</strong>
|
|
|
</span>
|
|
|
- @enderror
|
|
|
- <div class="ml-2 col-sm-6 ">
|
|
|
+ @enderror
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-group col-md-5" id="drop-area">
|
|
|
+ <label for="title">{{ __('product.gallery_image') }}</label><i
|
|
|
+ class="required"> *</i>
|
|
|
+ <input type="file" name="gallery_image[]" id="fileElem"
|
|
|
+ class="form-control photo @error('gallery_image') is-invalid @enderror"
|
|
|
+ value="{{old('gallery_image')}}" autocomplete="gallery_image"
|
|
|
+ autofocus multiple accept="image/*"
|
|
|
+ onchange="handleFiles(this.files)">
|
|
|
+ <label class="btn btn-primary" for="fileElem"> ساخت گالری محصولات</label>
|
|
|
|
|
|
- <img src="" id="preview" class="img-thumbnail">
|
|
|
+ <progress id="progress-bar" max=100 value=0></progress>
|
|
|
+ <div id="gallery">
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <span class="btn btn-sm btn-success file_creator"><i
|
|
|
- class="fa fa-plus"></i></span>
|
|
|
- <div class="col-md-4 last_image">
|
|
|
- <div class="form-group ">
|
|
|
- <label for="title">{{ __('product.gallery_image') }}</label><i
|
|
|
- class="required"> *</i>
|
|
|
- <input type="file" name="gallery_image[]" id="gallery_image"
|
|
|
-
|
|
|
- class="form-control photo @error('gallery_image') is-invalid @enderror"
|
|
|
- value="{{old('gallery_image')}}" autocomplete="gallery_image"
|
|
|
- autofocus multiple>
|
|
|
-
|
|
|
- @error('gallery_image')
|
|
|
- <span class="invalid-feedback" role="alert">
|
|
|
+ @error('gallery_image')
|
|
|
+ <span class="invalid-feedback" role="alert">
|
|
|
<strong>{{ $message }}</strong>
|
|
|
</span>
|
|
|
- @enderror
|
|
|
- <div class="ml-2 col-sm-6 ">
|
|
|
+ @enderror
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <div id="individualImagePreview" class="modal fade" role="dialog">
|
|
|
+ <div class="modal-dialog modal-lg">
|
|
|
+
|
|
|
+ <!-- Modal content-->
|
|
|
+ <div class="modal-content">
|
|
|
+ <div class="modal-header">
|
|
|
+ <button type="button" class="close" data-dismiss="modal"><i class="fa fa-times"></i></button>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body">
|
|
|
+ <img src="" alt="default image" class="img-responsive" id="individualPreview" />
|
|
|
+ </div>
|
|
|
+ <div class="modal-footer" id="displayTags">
|
|
|
+ <div class="pull-left">
|
|
|
|
|
|
- <img src="" id="previewGallery" class="img-thumbnail">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!--Modal to display progress information while uploading data to server-->
|
|
|
+ <div id="progressModal" class="modal fade" role="dialog">
|
|
|
+ <div class="modal-dialog modal-lg">
|
|
|
|
|
|
+ <!-- Modal content-->
|
|
|
+ <div class="modal-content">
|
|
|
+ <div class="modal-header">
|
|
|
|
|
|
- <div id="drop-area">
|
|
|
+ </div>
|
|
|
+ <div class="modal-body">
|
|
|
+ <div id="ajaxLoad">
|
|
|
+ <i class="fa fa-cog fa-spin fa-4x"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <input type="file" id="fileElem" multiple accept="image/*"
|
|
|
- onchange="handleFiles(this.files)">
|
|
|
- <label class="button" for="fileElem"> ساخت گالری محصولات</label>
|
|
|
+ </div>
|
|
|
|
|
|
- <progress id="progress-bar" max=100 value=0></progress>
|
|
|
- <div id="gallery">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
-
|
|
|
-
|
|
|
<div class="form-group mb-0">
|
|
|
<div class="">
|
|
|
<button type="submit" class="btn btn-primary">
|
|
|
@@ -336,49 +488,7 @@ p {
|
|
|
@slot('script')
|
|
|
<script>
|
|
|
|
|
|
- $(document).on('click', '.file_creator', function () {
|
|
|
- $(".last_image:last").after($(".last_image:last").clone());
|
|
|
-
|
|
|
- });
|
|
|
-
|
|
|
- $(document).on("click", ".browse", function () {
|
|
|
- var file = $(this).parents().find(".file");
|
|
|
- file.trigger("click");
|
|
|
- });
|
|
|
- // show images feature
|
|
|
- $('input[name="featured_image"]').change(function (e) {
|
|
|
- var fileName = e.target.files[0].name;
|
|
|
- $("#file").val(fileName);
|
|
|
-
|
|
|
- var reader = new FileReader();
|
|
|
- reader.onload = function (e) {
|
|
|
- // get loaded data and render thumbnail.
|
|
|
- document.getElementById("preview").src = e.target.result;
|
|
|
-
|
|
|
- };
|
|
|
- // read the image file as a data URL.
|
|
|
- reader.readAsDataURL(this.files[0]);
|
|
|
- });
|
|
|
- //**************************show images gallery**********************************************
|
|
|
- $(document).on("click", ".browse", function () {
|
|
|
- var file = $(this).parents().find(".file");
|
|
|
- file.trigger("click");
|
|
|
- });
|
|
|
- $('input[name="gallery_image[]"]').change(function (e) {
|
|
|
- var fileName = e.target.files[0].name;
|
|
|
- $("#file").val(fileName);
|
|
|
-
|
|
|
- var reader = new FileReader();
|
|
|
- reader.onload = function (e) {
|
|
|
- // get loaded data and render thumbnail.
|
|
|
- document.getElementById("previewGallery").src = e.target.result;
|
|
|
-
|
|
|
- };
|
|
|
- // read the image file as a data URL.
|
|
|
- reader.readAsDataURL(this.files[0]);
|
|
|
- });
|
|
|
- // ****************************************
|
|
|
- // ************************ Drag and drop ***************** //
|
|
|
+// //**************************show images gallery**********************************************
|
|
|
let dropArea = document.getElementById("drop-area")
|
|
|
|
|
|
// Prevent default drag behaviors
|
|
|
@@ -451,7 +561,18 @@ p {
|
|
|
reader.onloadend = function() {
|
|
|
let img = document.createElement('img')
|
|
|
img.src = reader.result
|
|
|
+
|
|
|
+ document.getElementById('gallery').appendChild(img)
|
|
|
+
|
|
|
+ }
|
|
|
+ let close = new FileReader()
|
|
|
+ close.readAsDataURL(file)
|
|
|
+ close.onloadend = function() {
|
|
|
+ let button = document.createElement('img')
|
|
|
+ button.src = close.result
|
|
|
+
|
|
|
document.getElementById('gallery').appendChild(img)
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -480,7 +601,210 @@ p {
|
|
|
formData.append('file', file)
|
|
|
xhr.send(formData)
|
|
|
}
|
|
|
+ //***************FEATURE IMAGES***************************************
|
|
|
+ $(document).ready(function () {
|
|
|
+ $('[data-toggle="tooltip"]').tooltip({
|
|
|
+ html: true
|
|
|
+ });
|
|
|
+ $('.media').addClass('hide-element');
|
|
|
+ $('#imagesUploadForm').submit(function (evt) {
|
|
|
+ evt.preventDefault();
|
|
|
+ });
|
|
|
+ $('#edit').click(function () {
|
|
|
+ console.log('click detected inside circl-o of edit');
|
|
|
+ $('#edit').toggleClass('fa-circle-o').toggleClass('fa-check-circle');
|
|
|
+ if ($('#edit').hasClass('fa-check-circle')) {
|
|
|
+ $('#captionForImage').toggleClass('hide-element');
|
|
|
+ } else {
|
|
|
+ $('#captionForImage').toggleClass('hide-element');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $('#delete').click(function () {
|
|
|
+ console.log('click detected inside circl-o of delete');
|
|
|
+ $(this).closest('#previewImages').find('.media').remove();
|
|
|
+ $('#delete').toggleClass('fa-circle-o').toggleClass('fa-times-circle');
|
|
|
+ });
|
|
|
+ //namespace variable to determine whether to continue or not
|
|
|
+ var proceed = false;
|
|
|
+ //Ensure that FILE API is supported by the browser to proceed
|
|
|
+ if (window.File && window.FileReader && window.FileList && window.Blob) {
|
|
|
+ if (window.webkitURL || window.URL) {
|
|
|
+ $('#errorMessaage').removeClass('hide-element').addClass(
|
|
|
+ '').html('');
|
|
|
+ proceed = true;
|
|
|
+ } else {
|
|
|
+ $('#errorMessaage').removeClass('hide-element').addClass(
|
|
|
+ 'alert-warning').html('');
|
|
|
+ }
|
|
|
|
|
|
+ } else {
|
|
|
+ $('#errorMessaage').removeClass('hide-element').addClass(
|
|
|
+ 'alert-warning').html('');
|
|
|
+ }
|
|
|
+ if (proceed) {
|
|
|
+ var input = "";
|
|
|
+ var formData = new FormData();
|
|
|
+ $('input[name=featured_image]').on("change", function (e) {
|
|
|
+ var counter = 0;
|
|
|
+ var modalPreviewItems = "";
|
|
|
+ input = this.files;
|
|
|
+ $($(this)[0].files).each(function (i, file) {
|
|
|
+ formData.append("file[]", file);
|
|
|
+ });
|
|
|
+ $('#previewImages').removeClass('hide-element');
|
|
|
+ $('#imagesUpload').removeClass('disabled');
|
|
|
+ var successUpload = 0;
|
|
|
+ var failedUpload = 0;
|
|
|
+ var extraFiles = 0;
|
|
|
+ var size = input.length;
|
|
|
+ $(input).each(function () {
|
|
|
+ var reader = new FileReader();
|
|
|
+ var uploadImage = this;
|
|
|
+ console.log(this);
|
|
|
+ reader.readAsArrayBuffer(this);
|
|
|
+ reader.onload = function (e) {
|
|
|
+ var magicNumbers = validateImage.magicNumbersForExtension(e);
|
|
|
+ var fileSize = validateImage.isUploadedFileSizeValid(uploadImage);
|
|
|
+ var extension = validateImage.uploadFileExtension(uploadImage);
|
|
|
+ var isValidImage = validateImage.validateExtensionToMagicNumbers(magicNumbers);
|
|
|
+ var thumbnail = validateImage.generateThumbnail(uploadImage);
|
|
|
+ if (fileSize && isValidImage) {
|
|
|
+ $('#' + counter).parents('.media').removeClass('hide-element');
|
|
|
+ $('#' + counter).attr('src', thumbnail).height('200');
|
|
|
+ $('#uploadDataInfo').removeClass('hide-element').addClass('alert-success');
|
|
|
+ successUpload++;
|
|
|
+ modalPreviewItems += carouselInsideModal.createItemsForSlider(thumbnail, counter);
|
|
|
+
|
|
|
+ } else {
|
|
|
+ $('#uploadDataInfo').removeClass('hide-element alert-success').addClass('alert-warning');
|
|
|
+ failedUpload++;
|
|
|
+ }
|
|
|
+ counter++;
|
|
|
+ if (counter === size) {
|
|
|
+ $('#myCarousel').append(carouselInsideModal.createIndicators(successUpload, "myCarousel"));
|
|
|
+ $('#previewItems').append(modalPreviewItems);
|
|
|
+ $('#previewItems .item').first().addClass('active');
|
|
|
+ $('#carouselIndicators > li').first().addClass('active');
|
|
|
+ $('#myCarousel').carousel({
|
|
|
+ interval: 2000,
|
|
|
+ cycle: true
|
|
|
+ });
|
|
|
+ if (size > 4) {
|
|
|
+ $('#toManyFilesUploaded').html("Only files displayed below will be uploaded");
|
|
|
+ extraFiles = size - 4;
|
|
|
+ }
|
|
|
+
|
|
|
+ $('#filesCount').html(successUpload + " files are ready to upload");
|
|
|
+ if (failedUpload !== 0 || extraFiles !== 0) {
|
|
|
+ failedUpload === 0 ? "" : failedUpload;
|
|
|
+ extraFiles === 0 ? "" : extraFiles;
|
|
|
+ $('#filesUnsupported').html(failedUpload + extraFiles + " files were not selected for upload");
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ };
|
|
|
+ });
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ var toBeDeleted = [];
|
|
|
+ var eachImageValues = [];
|
|
|
+ $('.media').each(function (index) {
|
|
|
+ var imagePresent = "";
|
|
|
+ $("body").on("click", "#delete" + index, function () {
|
|
|
+ imagePresent = $("#" + index).attr('src');
|
|
|
+ $("#undo" + index).removeClass('hide-element');
|
|
|
+ $("#" + index).attr('src', './img/200x200.gif');
|
|
|
+ $("#delete" + index).addClass('hide-element');
|
|
|
+ toBeDeleted.push(index);
|
|
|
+
|
|
|
+ });
|
|
|
+ $("body").on("click", "#undo" + index, function () {
|
|
|
+ $("#" + index).attr('src', imagePresent);
|
|
|
+ $("#undo" + index).addClass('hide-element');
|
|
|
+ $("#delete" + index).removeClass('hide-element');
|
|
|
+ var indexToDelete = toBeDeleted.indexOf(index);
|
|
|
+ if (indexToDelete > -1) {
|
|
|
+ toBeDeleted.splice(indexToDelete, 1);
|
|
|
+ // console.log(toBeDeleted);
|
|
|
+ $("#delete" + index).parent().find('input[type="text"]').prop('disabled', false).removeClass('disabled');
|
|
|
+ }
|
|
|
+ if (toBeDeleted.length === 4) {
|
|
|
+ $('#sendImagesToServer').prop('disabled', true).html('No Files to Upload');
|
|
|
+
|
|
|
+ } else {
|
|
|
+ $('#sendImagesToServer').prop('disabled', false).html('Update & Preview');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ var validateImage = {
|
|
|
+ magicNumbersForExtension: function (event) {
|
|
|
+ var headerArray = (new Uint8Array(event.target.result)).subarray(0, 4);
|
|
|
+ var magicNumber = "";
|
|
|
+ for (var counter = 0; counter < headerArray.length; counter++) {
|
|
|
+ magicNumber += headerArray[counter].toString(16);
|
|
|
+ }
|
|
|
+ return magicNumber;
|
|
|
+ },
|
|
|
+ isUploadedFileSizeValid: function (fileUploaded) {
|
|
|
+ var fileSize = fileUploaded.size;
|
|
|
+ var maximumSize = 2097125;
|
|
|
+ var isValid = "";
|
|
|
+ if (fileSize <= maximumSize) {
|
|
|
+ isValid = true;
|
|
|
+ } else {
|
|
|
+ isValid = false;
|
|
|
+ }
|
|
|
+ return isValid;
|
|
|
+ },
|
|
|
+ uploadFileExtension: function (fileUploaded) {
|
|
|
+ var fileExtension = "";
|
|
|
+ var imageType = "";
|
|
|
+ imageType = fileUploaded.type.toLowerCase();
|
|
|
+ fileExtension = imageType.substr((imageType.lastIndexOf('/') + 1));
|
|
|
+ return fileExtension;
|
|
|
+ },
|
|
|
+ validateExtensionToMagicNumbers: function (magicNumbers) {
|
|
|
+ var properExtension = "";
|
|
|
+ if (magicNumbers.toLowerCase() === "ffd8ffe0" || magicNumbers.toLowerCase() === "ffd8ffe1" ||
|
|
|
+ magicNumbers.toLowerCase() === "ffd8ffe8" ||
|
|
|
+ magicNumbers.toLocaleLowerCase() === "89504e47") {
|
|
|
+ properExtension = true;
|
|
|
+
|
|
|
+ } else {
|
|
|
+ properExtension = false;
|
|
|
+ }
|
|
|
+ return properExtension;
|
|
|
+ },
|
|
|
+ generateThumbnail: function (uploadImage) {
|
|
|
+ if (window.URL)
|
|
|
+ imageSrc = window.URL.createObjectURL(uploadImage);
|
|
|
+ else
|
|
|
+ imageSrc = window.webkitURL.createObjectURL(uploadImage);
|
|
|
+ return imageSrc;
|
|
|
+ }
|
|
|
+ };
|
|
|
+ var carouselInsideModal = {
|
|
|
+ createIndicators: function (carouselLength, dataTarget) {
|
|
|
+ var carouselIndicators = '<ol class = "carousel-indicators" id="carouselIndicators">';
|
|
|
+ for (var counter = 0; counter < carouselLength; counter++) {
|
|
|
+ carouselIndicators += '<li data-target = "#' + dataTarget + '"data-slide-to="' + counter + '"></li>';
|
|
|
+ }
|
|
|
+ carouselIndicators += "</ol>";
|
|
|
+ return carouselIndicators;
|
|
|
+ },
|
|
|
+ createItemsForSlider: function (imgSrc, counter) {
|
|
|
+ var item = '<div class = "item">' + '<img src="' + imgSrc + '" id="preview' + counter + '" /></div>';
|
|
|
+ return item;
|
|
|
+ }
|
|
|
+ };
|
|
|
+ }
|
|
|
+ });
|
|
|
</script>
|
|
|
@endslot
|
|
|
|
Azam Rezayi