PHP scriptte uppy ile dosya ekleme kısmı var fakat sayfada görünmüyor.

Uppy.js

Alıntı:
"use strict";

// Class definition
var KTUppy = function () {
const Tus = Uppy.Tus;
const ProgressBar = Uppy.ProgressBar;
const StatusBar = Uppy.StatusBar;
const FileInput = Uppy.FileInput;
const Informer = Uppy.Informer;

// to get uppy companions working, please refer to the official documentation here: https://uppy.io/docs/companion/
const Dashboard = Uppy.Dashboard;
const Dropbox = Uppy.Dropbox;
const GoogleDrive = Uppy.GoogleDrive;
const Instagram = Uppy.Instagram;
const Webcam = Uppy.Webcam;

// Private functions
var initUppy1 = function(){
var id = '#kt_uppy_1';

var options = {
proudlyDisplayPoweredByUppy: false,
target: id,
inline: true,
replaceTargetContent: true,
showProgressDetails: true,
note: 'No filetype restrictions.',
height: 470,
metaFields: [
{ id: 'name', name: 'Name', placeholder: 'file name' },
{ id: 'caption', name: 'Caption', placeholder: 'describe what the image is about' }
],
browserBackButtonClose: true
}

var uppyDashboard = Uppy.Core({
autoProceed: true,
restrictions: {
maxFileSize: 1000000, // 1mb
maxNumberOfFiles: 5,
minNumberOfFiles: 1
}
});

uppyDashboard.use(Dashboard, options);
uppyDashboard.use(Tus, { endpoint: 'https://master.tus.io/files/' });
uppyDashboard.use(GoogleDrive, { target: Dashboard, companionUrl: 'https://companion.uppy.io' });
uppyDashboard.use(Dropbox, { target: Dashboard, companionUrl: 'https://companion.uppy.io' });
uppyDashboard.use(Instagram, { target: Dashboard, companionUrl: 'https://companion.uppy.io' });
uppyDashboard.use(Webcam, { target: Dashboard });
}

var initUppy2 = function(){
var id = '#kt_uppy_2';

var options = {
proudlyDisplayPoweredByUppy: false,
target: id,
inline: true,
replaceTargetContent: true,
showProgressDetails: true,
note: 'Images and video only, 2?3 files, up to 1 MB',
height: 470,
metaFields: [
{ id: 'name', name: 'Name', placeholder: 'file name' },
{ id: 'caption', name: 'Caption', placeholder: 'describe what the image is about' }
],
browserBackButtonClose: true
}

var uppyDashboard = Uppy.Core({
autoProceed: true,
restrictions: {
maxFileSize: 1000000, // 1mb
maxNumberOfFiles: 5,
minNumberOfFiles: 1,
allowedFileTypes: ['image/*', 'video/*']
}
});

uppyDashboard.use(Dashboard, options);
uppyDashboard.use(Tus, { endpoint: 'https://master.tus.io/files/' });
}

var initUppy3 = function(){
var id = '#kt_uppy_3';

var uppyDrag = Uppy.Core({
autoProceed: true,
restrictions: {
maxFileSize: 1000000, // 1mb
maxNumberOfFiles: 5,
minNumberOfFiles: 1,
allowedFileTypes: ['image/*', 'video/*']
}
});

uppyDrag.use(Uppy.DragDrop, { target: id + ' .kt-uppy__drag' });
uppyDrag.use(ProgressBar, {
target: id + ' .kt-uppy__progress',
hideUploadButton: false,
hideAfterFinish: false
});
uppyDrag.use(Informer, { target: id + ' .kt-uppy__informer' });
uppyDrag.use(Tus, { endpoint: 'https://master.tus.io/files/' });

uppyDrag.on('complete', function(file) {
var imagePreview = "";
$.each(file.successful, function(index, value){
var imageType = /image/;
var thumbnail = "";
if (imageType.test(value.type)){
thumbnail = '
';
}
var sizeLabel = "bytes";
var filesize = value.size;
if (filesize > 1024){
filesize = filesize / 1024;
sizeLabel = "kb";
if(filesize > 1024){
filesize = filesize / 1024;
sizeLabel = "MB";
}
}
imagePreview += ''+thumbnail+' '+value.name+' ('+ Math.round(filesize, 2) +' '+sizeLabel+')
';
});

$(id + ' .kt-uppy__thumbnails').append(imagePreview);
});

$(document).on('click', id + ' .kt-uppy__thumbnails .kt-uppy__remove-thumbnail', function(){
var imageId = $(this).attr('data-id');
uppyDrag.removeFile(imageId);
$(id + ' .kt-uppy__thumbnail-container[data-id="'+imageId+'"').remove();
});
}

var initUppy4 = function(){
var id = '#kt_uppy_4';

var uppyDrag = Uppy.Core({
autoProceed: false,
restrictions: {
maxFileSize: 1000000, // 1mb
maxNumberOfFiles: 5,
minNumberOfFiles: 1
}
});

uppyDrag.use(Uppy.DragDrop, { target: id + ' .kt-uppy__drag' });
uppyDrag.use(ProgressBar, { target: id + ' .kt-uppy__progress' });
uppyDrag.use(Informer, { target: id + ' .kt-uppy__informer' });
uppyDrag.use(Tus, { endpoint: 'https://master.tus.io/files/' });

uppyDrag.on('complete', function(file) {
var imagePreview = "";
$.each(file.successful, function(index, value){
var imageType = /image/;
var thumbnail = "";
if (imageType.test(value.type)){
thumbnail = '
';
}
var sizeLabel = "bytes";
var filesize = value.size;
if (filesize > 1024){
filesize = filesize / 1024;
sizeLabel = "kb";
if(filesize > 1024){
filesize = filesize / 1024;
sizeLabel = "MB";
}
}
imagePreview += ''+thumbnail+' '+value.name+' ('+ Math.round(filesize, 2) +' '+sizeLabel+')
';
});

$(id + ' .kt-uppy__thumbnails').append(imagePreview);
});

var uploadBtn = $(id + ' .kt-uppy__btn');
uploadBtn.click(function () {
uppyDrag.upload();
});

$(document).on('click', id + ' .kt-uppy__thumbnails .kt-uppy__remove-thumbnail', function(){
var imageId = $(this).attr('data-id');
uppyDrag.removeFile(imageId);
$(id + ' .kt-uppy__thumbnail-container[data-id="'+imageId+'"').remove();
});
}

var initUppy5 = function(){
// Uppy variables
// For more info refer: https://uppy.io/
var elemId = 'kt_uppy_5';
var id = '#' + elemId;
var $statusBar = $(id + ' .kt-uppy__status');
var $uploadedList = $(id + ' .kt-uppy__list');
var timeout;

var uppyMin = Uppy.Core({
debug: true,
autoProceed: true,
showProgressDetails: true,
restrictions: {
maxFileSize: 1000000, // 1mb
maxNumberOfFiles: 5,
minNumberOfFiles: 1
}
});

uppyMin.use(FileInput, { target: id + ' .kt-uppy__wrapper', pretty: false });
uppyMin.use(Informer, { target: id + ' .kt-uppy__informer' });

// demo file upload server
uppyMin.use(Tus, { endpoint: 'https://master.tus.io/files/' });
uppyMin.use(StatusBar, {
target: id + ' .kt-uppy__status',
hideUploadButton: true,
hideAfterFinish: false
});

$(id + ' .uppy-FileInput-input').addClass('kt-uppy__input-control').attr('id', elemId + '_input_control');
$(id + ' .uppy-FileInput-container').append('Attach files');

var $fileLabel = $(id + ' .kt-uppy__input-label');

uppyMin.on('upload', function(data) {
$fileLabel.text("Uploading...");
$statusBar.addClass('kt-uppy__status--ongoing');
$statusBar.removeClass('kt-uppy__status--hidden');
clearTimeout( timeout );
});

uppyMin.on('complete', function(file) {
$.each(file.successful, function(index, value){
var sizeLabel = "bytes";
var filesize = value.size;
if (filesize > 1024){
filesize = filesize / 1024;
sizeLabel = "kb";

if(filesize > 1024){
filesize = filesize / 1024;
sizeLabel = "MB";
}
}
var uploadListHtml = ''+value.name+' ('+ Math.round(filesize, 2) +' '+sizeLabel+')

';
$uploadedList.append(uploadListHtml);
});

$fileLabel.text("Add more files");

$statusBar.addClass('kt-uppy__status--hidden');
$statusBar.removeClass('kt-uppy__status--ongoing');
});

$(document).on('click', id + ' .kt-uppy__list .kt-uppy__list-remove', function(){
var itemId = $(this).attr('data-id');
uppyMin.removeFile(itemId);
$(id + ' .kt-uppy__list-item[data-id="'+itemId+'"').remove();
});
}

var initUppy6 = function(){
var id = '#kt_uppy_6';
var options = {
proudlyDisplayPoweredByUppy: false,
target: id + ' .kt-uppy__dashboard',
inline: false,
replaceTargetContent: true,
showProgressDetails: true,
note: 'No filetype restrictions.',
height: 470,
metaFields: [
{ id: 'name', name: 'Name', placeholder: 'file name' },
{ id: 'caption', name: 'Caption', placeholder: 'describe what the image is about' }
],
browserBackButtonClose: true,
trigger: id + ' .kt-uppy__btn'
}

var uppyDashboard = Uppy.Core({
autoProceed: true,
restrictions: {
maxFileSize: 1000000, // 1mb
maxNumberOfFiles: 5,
minNumberOfFiles: 1
}
});

uppyDashboard.use(Dashboard, options);
uppyDashboard.use(Tus, { endpoint: 'https://master.tus.io/files/' });
uppyDashboard.use(GoogleDrive, { target: Dashboard, companionUrl: 'https://companion.uppy.io' });
uppyDashboard.use(Dropbox, { target: Dashboard, companionUrl: 'https://companion.uppy.io' });
uppyDashboard.use(Instagram, { target: Dashboard, companionUrl: 'https://companion.uppy.io' });
uppyDashboard.use(Webcam, { target: Dashboard });
}

return {
// public functions
init: function() {
initUppy1();
initUppy2();
initUppy3();
initUppy4();
initUppy5();
initUppy6();

swal.fire({
"title": "Notice",
"html": "Uppy demos uses https://master.tus.io/files/ URL for resumable upload examples and your uploaded files will be temporarely stored in tus.io servers.",
"type": "info",
"buttonsStyling": false,
"confirmButtonClass": "btn btn-brand kt-btn kt-btn--wide",
"confirmButtonText": "Ok, I understand",
"onClose": function(e) {
console.log('on close event fired!');
}
});
}
};
}();

