We Keep Coding

How to upload data like images, PDFs and excel files in DevExtreme File Manager?

I have an app in which I want to show the replica of the google drive folder structure in my app. I can get data from google drive via its API. But I do struggle in uploading that data to the FileManager library of DevExtreme. Also how to send the data obtained from backend via an AJAX request (POST|GET).
The file obtained from the API:
from pydrive2.auth import GoogleAuth
from pydrive2.drive import GoogleDrive
gauth = GoogleAuth()
gauth.LoadCredentialsFile("mycreds.txt")
if gauth.credentials is None:
# Authenticate if they're not there
gauth.LocalWebserverAuth()
elif gauth.access_token_expired:
# Refresh them if expired
gauth.Refresh()
else:
# Initialize the saved creds
gauth.Authorize()
# Save the current credentials to a file
gauth.SaveCredentialsFile("mycreds.txt")
img = drive.CreateFile({'id': file_id})
img.GetContentFile('sample.jpg')
Code for creating the file manager from Javascript:
data = [
{
name: "MyFile.jpg",
size: 1024,
dateModified: "2019/05/08",
thumbnail: "/thumbnails/images/jpeg.ico",
isDirectory: true,
items: [
// ...
// Nested data objects with the same structure
// ...
]
}
]
new DevExpress.ui.dxFileManager(document.getElementById("file-manager"), {
"fileSystemProvider": data,
"itemView": {
"mode": "thumbnails"
},
"permissions": {
"copy": true,
"create": true,
"delete": true,
"download": true,
"move": true,
"rename": true,
"upload": true
},
"rootFolderName": "PayUP",
"rtlEnabled": false,
"currentPath": path,
onSelectionChanged: function (e) {
console.log(e)
}
});
The thing I want is how to add the downloaded image in data above from Django backend via ajax to client side.
This is the DevExtreme File Manager

Re-use a defined variable in multiple Nightwatchjs test steps

