|
|
@@ -27,61 +27,54 @@
|
|
|
border: 0px;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
- .btn_photo{
|
|
|
- margin-bottom: -50px;
|
|
|
- position: relative;}
|
|
|
+
|
|
|
+ .btn_photo {
|
|
|
+ margin-bottom: -50px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
/* ---------------------------------------
|
|
|
/* Fine Uploader Gallery View Styles
|
|
|
/* ---------------------------------------*/
|
|
|
|
|
|
-#drop-area {
|
|
|
- border: 2px dashed #ccc;
|
|
|
- border-radius: 20px;
|
|
|
- width: 50%;
|
|
|
- border-color: purple;
|
|
|
- padding: 10px;
|
|
|
-}
|
|
|
+ #drop-area {
|
|
|
+ border: 2px dashed #ccc;
|
|
|
+ border-radius: 20px;
|
|
|
+ width: 50%;
|
|
|
+ border-color: purple;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
|
|
|
-#gallery {
|
|
|
- margin-top: 10px;
|
|
|
-}
|
|
|
-#gallery img {
|
|
|
- width: 150px;
|
|
|
- margin-bottom: 10px;
|
|
|
- margin-right: 10px;
|
|
|
- vertical-align: middle;
|
|
|
-}
|
|
|
-#progress-bar{
|
|
|
- display: none;
|
|
|
-}
|
|
|
+ #gallery {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
|
|
|
-#fileElem {
|
|
|
- display: none;
|
|
|
-}
|
|
|
- /* */
|
|
|
- .container {
|
|
|
- padding-top: 3%;
|
|
|
+ #gallery img {
|
|
|
+ width: 150px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ vertical-align: middle;
|
|
|
}
|
|
|
|
|
|
- .hide-element {
|
|
|
+ #progress-bar {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
- .glyphicon-remove-circle {
|
|
|
- float: right;
|
|
|
- font-size: 2em;
|
|
|
- cursor: pointer;
|
|
|
+ #fileElem {
|
|
|
+ display: none;
|
|
|
}
|
|
|
|
|
|
+ .hide-element {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Feature Images*/
|
|
|
|
|
|
- /*
|
|
|
- * 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] {
|
|
|
@@ -100,82 +93,35 @@
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
- .alert,
|
|
|
- .well {
|
|
|
+ .alert {
|
|
|
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;
|
|
|
+ .media-left {
|
|
|
z-index: 1000;
|
|
|
- top: 1px;
|
|
|
- right: 15px;
|
|
|
cursor: pointer;
|
|
|
+ margin: 15px;
|
|
|
}
|
|
|
|
|
|
- .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 {
|
|
|
+ .thumbnail {
|
|
|
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;
|
|
|
- }
|
|
|
+ display: flex !important;
|
|
|
|
|
|
+ }
|
|
|
+#delete{
|
|
|
+ display: flex;
|
|
|
+ margin-left: -40px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
.label-tags {
|
|
|
font-size: 16px;
|
|
|
padding: 1%;
|
|
|
@@ -185,14 +131,11 @@
|
|
|
border-radius: 4px;
|
|
|
margin: 3px;
|
|
|
}
|
|
|
-
|
|
|
.label-tags i {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
- /**/
|
|
|
-#errorMessaage{
|
|
|
- display: none;
|
|
|
-}
|
|
|
+ /* *****************************/
|
|
|
+
|
|
|
</style>
|
|
|
@endslot
|
|
|
@slot('subject')
|
|
|
@@ -358,24 +301,17 @@
|
|
|
<strong>{{ $message }}</strong>
|
|
|
</span>
|
|
|
@enderror
|
|
|
-
|
|
|
</div>
|
|
|
-
|
|
|
-
|
|
|
- <div class="form-group col-md-5">
|
|
|
-
|
|
|
-
|
|
|
- <label for="title">{{ __('product.featured_image') }}</label><i
|
|
|
- class="required"> *</i>
|
|
|
+ <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="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>--}}
|
|
|
+ <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"
|
|
|
alt="" id="0" title="" data-toggle="modal"
|
|
|
data-target="#individualImagePreview">
|
|
|
@@ -384,7 +320,6 @@
|
|
|
<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>
|
|
|
@@ -394,75 +329,43 @@
|
|
|
</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>
|
|
|
|
|
|
- <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>
|
|
|
- @error('gallery_image')
|
|
|
- <span class="invalid-feedback" role="alert">
|
|
|
- <strong>{{ $message }}</strong>
|
|
|
- </span>
|
|
|
- @enderror
|
|
|
+ <progress id="progress-bar" max=100 value=0></progress>
|
|
|
+ <div id="gallery">
|
|
|
|
|
|
</div>
|
|
|
+ @error('gallery_image')
|
|
|
+ <span class="invalid-feedback" role="alert">
|
|
|
+ <strong>{{ $message }}</strong>
|
|
|
+ </span>
|
|
|
+ @enderror
|
|
|
+ </div>
|
|
|
+{{----}}
|
|
|
|
|
|
+ <form action="" method="post" enctype="multipart/form-data">
|
|
|
|
|
|
+ </form>
|
|
|
|
|
|
+ <form action="/upload-target" class="dropzone">
|
|
|
|
|
|
+ <div class="fallback">
|
|
|
|
|
|
+ <input name="file" type="file" multiple />
|
|
|
|
|
|
- <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">
|
|
|
-
|
|
|
- </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>
|
|
|
- <div class="modal-body">
|
|
|
- <div id="ajaxLoad">
|
|
|
- <i class="fa fa-cog fa-spin fa-4x"></i>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
+ </form>
|
|
|
|
|
|
+ {{-- --}}
|
|
|
<div class="form-group mb-0">
|
|
|
<div class="">
|
|
|
<button type="submit" class="btn btn-primary">
|
|
|
@@ -476,7 +379,6 @@
|
|
|
</form>
|
|
|
</div>
|
|
|
<div class="card-footer">
|
|
|
-
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -487,25 +389,49 @@
|
|
|
|
|
|
@slot('script')
|
|
|
<script>
|
|
|
-
|
|
|
-// //**************************show images gallery**********************************************
|
|
|
+ {{--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;--}}
|
|
|
+ {{-- }--}}
|
|
|
+ {{-- };--}}
|
|
|
+
|
|
|
+ // //**************************show images gallery**********************************************
|
|
|
let dropArea = document.getElementById("drop-area")
|
|
|
|
|
|
-// Prevent default drag behaviors
|
|
|
- ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
|
|
- dropArea.addEventListener(eventName, preventDefaults, false)
|
|
|
- document.body.addEventListener(eventName, preventDefaults, false)
|
|
|
- })
|
|
|
-
|
|
|
-// Highlight drop area when item is dragged over it
|
|
|
- ;['dragenter', 'dragover'].forEach(eventName => {
|
|
|
- dropArea.addEventListener(eventName, highlight, false)
|
|
|
- })
|
|
|
-
|
|
|
- ;['dragleave', 'drop'].forEach(eventName => {
|
|
|
- dropArea.addEventListener(eventName, unhighlight, false)
|
|
|
- })
|
|
|
-
|
|
|
// Handle dropped files
|
|
|
dropArea.addEventListener('drop', handleDrop, false)
|
|
|
|
|
|
@@ -564,6 +490,7 @@
|
|
|
|
|
|
document.getElementById('gallery').appendChild(img)
|
|
|
|
|
|
+
|
|
|
}
|
|
|
let close = new FileReader()
|
|
|
close.readAsDataURL(file)
|
|
|
@@ -805,6 +732,200 @@
|
|
|
};
|
|
|
}
|
|
|
});
|
|
|
+
|
|
|
+ // *******************************
|
|
|
+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