KTUtil.ready(function() {
KTUppy.init();
});
PHP sayfası

Alıntı:
title = "Deliver Shipment"
url = "/dashboard/shipments/:id/deliver"
layout = "admin"
is_hidden = 0
role = 0
permission = 1
anonymous_only = 0
logged_only = 1
child_of = "dashboard/shipment"
hide_crumb = 0
remove_crumb_trail = 0
crumb_disabled = 0

[viewBag]
==

==



{{'Deliver Shipment'|__}}: {{settings.tracking.prefix_order}}{{order.numbe r}}



{{'Complete the form to confirm the delivery of this shipment!'|__}}



{{'Deliver Shipment'|__}}









{{ form_ajax('onSave', { success: 'created successfully!', flash: true, class: 'kt_form' }) }}






{{'Person who receives'|__}}



{% if user.id != order.assigned_id %}

{{'Employee'|__}}


{% for employee in employees %}
{{employee.name}}
{% endfor %}



{% else %}

{{'Employee'|__}}



{% endif %}

{{'Receiver ID Copy'|__}}







{{'Upload or capture the front of the Receiver ID copy for confirmation'|__}}



{{'Draw receiver signature'|__}}




{{'Undo'|__}}
{{'Clear'|__}}






{{'You can use your mouse to draw it, or if you using your mobile then you can use the touch screen to write it by your finger'|__}}