Ok, so I know this is probably going to be something obvious and straightforward, but I just can't seem to get it to work.
Using the Nigthwatchjs perform command, I'm trying to re-use a variable from a step into the next step.
Below is a snippet of my code from my test script;
'2) Breadcrumbs': function (browser) {
browser.perform(function() {
var testMake = browser.globals.specsTestMake;
var testModel = browser.globals.specsTestModel;
var testRange = browser.globals.specsTestRange;
var testYear = browser.globals.specsTestYear;
browser.assert.containsText('nav.site-breadcrumbs', 'Home', testMake, testModel, testRange, testYear, 'specs');
console.log('test make from step 2 = ', testMake);
});
},
'3) Heading': function (browser) {
browser.perform(function(testMake, done) {
console.log('test make from step 3 = ', testMake);
done();
});
},
The console.log from the first step, '2) Breadcrumbs' is correctly displayed (for this test example) as BMW, as defined in the globals file.
I therefore thought that the console.log for the second step, '3) Heading' would also be correctly displayed as BMW.
However, this is not the case.
The second console.log displays what appears to be the entire page, settings, etc.
A small snippet is below;
✔ 2) Breadcrumbs (26ms)
test make from step 3 = { capabilities:
{ acceptInsecureCerts: true,
acceptSslCerts: true,
applicationCacheEnabled: false,
browserConnectionEnabled: false,
browserName: 'chrome',
chrome:
{ chromedriverVersion: '2.44.609545 (c2f88692e98ce7233d2df7c724465ecacfe74df5)',
userDataDir:
'/var/folders/6x/3kzp0zhd6vv0q_mfstkxd73m0000gr/T/.org.chromium.Chromium.iDQCXI' },
cssSelectorsEnabled: true,
databaseEnabled: false,
'goog:chromeOptions': { debuggerAddress: 'localhost:52102' },
handlesAlerts: true,
Any idea on what I'm doing wrong with my perform command?
Thanks

WebRTC channelMessage not recieving first message

When sending a message using WebRTC sendDirectlyToAll, the message is never recieved the first time, but every time after that.
I've stripped the code down to a very simple state now, but it's still the same. Anyone got a clue about why this is happening?
Here is the code:
var webrtc = new SimpleWebRTC({
localVideoEl: 'localVideo',
remoteVideosEl: 'remoteVideos',
autoRequestMedia: false,
media: {
video: true,
audio: false
},
localVideo: {
autoplay: true,
mirror: true,
muted: true
}
});
$("#chat-send-button").on("click", function (e) {
sendMessage();
});
function sendMessage() {
console.log("sendMessage");
const chatMessage = $("#chat-message-input");
webrtc.sendDirectlyToAll(
"chat",
"info", {
"chatmessage": chatMessage.val()
}
)
chatMessage.val("");
}
webrtc.on("channelMessage", function (peer, channel, data) {
console.log(peer);
console.log(channel);
console.log("data", data);
$("#chat-message-container").text(data.payload.chatmessage);
});

You probably need for the WebRTC connection to be established before allowing the user to send a message - do you make use of the readyToCall event described in the documentation https://github.com/SimpleWebRTC/SimpleWebRTC#3-tell-it-to-join-a-room-when-ready
(a link to an editable runable code snippet might help)

Get Javascript object stored in file, into php variable

I have a Switches.js javascript file, like this:
//GLOBAL switches
//Change the values accordingly
var SWITCHES = {
uber: true, //Uber
social: true, //Social media pulgins
g_charts: true, //Google Charts
g_captcha: true, //Google Captcha
g_analytics: true, //Google Analytics
data_base: true, //Inserts user input data into DataBase
print: true, //Print option
pdf: true, //Download PDF report option
https: true //true for https, false for http
};
This JS file is stored in my server.
Is there a way to get that object and one of those properties into a php variable? I think that should be around the php functions file_get_contents and json_decode, but how do I take into account the comments in the JS file and that variable SWITCHES in particular?
$file_content = file_get_contents("Switches.js");
//some stuff
$http_switch = $SWITCHES[https];
AJAX nor jQuery are an option because this is to be run purely server side.

Since the Switches.js is JavaScript and not JSON, you can't use json_decode(). Instead you should convert it to JSON and decode/parse it both client-side and server-side:
In PHP, you'd do:
$data = file_get_contents("Switches.json");
$switches = json_decode($data);
And then client-side you fetch it via AJAX and parse:
$.get("/Switches.json", function (data) {
var switches = JSON.parse(data)
})
Your Switches.json file would then be (JSON files must not have comments):
{
"uber": true,
"social": true,
"g_charts": true,
"g_captcha": true,
"g_analytics": true,
"data_base": true,
"print": true,
"pdf": true,
"https": true
}

Jquery : Post Request is breaking while uploading multiple images

I am using Plupload js plugin to upload multiple images in one request. This plugin is working like if someone adding 5 images at a time then post request will go 5 times to upload each of images separately. As we know Post request require unique csrf token but in my case due to same token after one time, post request is failing.
Here is my code ...
<c:set var="csrfTokenVal"><csrf:token-value uri="<%=request.getRequestURI()%>"/></c:set>
<script>
var csrftokenV="${csrfTokenVal}";
$("#uploader").plupload({
// General settings
runtimes : 'html5,flash,silverlight,html4',
url:'/view/SurgeryNotesComponentController?uploadSurgeryImage=true&'+csrftokenN+'='+csrftokenV,
// User can upload no more then 20 files in one go (sets multiple_queues to false)
max_file_count: 10,
chunk_size: '1mb',
// Resize images on clientside if we can
resize : {
width : 600,
height : 610,
quality : 90,
//crop: true // crop to exact dimensions
},
filters : {
// Maximum file size
max_file_size : '1mb',
// Specify what files to browse for
mime_types: [
{title : "Image files", extensions : "jpg,gif,png"},
{title : "Zip files", extensions : "zip"}
]
},
// Rename files by clicking on their titles
rename: true,
// Sort files
sortable: true,
// Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
dragdrop: true,
// Views to activate
views: {
list: true,
thumbs: false, // Show thumbs
active: 'thumbs'
},
init: {
FilesAdded: function(up, files) {
$("#uploader_filelist").show();
},
FileUploaded: function(up, file, info, res) {
var imageObjectArray=$.parseJSON(info.response);
for(i=0;i<imageObjectArray.objectList.length; i++){
$('#showfilelist ul').append("<li><a class='delIcon-image' href='#delete' id='delSurgeryImageIcon'></a><a id=" + imageObjectArray.objectList[i].uid + " class='cboxElement imguid' href='${contextPath}/view/SurgeryNotesComponentController?surgeryImage=true&"+csrftokenN+ "="+ csrftokenV+"&attachmentLocation="+imageObjectArray.objectList[i].attachmentLocation+"' target='_blank'><img src='${contextPath}/view/SurgeryNotesComponentController?surgeryImage=true&"+csrftokenN+ "="+ csrftokenV+"&attachmentLocation="+imageObjectArray.objectList[i].attachmentLocation+"' border='0'>"+"</a> <strong>"+noteAddedMsg+"</strong><span class='image-created'>"+imageObjectArray.objectList[i].formattedDate+" "+byMsg+" "+imageObjectArray.objectList[i].userName+" </span></li>");
}
$("#uploader_filelist").empty().hide();
_SPINE.colorboxOverlay.coloboxPopup();
_SPINE.surgeryNotes.deleteImages();
$(".plupload_done .plupload_file_thumb").removeClass("hide")
},
ChunkUploaded: function (up, file, response) {
response = $.parseJSON(response.response || "null");
if (response.chunk == 3) {
up.stop();
up.start();
}
console.log(file.loaded);
}
},
// Flash settings
flash_swf_url : '${siteAssetsUrl}/assets/spine/js/external/Moxie.swf',
// Silverlight settings../assets/js
silverlight_xap_url : '${siteAssetsUrl}/assets/spine/js/external/Moxie.xap'
});
</script>
Here you can see I am generating scrf token (csrftokenV) and sending it in url to make it post supported.
Now the problem is if I am uploading more than 1 images (lets say 3), then 3 time post request will go. Each time i will get same csrf token and after uploaing first image, furthure images will not work and i will get this exception ....
WARNING: potential cross-site request forgery (CSRF) attack thwarted (user:<anonymous>, ip:127.0.0.1, uri:/**/image, error:request token does not match session token)
Please help me to solve this problem. Thanks

Finally One of my friend had solved the issue. It can't be possible to handle this issue through client side script so we leverage the power of Java. We had updated the csrfToken based on new request and sent it out with response.
Here is a solution ..
private String updateToken(HttpServletRequest request)
{
final HttpSession session = request.getSession(false);
CsrfGuard csrfGuard = CsrfGuard.getInstance();
csrfGuard.updateTokens(request);
String newToken=(String) session.getAttribute(REQUEST_TOKEN);
return newToken;
}
Setting newToken in response ...
response.setResult(this.updateToken(request));
return response;
Now we can change the url in beforeUpload event and set new token in the url.
BeforeUpload: function(up, file)
{
up.settings.url='/view/SurgeryNotesComponentController?uploadSurgeryImage=true&'+csrftokenN+'='+tokenRefresh
}
FileUploaded: function(up, file, info, res)
{
var imageObjectArray=$.parseJSON(info.response);
tokenRefresh=imageObjectArray.result;
}