Develop Reference

How can i add domain url to the url of uploaded files when selected on ckfinder

I'm setting up ckfinder on CKEditor 4. When I select an image with "browse server" button, the URL of image is: /ckfinder/userfiles/images/image.png.
But it should be full URL like: http://example.com/ckfinder/userfiles/images/image.png.
My ckeditor/config.js file:
CKEDITOR.replace( 'content_en', {
filebrowserBrowseUrl:
'./assets/app/js/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl:
'./assets/app/js/ckfinder/ckfinder.html?type=Images',
filebrowserUploadUrl:
'./assets/app/js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl:
'./assets/app/js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images'
});
My config.php file in ckfinder:
$config['backends'][] = array(
'name' => 'default',
'adapter' => 'local',
'baseUrl' => '/ckfinder/userfiles/',
// 'root' => '', // Can be used to explicitly set the CKFinder user files directory.
'chmodFiles' => 0777,
'chmodFolders' => 0755,
'filesystemEncoding' => 'UTF-8',
);

Please add full path in backend configuration for baseUrl property.
Instead of:
'baseUrl' => '/ckfinder/userfiles/',
Please use :
'baseUrl' => 'http://example.com//ckfinder/userfiles/',

How to fix WebPush 401 error for Google Chrome?

I'm trying to develop my own notification system on my website but I have a problem. I use firebase and his keys (I'm not using VapidKeys). One thing : every works on Firefox but not on Google Chrome.
For my application I followed this link.
and others tutorial on how does firebase works...
<?php
include_once (getenv('DOCUMENT_ROOT') . '/lib/include.php');
...
use Minishlink\WebPush\WebPush;
use Minishlink\WebPush\Subscription;
use Minishlink\WebPush\VAPID;
array of notifications
$notifications = array(
array(
'subscription' => Subscription::create(array(
'endpoint' => 'https://updates.push.services.mozilla.com/wpush/v1/gAAAAABcyExVQOIq3T0hJlKO6awqMrGwo0kcjjqi5mYKLddIfKcvva-2AcIMY1f1X32Zpdo3IlOqKb00eOhgUI_TTYMdmSwA6VxUjsQPgZwFmDQuvWjYnvax6yuV-WraBE9MclHMou6G', // Firefox 43+,
'publicKey' => 'BKVJQAkW1OFebroeetQBX1gVsDXQIs8TRYOk0b7ENCK3NBhOCxqCN2uAAZ5wQq7lqS0AqTu5qkKzNHH2oMQAJes', // base 64 encoded, should be 88 chars
'authToken' => 'PTYrPzIoW96SnYjjmSPvrg', // base 64 encoded, should be 24 chars
)
),
'payload' => 'hello !',
),
array(
'subscription' => Subscription::create(array(
'endpoint' => 'https://fcm.googleapis.com/fcm/send/dgSeLeTBqQs:APA91bGWVsUbkd5R9jOyqjDx5PMzuDtse1X9jGtJ3D_G_1wPehNFCq9-aEkyVSdqnzkuv5pbetE8k0rU_XrSGNvZ6WVG-7zZQJha_WvVK8zvUkGUxBsKzF6kPYMIDGZ6Qx2VjrWIbePS',
)
),
'payload' => null,
)
);
$webPush = new WebPush();
// send multiple notifications with payload
foreach ($notifications as $notification) {
$webPush->sendNotification(
$notification['subscription'],
$notification['payload'] // optional (defaults null)
);
}
foreach ($webPush->flush() as $report) {
$endpoint = $report->getRequest()->getUri()->__toString();
if ($report->isSuccess()) {
echo "[v] Message sent successfully for subscription {$endpoint}.";
} else {
echo "[x] Message failed to sent for subscription {$endpoint}: {$report->getReason()}";
}
}

Fine uploader, idiomatic way to add download button to each file uploaded

I've successfully implemented fine uploader into my project. I'm using the addInitialFiles method to populate it with previously uploaded files.
What I would like to do is add a download button to each file preview rendered, both as a user add's files and 'on load' when prepopulated using addInitialFiles. Adding the button to the mark up template is pretty trival, but I'm stuck on what the most idiomatic way would be to:
Listen for the click event on the download button I've added to the markup (e.g. use a fine uploader API method, or my own listener?)
How I can associate the necessary information with each button/thumbnail to envoke a file download.
I'm storing the files download url in a mongo collection that that im returning and populating the addInitial files method with.
In case it comes up: I'm not looking to have fine uploader 'handle' the download, I'm simply trying to weave the download functionality into it's UI :)
Appreciate any/all advice/pointers!

Add an anchor link to your template somewhere inside the <li>.
Listen for qq.status.UPLOAD_SUCCESS status changes.
On success, update the anchor link to point to the appropriate download endpoint. You can find the anchor link for a specific file using getItemByFileId.
You'll need to be sure your server returns the proper Content-Disposition header when responding to a download GET request.