{{'Notes'|__}}


















{{'Confirm Deliver'|__}}
{{'or'|__}} {{'Cancel'|__}}










{{ form_close() }}












{{'Reach The Sender By Mobile'|__}}



{{'For more quick decisions you can call the sender mobile number from here'|__}}






{{'Make Call'|__}}















{{'Reach The Receiver By Mobile'|__}}



{{'For more quick decisions you can call the receiver mobile number from here'|__}}






{{'Make Call'|__}}













{% put styles %}
{% if currentLang == 'ar'%}



{% else %}



{% endif %}

.signature_container {
position: relative;
}
.signature_container .btn-group {
position: absolute;
}
.table-bordered tr td:first-child {
width: 200px;
font-weight: bold;
}
.map_canvas {
height: 350px;
}
.filter-option-inner br {
display: none;
}
.select2 {
width: 100% !important;
}
.select2-selection {
min-height: 36px !important;
}
#addnewsender,#addnewsenderaddress,#addnewreceiver ,#addnewreceiveraddress{
box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.3);
}
.kt-portlet .kt-portlet__head .kt-portlet__head-label .kt-portlet__head-title {
font-weight: 700;
}

canvas#signaturePad {
background-color: #f7f8fa;
border: 1px solid #ebedf2;
max-width: 100%;
display: block;
border-radius: 5px;
color: #000;
}

{% endput %}
{% put scripts %}







{% endput %}