|
|
@@ -28,26 +28,11 @@
|
|
|
background-color:
|
|
|
}
|
|
|
|
|
|
- .btn_photo {
|
|
|
- margin-bottom: -50px;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
-
|
|
|
- border: 2px dashed
|
|
|
- border-radius: 20px;
|
|
|
- width: 50%;
|
|
|
- border-color: purple;
|
|
|
- padding: 10px;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
|
|
|
|
|
|
width: 150px;
|
|
|
@@ -56,14 +41,6 @@
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
.hide-element {
|
|
|
display: none;
|
|
|
}
|
|
|
@@ -103,7 +80,28 @@
|
|
|
.media-left {
|
|
|
z-index: 1000;
|
|
|
cursor: pointer;
|
|
|
- margin: 15px;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .media-left {
|
|
|
+ z-index: 1000;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .dz-preview .form-control {
|
|
|
+ width: 60% !important;
|
|
|
+ display: flex;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .media-left img {
|
|
|
+ z-index: 1000;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
}
|
|
|
|
|
|
.thumbnail {
|
|
|
@@ -117,25 +115,53 @@
|
|
|
display: flex !important;
|
|
|
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
display: flex;
|
|
|
margin-left: -40px;
|
|
|
position: relative;
|
|
|
-}
|
|
|
- .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;
|
|
|
}
|
|
|
-
|
|
|
|
|
|
+
|
|
|
+
|
|
|
+ .sortable {
|
|
|
+ padding: 0;
|
|
|
+ -webkit-touch-callout: none;
|
|
|
+ -webkit-user-select: none;
|
|
|
+ -khtml-user-select: none;
|
|
|
+ -moz-user-select: none;
|
|
|
+ -ms-user-select: none;
|
|
|
+ user-select: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sortable li {
|
|
|
+display: flex;
|
|
|
+ width: 40%;
|
|
|
+ height: 50%;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid red;
|
|
|
+ border-radius: 5px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .fig img {
|
|
|
+ float: right;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fig label {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dz-preview {
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
</style>
|
|
|
@endslot
|
|
|
@slot('subject')
|
|
|
@@ -302,23 +328,38 @@
|
|
|
</span>
|
|
|
@enderror
|
|
|
</div>
|
|
|
- <div class="form-group col-md-7">
|
|
|
- <label for="title">{{ __('product.featured_image') }}</label><i class="required"> *</i>
|
|
|
|
|
|
- <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="form-group col-md-8">
|
|
|
+ <label for="title">{{ __('product.featured_image') }}</label><i
|
|
|
+ class="required"> *</i>
|
|
|
+
|
|
|
+ <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 href="" role="button" class="btn btn-danger pull-right" id="delete"> <i
|
|
|
+ <a href="" role="button" class="btn btn-danger pull-right"
|
|
|
+ id="delete"> <i
|
|
|
class="icon fa fa-close"></i></a>
|
|
|
- <img class="media-object thumbnail m-auto" src="img/150x150.gif"
|
|
|
+ <img class="media-object thumbnail " src=""
|
|
|
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="featureDescription">توضیحات: </label><input type="text"
|
|
|
+ class="form-control"
|
|
|
+ value=""
|
|
|
+ name="featureDescription">
|
|
|
+ </p>
|
|
|
+ <p><label for="featureCaption">عنوان: </label><input type="text"
|
|
|
+ class="form-control"
|
|
|
+ value=""
|
|
|
+ name="featureCaption"></p>
|
|
|
{{-- <p><label for="tags">Tags:max of 3 tags.comma seperated </label><input type="text" class="form-control" value="" name="tags" /></p>--}}
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -329,43 +370,60 @@
|
|
|
</span>
|
|
|
@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>
|
|
|
|
|
|
- <progress id="progress-bar" max=100 value=0></progress>
|
|
|
- <div id="gallery">
|
|
|
+ <div class="form-group col-md-12 ">
|
|
|
+ <label for="title" class="">{{ __('product.gallery_image') }}</label><i
|
|
|
+ class="required"> *</i>
|
|
|
+{{-- <span class="btn btn-primary btn-file"><input type="file"--}}
|
|
|
+{{-- name="gallery_image[]"--}}
|
|
|
+{{-- id="file-dropzone"--}}
|
|
|
+{{-- class=" form-control photo @error('gallery_image') is-invalid @enderror"--}}
|
|
|
+{{-- autocomplete="gallery_image"--}}
|
|
|
+{{-- autofocus>ساخت گالری</span>--}}
|
|
|
+ <input type="file"
|
|
|
+ name="gallery_image[]"
|
|
|
+ id="file-dropzone"
|
|
|
+ class=" form-control photo @error('gallery_image') is-invalid @enderror"
|
|
|
+ autocomplete="gallery_image"
|
|
|
+ autofocus multiple>
|
|
|
|
|
|
- </div>
|
|
|
- @error('gallery_image')
|
|
|
- <span class="invalid-feedback" role="alert">
|
|
|
- <strong>{{ $message }}</strong>
|
|
|
- </span>
|
|
|
- @enderror
|
|
|
- </div>
|
|
|
-{{----}}
|
|
|
+ <ul class="visualizacao sortable dropzone-previews">
|
|
|
|
|
|
- <form action="" method="post" enctype="multipart/form-data">
|
|
|
|
|
|
- </form>
|
|
|
+ <div class="preview col-md-6" style="display:none;" >
|
|
|
+ <li >
|
|
|
|
|
|
- <form action="/upload-target" class="dropzone">
|
|
|
+ <div class="dz-preview dz-file-preview fig">
|
|
|
|
|
|
- <div class="fallback">
|
|
|
|
|
|
- <input name="file" type="file" multiple />
|
|
|
+ <a href="" role="button" class="btn btn-danger pull-right"
|
|
|
+ id="delete"> <i
|
|
|
+ class="icon fa fa-close"></i></a>
|
|
|
+ <img data-dz-thumbnail>
|
|
|
+
|
|
|
+
|
|
|
+ <label for="description">توضیحات: </label><input type="text"
|
|
|
+ class="form-control"
|
|
|
+ value=""
|
|
|
+ name="galleries[descriptionGallery][]">
|
|
|
+ <label for="caption">عنوان: </label><input type="text"
|
|
|
+ class="form-control"
|
|
|
+ value=""
|
|
|
+ name="galleries[captionGallery][]">
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </li>
|
|
|
+ </div>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
|
|
|
- </div>
|
|
|
|
|
|
- </form>
|
|
|
+ <div class="form-group col-md-7"></div>
|
|
|
|
|
|
- {{-- --}}
|
|
|
<div class="form-group mb-0">
|
|
|
<div class="">
|
|
|
<button type="submit" class="btn btn-primary">
|
|
|
@@ -388,147 +446,29 @@
|
|
|
@endslot
|
|
|
|
|
|
@slot('script')
|
|
|
- <script>
|
|
|
- {{--Dropzone.options.dropzone =--}}
|
|
|
- {{-- {--}}
|
|
|
- {{-- maxFilesize: 12,--}}
|
|
|
- {{-- renameFile: function (file) {--}}
|
|
|
- {{-- var dt = new Date();--}}
|
|
|
- {{-- var time = dt.getTime();--}}
|
|
|
- {{-- return time + file.name;--}}
|
|
|
- {{-- },--}}
|
|
|
- {{-- acceptedFiles: ".jpeg,.jpg,.png,.gif",--}}
|
|
|
- {{-- addRemoveLinks: true,--}}
|
|
|
- {{-- timeout: 50000,--}}
|
|
|
- {{-- removedfile: function (file) {--}}
|
|
|
- {{-- var name = file.upload.filename;--}}
|
|
|
- {{-- $.ajax({--}}
|
|
|
- {{-- headers: {--}}
|
|
|
- {{-- 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')--}}
|
|
|
- {{-- },--}}
|
|
|
- {{-- type: 'POST',--}}
|
|
|
- {{-- url: '{{ url("delete") }}',--}}
|
|
|
- {{-- data: {filename: name},--}}
|
|
|
- {{-- success: function (data) {--}}
|
|
|
- {{-- console.log("File has been successfully removed!!");--}}
|
|
|
- {{-- },--}}
|
|
|
- {{-- error: function (e) {--}}
|
|
|
- {{-- console.log(e);--}}
|
|
|
- {{-- }--}}
|
|
|
- {{-- });--}}
|
|
|
- {{-- var fileRef;--}}
|
|
|
- {{-- return (fileRef = file.previewElement) != null ?--}}
|
|
|
- {{-- fileRef.parentNode.removeChild(file.previewElement) : void 0;--}}
|
|
|
- {{-- },--}}
|
|
|
-
|
|
|
- {{-- success: function (file, response) {--}}
|
|
|
- {{-- console.log(response);--}}
|
|
|
- {{-- },--}}
|
|
|
- {{-- error: function (file, response) {--}}
|
|
|
- {{-- return false;--}}
|
|
|
- {{-- }--}}
|
|
|
- {{-- };--}}
|
|
|
-
|
|
|
-
|
|
|
- let dropArea = document.getElementById("drop-area")
|
|
|
-
|
|
|
-
|
|
|
- dropArea.addEventListener('drop', handleDrop, false)
|
|
|
-
|
|
|
- function preventDefaults (e) {
|
|
|
- e.preventDefault()
|
|
|
- e.stopPropagation()
|
|
|
- }
|
|
|
-
|
|
|
- function highlight(e) {
|
|
|
- dropArea.classList.add('highlight')
|
|
|
- }
|
|
|
-
|
|
|
- function unhighlight(e) {
|
|
|
- dropArea.classList.remove('active')
|
|
|
- }
|
|
|
-
|
|
|
- function handleDrop(e) {
|
|
|
- var dt = e.dataTransfer
|
|
|
- var files = dt.files
|
|
|
|
|
|
- handleFiles(files)
|
|
|
- }
|
|
|
-
|
|
|
- let uploadProgress = []
|
|
|
- let progressBar = document.getElementById('progress-bar')
|
|
|
-
|
|
|
- function initializeProgress(numFiles) {
|
|
|
- progressBar.value = 0
|
|
|
- uploadProgress = []
|
|
|
-
|
|
|
- for(let i = numFiles; i > 0; i--) {
|
|
|
- uploadProgress.push(0)
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function updateProgress(fileNumber, percent) {
|
|
|
- uploadProgress[fileNumber] = percent
|
|
|
- let total = uploadProgress.reduce((tot, curr) => tot + curr, 0) / uploadProgress.length
|
|
|
- console.debug('update', fileNumber, percent, total)
|
|
|
- progressBar.value = total
|
|
|
- }
|
|
|
-
|
|
|
- function handleFiles(files) {
|
|
|
- files = [...files]
|
|
|
- initializeProgress(files.length)
|
|
|
- files.forEach(uploadFile)
|
|
|
- files.forEach(previewFile)
|
|
|
- }
|
|
|
-
|
|
|
- function previewFile(file) {
|
|
|
- let reader = new FileReader()
|
|
|
- reader.readAsDataURL(file)
|
|
|
- reader.onloadend = function() {
|
|
|
- let img = document.createElement('img')
|
|
|
- img.src = reader.result
|
|
|
+ <script>
|
|
|
+
|
|
|
|
|
|
- document.getElementById('gallery').appendChild(img)
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
|
|
|
+ $('#file-dropzone').dropzone({
|
|
|
+ url: "/upload",
|
|
|
+ maxFilesize: 100,
|
|
|
+ paramName: "uploadfile",
|
|
|
+ maxThumbnailFilesize: 99999,
|
|
|
|
|
|
- }
|
|
|
- let close = new FileReader()
|
|
|
- close.readAsDataURL(file)
|
|
|
- close.onloadend = function() {
|
|
|
- let button = document.createElement('img')
|
|
|
- button.src = close.result
|
|
|
+ previewsContainer: '.visualizacao',
|
|
|
+ previewTemplate: $('.preview').html(),
|
|
|
|
|
|
- document.getElementById('gallery').appendChild(img)
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
+ });
|
|
|
|
|
|
- function uploadFile(file, i) {
|
|
|
- var url = 'https://api.cloudinary.com/v1_1/joezimim007/image/upload'
|
|
|
- var xhr = new XMLHttpRequest()
|
|
|
- var formData = new FormData()
|
|
|
- xhr.open('POST', url, true)
|
|
|
- xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
|
|
|
-
|
|
|
-
|
|
|
- xhr.upload.addEventListener("progress", function(e) {
|
|
|
- updateProgress(i, (e.loaded * 100.0 / e.total) || 100)
|
|
|
- })
|
|
|
-
|
|
|
- xhr.addEventListener('readystatechange', function(e) {
|
|
|
- if (xhr.readyState == 4 && xhr.status == 200) {
|
|
|
- updateProgress(i, 100)
|
|
|
- }
|
|
|
- else if (xhr.readyState == 4 && xhr.status != 200) {
|
|
|
-
|
|
|
- }
|
|
|
- })
|
|
|
|
|
|
- formData.append('upload_preset', 'ujpu6gyk')
|
|
|
- formData.append('file', file)
|
|
|
- xhr.send(formData)
|
|
|
- }
|
|
|
-
|
|
|
+
|
|
|
$(document).ready(function () {
|
|
|
$('[data-toggle="tooltip"]').tooltip({
|
|
|
html: true
|
|
|
@@ -666,9 +606,6 @@
|
|
|
});
|
|
|
|
|
|
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
var validateImage = {
|
|
|
magicNumbersForExtension: function (event) {
|
|
|
var headerArray = (new Uint8Array(event.target.result)).subarray(0, 4);
|
|
|
@@ -733,199 +670,8 @@
|
|
|
}
|
|
|
});
|
|
|
|
|
|
-
|
|
|
-function multiUploader(formId, inputId, btnStartId, btnStopId){
|
|
|
- this.noFiles = true;
|
|
|
- this.FilesToUp = {};
|
|
|
- this.btnStart = document.getElementById(btnStartId);
|
|
|
- this.btnStop = document.getElementById(btnStopId);
|
|
|
- this.control = document.getElementById(inputId);
|
|
|
- this.filesTable = document.getElementById(formId);
|
|
|
- this.videoWidth = '50px';
|
|
|
- this.pictureWidth = '50px';
|
|
|
-
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-multiUploader.prototype.constructor = function(){
|
|
|
- this.filesTable.style.display = "none";
|
|
|
- var $self = this;
|
|
|
- this.control.addEventListener("change",
|
|
|
- function(event) {
|
|
|
- if ($self.noFiles) {
|
|
|
- $self.filesTable.style.display = "table";
|
|
|
- $self.btnStart.addEventListener("click", function() {
|
|
|
- $self.uploadFiles();
|
|
|
- });
|
|
|
- }
|
|
|
- $self.noFiles = false;
|
|
|
-
|
|
|
- for (var i = 0; i < $self.control.files.length; i++) {
|
|
|
- var idFile = Math.round(+new Date() / 1000) + i;
|
|
|
- $self.FilesToUp[idFile] = $self.control.files[i];
|
|
|
-
|
|
|
- var tr = document.createElement("tr"),
|
|
|
- tdImg = document.createElement("td"),
|
|
|
- tdInput = document.createElement("td"),
|
|
|
- tdSize = document.createElement("td"),
|
|
|
- tdDel = document.createElement("td"),
|
|
|
- deleteBtn = document.createElement("button"),
|
|
|
- input = document.createElement("input");
|
|
|
-
|
|
|
- tr.setAttribute("class", "trFile");
|
|
|
- if ($self.FilesToUp[idFile].type.match("image.*")) {
|
|
|
- var linkThumb = document.createElement("a");
|
|
|
- var img = document.createElement("img");
|
|
|
- linkThumb.innerHTML = "Voir la miniature";
|
|
|
- linkThumb.setAttribute("data-idFile", idFile);
|
|
|
- linkThumb.addEventListener("click", function(){
|
|
|
- $self.getThumb(this);
|
|
|
- });
|
|
|
- tdImg.appendChild(linkThumb);
|
|
|
- img.setAttribute("id", idFile);
|
|
|
- img.style.display = "none";
|
|
|
- tdImg.appendChild(img);
|
|
|
- } else if($self.FilesToUp[idFile].type.match("video.*")){
|
|
|
- var linkThumb = document.createElement("a");
|
|
|
- var video = document.createElement("video");
|
|
|
- var source = document.createElement("source");
|
|
|
- linkThumb.innerHTML = "Voir la miniature";
|
|
|
- linkThumb.setAttribute("data-idFile", idFile);
|
|
|
- linkThumb.addEventListener("click", function(){
|
|
|
- $self.getThumb(this);
|
|
|
- });
|
|
|
- tdImg.appendChild(linkThumb);
|
|
|
-
|
|
|
- video.style.width = this.videoWidth;
|
|
|
- video.setAttribute("controls", "controls");
|
|
|
- video.setAttribute("type", $self.FilesToUp[idFile].type);
|
|
|
- source.setAttribute("id", idFile);
|
|
|
- source.src = window.URL.createObjectURL($self.FilesToUp[idFile]);
|
|
|
- video.style.display = "none";
|
|
|
- video.appendChild(source);
|
|
|
- tdImg.appendChild(video);
|
|
|
- } else {
|
|
|
- tdImg.innerHTML = $self.FilesToUp[idFile].type;
|
|
|
- }
|
|
|
- tdImg.setAttribute("class", "ImgThumb");
|
|
|
- tr.appendChild(tdImg);
|
|
|
- input.value = $self.FilesToUp[idFile].name.replace("." + $self.fileExtension($self.FilesToUp[idFile].name), "");
|
|
|
- input.name = idFile;
|
|
|
- input.type="text";
|
|
|
- input.setAttribute("class", "input-medium");
|
|
|
- tdInput.appendChild(input);
|
|
|
- tdInput.setAttribute("class", "tdInput");
|
|
|
- tr.appendChild(tdInput);
|
|
|
- tdSize.innerHTML = $self.bytesToSize($self.FilesToUp[idFile].size);
|
|
|
- tdSize.setAttribute("class", "tdSize");
|
|
|
- tr.appendChild(tdSize);
|
|
|
- deleteBtn.innerHTML = "X";
|
|
|
- deleteBtn.setAttribute("data-idFile", idFile);
|
|
|
- deleteBtn.setAttribute("class", "btn");
|
|
|
- deleteBtn.addEventListener("click", function(){
|
|
|
- $self.delFile(this);
|
|
|
- });
|
|
|
- tdDel.setAttribute("class", "tdDel");
|
|
|
- tdDel.appendChild(deleteBtn);
|
|
|
- tr.appendChild(tdDel);
|
|
|
- $self.filesTable.firstChild.appendChild(tr);
|
|
|
- }
|
|
|
- }, false
|
|
|
- );
|
|
|
-}
|
|
|
-multiUploader.prototype.fileExtension = function(filename) {
|
|
|
- return filename.substr((~-filename.lastIndexOf(".") >>> 0) + 2);
|
|
|
-}
|
|
|
-
|
|
|
-multiUploader.prototype.bytesToSize = function(bytes) {
|
|
|
- var sizes = [ "Octets", "Ko", "Mo", "Go", "To" ];
|
|
|
- if (bytes == 0)
|
|
|
- return "n/a";
|
|
|
- var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
|
|
|
- var currentSize = bytes / Math.pow(1024, i);
|
|
|
- return currentSize.toFixed(2) + " " + sizes[i];
|
|
|
-}
|
|
|
-
|
|
|
-multiUploader.prototype.getThumb = function(element){
|
|
|
- var idFile = element.getAttribute("data-idFile");
|
|
|
- var img = document.getElementById(idFile);
|
|
|
- if(img.style.display == "none"){
|
|
|
- element.innerHTML = "Cacher la miniature";
|
|
|
- if(img.src == "")
|
|
|
- img.src = window.URL.createObjectURL(this.FilesToUp[idFile]);
|
|
|
- if(img.parentNode.tagName == "video"){
|
|
|
- img.parentNode.style.display = "block";
|
|
|
- }
|
|
|
- img.style.display = "block";
|
|
|
- }else{
|
|
|
- element.innerHTML = "Voir la miniature";
|
|
|
- if(img.parentNode.tagName == "video"){
|
|
|
- img.parentNode.style.display = "none";
|
|
|
- }
|
|
|
- img.style.display = "none";
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-multiUploader.prototype.delFile = function(element){
|
|
|
- var idFile = element.getAttribute("data-idFile");
|
|
|
- delete(this.FilesToUp[idFile]);
|
|
|
- var parent = element.parentNode.parentNode;
|
|
|
- parent.parentNode.removeChild(parent);
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-multiUploader.prototype.uploadFiles = function(){
|
|
|
- var $self = this;
|
|
|
- for(var idFile in this.FilesToUp){break;}
|
|
|
- if(idFile == undefined){ return true;}
|
|
|
- var trLine = this.filesTable.querySelectorAll(".trFile")[0];
|
|
|
- var form = new FormData();
|
|
|
- form.append(idFile, this.FilesToUp[idFile]);
|
|
|
- form.append(idFile, document.getElementsByName(idFile)[0].value);
|
|
|
- trLine.querySelectorAll(".tdInput")[0].firstElementChild.disabled = true;
|
|
|
- trLine.querySelectorAll(".tdDel")[0].firstElementChild.disabled = true;
|
|
|
- var xhr = new XMLHttpRequest();
|
|
|
- var endTime = 0;
|
|
|
- var startTime = (new Date()).getTime();
|
|
|
- xhr.upload.onprogress = function(e) {
|
|
|
- var duration = ((new Date()).getTime() - startTime) / 1000;
|
|
|
- var speedBps = (e.loaded / duration);
|
|
|
-
|
|
|
- trLine.querySelectorAll(".tdSize")[0].innerHTML = $self.bytesToSize(e.loaded) + ' / ' + $self.bytesToSize(e.total) + "<br />";
|
|
|
- document.getElementById("speed").innerHTML = $self.bytesToSize(speedBps) + "/s";
|
|
|
- trLine.querySelectorAll(".tdInput")[0].style.backgroundSize = Math.ceil((e.loaded / e.total) * 100) + "% 100%";
|
|
|
- if(e.loaded === e.total){
|
|
|
- trLine.querySelectorAll(".tdSize")[0].innerHTML = "Traitement en cours";
|
|
|
- }
|
|
|
- };
|
|
|
- xhr.onload = function() {
|
|
|
- if (xhr.readyState === 4 && xhr.status === 200){
|
|
|
- delete($self.FilesToUp[idFile]);
|
|
|
-
|
|
|
- trLine.parentNode.removeChild(trLine);
|
|
|
- delete(trLine);
|
|
|
- $self.uploadFiles();
|
|
|
- }
|
|
|
- if(xhr.status !== 200){
|
|
|
- trLine.querySelectorAll(".tdSize")[0].innerHTML = xhr.status + " " + xhr.statusText;
|
|
|
- }
|
|
|
- }
|
|
|
- xhr.open("post", "/", true);
|
|
|
- xhr.send(form);
|
|
|
- this.btnStop.onclick = function(){
|
|
|
- xhr.abort();
|
|
|
- trLine.querySelectorAll(".tdInput")[0].style.backgroundSize = "0% 100%";
|
|
|
- trLine.querySelectorAll(".tdInput")[0].firstElementChild.disabled = false;
|
|
|
- trLine.querySelectorAll(".tdDel")[0].firstElementChild.disabled = false;
|
|
|
- trLine.querySelectorAll(".tdSize")[0].innerHTML = $self.bytesToSize($self.FilesToUp[idFile].size);
|
|
|
- }
|
|
|
- return false;
|
|
|
-}
|
|
|
-var uploader = null;
|
|
|
-window.onload = function() {
|
|
|
- uploader = new multiUploader("filesTable", "fileUpload", "upload", "stop");
|
|
|
- uploader.constructor();
|
|
|
-};
|
|
|
+
|
|
|
+
|
|
|
</script>
|
|
|
@endslot
|
|
|
|
Azam Rezayi