|
|
@@ -28,12 +28,56 @@
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
|
|
|
- .file_img {
|
|
|
- width: 100px;
|
|
|
- height: 150px;
|
|
|
- }
|
|
|
-
|
|
|
- .
|
|
|
+ /* ---------------------------------------
|
|
|
+ /* 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;
|
|
|
+}
|
|
|
+#gallery {
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+#gallery 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;
|
|
|
+}
|
|
|
+#fileElem {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
</style>
|
|
|
@endslot
|
|
|
@slot('subject')
|
|
|
@@ -250,6 +294,23 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+
|
|
|
+ <div id="drop-area">
|
|
|
+
|
|
|
+ <input type="file" id="fileElem" multiple accept="image/*"
|
|
|
+ onchange="handleFiles(this.files)">
|
|
|
+ <label class="button" for="fileElem"> ساخت گالری محصولات</label>
|
|
|
+
|
|
|
+ <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">
|
|
|
@@ -317,77 +378,109 @@
|
|
|
reader.readAsDataURL(this.files[0]);
|
|
|
});
|
|
|
// ****************************************
|
|
|
- $('.attachment_upload').change(function(){
|
|
|
- var target = $(this).closest('.attachments');
|
|
|
-
|
|
|
- for( let i=0; i<$(this).prop('files').length; i++ ){
|
|
|
- let file_id = uniqid();
|
|
|
- var markup = '<div class="attachment_file_upload mb-2" id="' + file_id + '">' +
|
|
|
- '<span class="delete_file"><i class="fas fa-times"></i></span>' +
|
|
|
- '<div class="file_info">' +
|
|
|
- '<a href="#"><span class="file_name">' + $(this).prop('files')[i].name + '</span></a>' +
|
|
|
- '<input class="uploaded_file_path" type="hidden">' +
|
|
|
- '</div>' +
|
|
|
- '<div class="progress">' +
|
|
|
- '<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 0%">0%</div>' +
|
|
|
- '</div>' +
|
|
|
- '</div>';
|
|
|
- target.find('.uploaded_files').append(markup);
|
|
|
- var formData = new FormData();
|
|
|
- formData.append('file', $(this).prop('files')[i]);
|
|
|
- formData.append('file_type', 'attachment');
|
|
|
- formData.append('object_type', target.attr('data-object-type'));
|
|
|
- formData.append('object_id', target.attr('data-object-id'));
|
|
|
- let fail_message = '<span class="ltr">آپلود فایل ' + $(this).prop('files')[i].name + ' با خطا مواجه شد.</span>';
|
|
|
- $.ajax({
|
|
|
- url: ajax_upload_url,
|
|
|
- async: true,
|
|
|
- data: formData,
|
|
|
- processData: false,
|
|
|
- contentType: false,
|
|
|
- dataType: 'json',
|
|
|
- type: 'post',
|
|
|
- success: function(response){
|
|
|
- if( response.status == 1 ){
|
|
|
- $('#' + file_id ).find('a').attr('href', response.file_url );
|
|
|
- $('#' + file_id ).find('.uploaded_file_path').val( response.file_path );
|
|
|
- $('#' + file_id ).find('.progress').remove();
|
|
|
- }
|
|
|
- },
|
|
|
- error: function(response){
|
|
|
- if( response.status == 422 ){
|
|
|
- var response_text = $.parseJSON( response.responseText );
|
|
|
- var text = fail_message;
|
|
|
- for( var j=0; j<response_text.errors.file.length; j++ ){
|
|
|
- text += "<br />" + response_text.errors.file[j];
|
|
|
- }
|
|
|
- Swal.fire({
|
|
|
- title: 'خطا در آپلود فایل',
|
|
|
- html: text,
|
|
|
- type: 'error',
|
|
|
- customClass: {
|
|
|
- icon: 'swal2-arabic-question-mark'
|
|
|
- },
|
|
|
- confirmButtonText: 'تایید'
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- xhr: function() {
|
|
|
- var myXhr = $.ajaxSettings.xhr();
|
|
|
- if(myXhr.upload){
|
|
|
- myXhr.upload.addEventListener(
|
|
|
- 'progress',
|
|
|
- function(e){
|
|
|
- progress( e, file_id );
|
|
|
- },
|
|
|
- false);
|
|
|
- }
|
|
|
- return myXhr;
|
|
|
- }
|
|
|
- });
|
|
|
+ // ************************ Drag and drop ***************** //
|
|
|
+ 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)
|
|
|
+
|
|
|
+ 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)
|
|
|
}
|
|
|
- $(this).val('');
|
|
|
- });
|
|
|
+ }
|
|
|
+
|
|
|
+ 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
|
|
|
+ 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')
|
|
|
+
|
|
|
+ // Update progress (can be used to show progress indicator)
|
|
|
+ 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) // <- Add this
|
|
|
+ }
|
|
|
+ else if (xhr.readyState == 4 && xhr.status != 200) {
|
|
|
+ // Error. Inform the user
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ formData.append('upload_preset', 'ujpu6gyk')
|
|
|
+ formData.append('file', file)
|
|
|
+ xhr.send(formData)
|
|
|
+ }
|
|
|
+
|
|
|
</script>
|
|
|
@endslot
|
|
|
|
azam