May this help to someone to add a custom download button to each uploaded file.
I have tested for FineUploader version 5.16.2.
Used ref links - callback events & initial file list
Code for file uploader is as (used two events for the download button):
var defaultParams = {};
$('#fine-uploader-gallery').fineUploader({
template: 'qq-template-gallery',
thumbnails: {
placeholders: {
waitingPath: 'waiting-generic.png',
notAvailablePath: 'not_available-generic.png'
}
},
validation: {
itemLimit: 10,
// acceptFiles: 'image/*',
// allowedExtensions: ['mp4','jpeg', 'jpg', 'gif', 'png']
},
session: { /** initial file list **/
endpoint: '/uploaded_files',
params: defaultParams
},
request: { /** new upload file request **/
endpoint: '/upload_files'
},
callbacks: {
/** Event to initial files with download link
array(
array('id' => xxx, 'name' => xxx, 'size' => xxx, 'thumbnailUrl' => xxx, 'uuid' => xxx, 'url' => fileUrl),
array('id' => xxx, 'name' => xxx, 'size' => xxx, 'thumbnailUrl' => xxx, 'uuid' => xxx, 'url' => fileUrl2),
...
}
**/
onSessionRequestComplete: function(id, name, responseJSON){
id.forEach((item, index) => {
var serverPathToFile = item.url,
$fileItem = this.getItemByFileId(index);
if (responseJSON.status == 200) {
$($fileItem).find(".qq-download-option") /** Custom Anchor tag added to Template **/
.attr("href", serverPathToFile)
.removeClass("hide");
}
});
},
/** Event to newly uploaded file with download link
responseJSON : array('success' => 'true', 'filename' => xxx, 'unique_id' => xxx, 'url' => fileurl)
**/
onComplete: function(id, name, responseJSON, xhr){
var serverPathToFile = responseJSON.url,
$fileItem = this.getItemByFileId(id);
if (responseJSON.success) {
$($fileItem).find(".qq-download-option") /** Custom Anchor tag added to Template **/
.attr("href", serverPathToFile)
.removeClass("hide");
}
}
},
deleteFile: {
enabled: true,
forceConfirm: true,
method: 'DELETE',
endpoint: '/delete_files',
customHeaders: {},
params:defaultParams
}
});

How to create a Data base row in Wordpress for uploaded objects to Amazon S3?

In my Wordpress website Users can upload video files directly to a Amazon S3 bucket (So the files don't go through my webserver.) How i should keep track of the added objects (i.e: where and how i should add a data entry in my Wordpress Database )

With the limited information provided you could post the image data using ajax. The below is simple ajax with placeholder data for the image.
var imgData = {author: 'the-author-id', img_url: 'the-url', img_type: 'the-img-type'}
$.ajax({
data : JSON.stringify(imgData),
contentType : 'application/json',
type : 'POST',
url: 'your-wordpress-post-url',
success: function () {
// do something with the success result from backend
}
});
And within WordPress you would use wp_insert_attachment()
<?php
// Prepare an array of post data for the attachment.
$attachment = array(
'post_author' => $_POST['author'],
'post_date' => current_time('mysql'),
'guid' => $_POST['img_url'],
'post_mime_type' => $_POST['img_type'],
'post_title' => preg_replace( '/\.[^.]+$/', '', $_POST['img_url'] ),
'post_content' => '',
'post_status' => 'inherit',
'comment_status' => 'closed',
'ping_status' => 'closed',
);
// Insert the attachment.
$attach_id = wp_insert_attachment( $attachment );
// if fail $attach_id is 0
echo json_encode(array('attach_id' => $attach_id));
?>

Add a file description when uploading file Yii 1

Hello I'm using EAjaxUpload extension to upload files and its working perfectly and files are uploaded I want to add a description to each file. I used the onComplete to have the function here's my code :
$uploadfile = $this->widget('ext.EAjaxUpload.EAjaxUpload',
array(
'id' => 'uploadFile',
'config' => array(
'action' => Yii::app()->createUrl('objective/upload'),
'allowedExtensions' => array("docx", "pdf", "pptx"),//array("jpg","jpeg","gif","exe","mov" and etc...
'sizeLimit' => 5 * 1024 * 1024,// maximum file size in bytes
//'minSizeLimit'=>10*1024*1024,// minimum file size in bytes
'onComplete' => "js:function(id, fileName, responseJSON){
console.log(responseJSON);
var filedescription= prompt('file description');
if (filedescription != null) {
document.getElementById('demo').innerHTML =
filedescription;
return filedescription;
}
}",
//'messages'=>array(
// 'typeError'=>"{file} has invalid extension. Only {extensions} are allowed.",
// 'sizeError'=>"{file} is too large, maximum file size is {sizeLimit}.",
// 'minSizeError'=>"{file} is too small, minimum file size is {minSizeLimit}.",
// 'emptyError'=>"{file} is empty, please select files again without it.",
// 'onLeave'=>"The files are being uploaded, if you leave now the upload will be cancelled."
// ),
'showMessage' => "js:function(message){ alert(message); }"
)
));
Now I want to return var filedescription to upload action in controller. How can I do that?
Thanks,

1.onComplete is called after your upload request is already processed by "objective/upload" action. So you have possibility to ask and set description as parameter BEFORE request:
'onSubmit' => "js:function(id, fileName){
// add filedescriton to post parameters:
this.params.filedescription = 'some file description';
}"
In controller "objective/upload" action you can access it as $_POST['filedescription'].
2.Other possibility is to create separate action for saving description (and additional file processing...) and call it from onComplete:
In onComplete:
$.post( 'saveUploadedFileDescription', { filedescription: 'some file description', fileName: fileName } );
In controller:
actionSaveUploadedFileDescription($filedescription,$filename) {
// ....
}