jQuery-File-Upload: duplicateImage not working - jquery-file-upload

The following works for me, the image is re-sized to 800x600 and stored on the server.
jQuery ->
$('#fileupload').fileupload
processQueue: [
{
action: 'loadImage'
fileTypes: /^image\/(gif|jpeg|png)$/
maxFileSize: 20000000
}
{
action: 'resizeImage'
maxWidth: 800
maxHeight: 600
}
{ action: 'saveImage' }
]
add: (e, data) ->
$.blueimp.fileupload.prototype.options.add.call(this, e, data)
However, if I add a subsequent duplicateImage action it fails.
$('#fileupload').fileupload
processQueue: [
{
action: 'loadImage'
fileTypes: /^image\/(gif|jpeg|png)$/
maxFileSize: 20000000
}
{
action: 'resizeImage'
maxWidth: 800
maxHeight: 600
}
{ action: 'saveImage' }
{ action: 'duplicateImage'}
{
action: 'resizeImage'
maxWidth: 1280
maxHeight: 1024
}
{action: 'saveImage'}
]
add: (e, data) ->
$.blueimp.fileupload.prototype.options.add.call(this, e, data)
Here is the error I am getting in my JavaScript console.
Uncaught TypeError: Cannot read property 'call' of undefined
Clicking on the error link brings me to the following section of code in jquery.fileupload
82 return that.processActions[settings.action].call(
83 that,
84 data,
85 settings
86 );
In case I am missing a dependency, my application.js (Rails app) looks as follows
//= require jquery
//= require jquery_ujs
//= require jquery-fileupload/basic-plus
//= require jquery-fileupload/vendor/tmpl
//= require_tree .
How do I fix this? Also, how do I rename the re-sized files? I guess at the moment they will just over-write each other? I see the advise here is to somehow do this in processActions but I cannot figure out how.

The solution was to add the following, as per this guide.
$.blueimp.fileupload::processActions.duplicateImage = (data, options) ->
if data.canvas
data.files.push data.files[data.index]
data

Related

How to run post request for multiple user in k6 performance test?

We run Get http request with multiple user(vus) and multiple iteration(iterations) for particular duration.
It is straightforward like below.
import http from 'k6/http';
import { sleep } from 'k6';
export let options ={
vus:'10',
duration: '20s',
iterations: '10'
}
export default function (){
const baseUri = 'http://Myhost:3200'
let response = http.get(`${baseUri}/api/v1/vm-inventory`)
let body = JSON.parse(response.body)
body.items.forEach(element => {
if (element.datastoreIds.length != 0 ){
console.log(JSON.stringify(element))
console.log(`Name of the vm is ${element.name}`)
}
});
sleep(1);
}
I also need to run post request by multiple user and multiple iterations. But all the example I am seeing are related to single post request. When we run multiple post request ,our data need to be changed for every iteration. How it is possible with k6? Below is my post request.
import http from 'k6/http';
import { sleep } from 'k6';
export let options ={
vus:'5',
duration: '120s',
iterations: '5'
}
let payload = `{
"VMId": "70c8b578-32ef-40d2-bcc5-81267423d2c4",
"name": "test_vm_1",
"mem": "4,
"cpu": "2",
"disk": "50gb"
}`
export default function () {
const url = 'http://myhost:3200/api/v1/vm-inventory'
var header = {
headers: {
'Content-Type': 'application/json',
},
};
let res = http.post(url, JSON.stringify(payload),header);
console.log(res.json().json.name);
sleep(5);
}
I need to change the Vm name in payload for every iteration in order the request to be unique.
How to achieve this in k6? In Jmeter , they are reading it from csv with different data for each iteration and achieving it. But I could not find any sample for K6.
we need to create the payload inside the export default function so that we can modify it there before sending it. If the VMId just needs to be a unique UUID, have a look at jslib utils library, which contains a function for generating a uuidv4:
export function uuidv4() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
let r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
Putting it together:
import http from 'k6/http';
import { sleep } from 'k6';
export let options = {
vus: '5',
duration: '120s',
iterations: '5'
}
export default function () {
let payload = {
VMId: uuidv4(),
name: `test_vm_${Date.now()}`,
mem: 4,
cpu: 2,
disk: "50gb"
};
const url = 'http://myhost:3200/api/v1/vm-inventory'
var header = {
headers: {
'Content-Type': 'application/json',
},
};
let res = http.post(url, JSON.stringify(payload), header);
console.log(res.json().json.name);
sleep(5);
}
export function uuidv4() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
let r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
(note that I've changed the payload to a JS object so that it doesn't get stringified twice).
Also we can use the payload like below.
let payload = {
VMId: uuidv4(),
name: `test_vm_vu_${__VU}`,
mem: 4,
cpu: 2,
disk: "50gb"
};
__VU will be giving virtual user number so that we can create test_vm_vu_1,test_vm_vu_3, test_vm_vu_2 . (It will be run in parallel, so the number will not come in sequential manner)
I got this answer from K6 slack community group. I post it here for anybody facing the same situation.

Office js Dialog api 16.13 Word doesn't open dialog next time

I have following code and it's being triggered form a task pane button:
Office.context.ui.displayDialogAsync(
dialogUrl,
{
width: 60,
height: 60,
requireHTTPS: false,
displayInIframe: false
},
asyncResult => {
dialog = asyncResult.value;
if (asyncResult.status === "failed") {
dispatch(MessageActions.showError(asyncResult.error.message));
dialog.close();
} else {
dialog.addEventHandler(Office.EventType.DialogMessageReceived, arg => {
dispatch({ type: LOADED });
dialog.close();
});
dialog.addEventHandler(Office.EventType.DialogEventReceived, arg => {
if (arg && arg.error === 12006) {
dispatch({ type: LOADED });
}
});
}
}
);
Once I called this snippet I get an error
Error code - 12007 .A dialog box is already opened from the task pane.
A task pane add-in can only have one dialog box open at a time.
but really it's not. For previous versions, it worked just fine. Is there anybody who knows what's happened or I might be doing now something wrong?
This is only reproducible on MacOs 10.13.4 and Word v16.13 (18.05.13). Word for
Windows and Word Online work perfectly.

Running k6 script for load tests returns an error

I'm first time user of k6 and I've already manage to get an error when running the script:
"Request Failed [33merror[0m="Get https:///: stopped
after 0 redirects"
Script k6.js:
import http from "k6/http";
import { sleep } from "k6";
export let options = {
stages: [
{ duration: "30s", target: 20 },
{ duration: "1m30s", target: 10 },
{ duration: "20s", target: 0 },
]
};
export default function() {
let res = http.get("https://<our_page_URL>/");
check(res, {
"status code MUST be 200": (res) => res.status == 200,
}) || fail("status code was *not* 200");
sleep(1);
}
Why do I get this error and what is the solution?
You have to set up the maxRedirects option; maxRedirects is the maximum number of HTTP redirects that k6 will follow before giving up on a request and erroring out with ("Get $PATH stopped after $MAX_REDIRECT_VALUE redirects")
You can pass the option as CLI argument or script options. More about this option at https://docs.k6.io/docs/options
export let options = {
// Max redirects to follow (default is 10)
maxRedirects: 10
};
The default is 10, so there is likely a bug skipping the default value being assigned.
This is a redirect example to test how it works.
import http from "k6/http";
import {check} from "k6";
export let options = {
// Max redirects to follow (default is 10)
maxRedirects: 5
};
export default function() {
// If redirecting more than options.maxRedirects times, the last response will be returned
let res = http.get("https://httpbin.org/redirect/6");
check(res, {
"is status 302": (r) => r.status === 302
});
// The number of redirects to follow can be controlled on a per-request level as well
res = http.get("https://httpbin.org/redirect/1", {redirects: 1});
console.log(res.status);
check(res, {
"is status 200": (r) => r.status === 200,
"url is correct": (r) => r.url === "https://httpbin.org/get"
});
}

Ext.Direct File Upload - Form submit of type application/json

I am trying to upload a file through a form submit using Ext.Direct, however Ext.direct is sending my request as type 'application/json' instead of 'multipart/form-data'
Here is my form.
{
xtype: 'form',
api: {
submit: 'App.api.RemoteModel.Site_Supplicant_readCSV'
},
items: [
{
xtype: 'filefield',
buttonOnly: false,
allowBlank: true,
buttonText: 'Import CSV'
}
],
buttons:
[
{
text: 'Upload',
handler: function(){
var form = this.up('form').getForm();
if(form.isValid()){
form.submit({
waitMsg: 'Uploading...',
success: function(form, action){
console.log(action.result);
}
});
}
}
}
]
},
On the HTTP request, it checks to see if the request options is a form upload.
if (me.isFormUpload(options)) {
which arrives here
isFormUpload: function(options) {
var form = this.getForm(options);
if (form) {
return (options.isUpload || (/multipart\/form-data/i).test(form.getAttribute('enctype')));
}
return false;
},
getForm: function(options) {
var form = options.form || null;
if (form) {
form = Ext.getDom(form);
}
return form;
},
However, options looks like this
{
callback: function (options, success, response) {
jsonData: Object
action: "RemoteModel"
data: Array[1]
0: form
length: 1
__proto__: Array[0]
method: "Site_Supplicant_readCSV"
tid: 36
type: "rpc"
__proto__: Object
scope: constructor
timeout: undefined
transaction: constructor
}
And there is no direct form config, but it exists in jsonData.data[0]. So it doesn't set it as type multipart/form-data and it gets sent off as type application/json.
What am I doing wrong? Why isn't the form getting submitted properly?
Edit - I am seeing a lot of discussion about a 'formHandler' config for Ext.Direct? I am being led to assume this config could solve my issue. However I don't know where this should exist. I'll update my post if I can find the solution.
Solution - Simply adding /formHandler/ to the end of the params set the flag and solved my issue. Baffled.
Supplicant.prototype.readCSV = function(params,callback, request, response, sessionID/*formHandler*/)
{
var files = request.files;
console.log(files);
};
The method that handles file upload requests should be marked as formHandler in the
Ext.Direct API provided by the server side.
EDIT: You are using App.api.RemoteModel.Site_Supplicant_readCSV method to upload files; this method needs to be a formHandler.
I'm not very familiar with Node.js stack but looking at this example suggests that you may need to add /*formHandler*/ descriptor to the function's declaration on the server side.

Coffescript not compiling valid source

I'm calling this function and get error in this place: data: { key: node.parent.data.key } saing "Unexpected {". Is there something wrong. because I can't find the error.
$("#discipline-list", #el).dynatree({
fx: { height: "toggle",
duration: 100 },
initAjax: {
url: "/disciplines",
data: { mode: "funnyMode" }
},
onLazyRead: (node) ->
console.log(node);
node.appendAjax({url: "/disciplines_details",
data: { key: node.parent.data.key }
});
});
Coffee script is not appreciating having the anonymous object properties on the same line. Adding a single newline fixes this...
$("#discipline-list", #el).dynatree({
fx: { height: "toggle",
duration: 100 },
initAjax: {
url: "/disciplines",
data: { mode: "funnyMode" }
},
onLazyRead: (node) ->
console.log(node);
node.appendAjax({
url: "/disciplines_details",
data: { key: node.parent.data.key }
});
});
EDIT: How to convert js to coffee script...
go to http://js2coffee.org/ and paste the js (corrected from your version)
$("#discipline-list", this.el).dynatree({
fx: { height: "toggle",
duration: 100 },
initAjax: {
url: "/disciplines",
data: { mode: "funnyMode" }
},
onLazyRead: function(node){
console.log(node);
node.appendAjax({ url: "/disciplines_details",
data: { key: node.parent.data.key }
});
}
});
You will end up with well formed coffee script...
$("#discipline-list", #el).dynatree
fx:
height: "toggle"
duration: 100
initAjax:
url: "/disciplines"
data:
mode: "funnyMode"
onLazyRead: (node) ->
console.log node
node.appendAjax
url: "/disciplines_details"
data:
key: node.parent.data.key
I don't know exactly what is wrong, but the more canonical way to write it would be
node.appendAjax
url: "/disciplines_details"
data:
key: node.parent.data.key
With compile errors like that, always first go to Try Coffeescript and see how it gets parsed. That makes it very easy and quick to fix in most cases.
The object properties on the same line are confusing the parser:
node.appendAjax({url: "/disciplines_details",
Just move url to the next line and it should work:
node.appendAjax({
url: "/disciplines_details",
That said, you're still writing javascript.
Whitespace is significant in coffeescript (i.e. you can't minify it). Correct indentation is essential, and this code is all wrong. Fix indentation, get rid of commas and semi-colons:
$("#discipline-list", #el).dynatree({
fx: {
height: "toggle"
duration: 100
}
initAjax: {
url: "/disciplines",
data: { mode: "funnyMode" }
}
onLazyRead: (node) ->
console.log(node)
node.appendAjax({
url: "/disciplines_details"
data: { key: node.parent.data.key }
})
})
Then proceed to get rid of brackets and parenthesis as in #Billy's last sample. If you're not comfortable you should try sticking to plain javascript for some time.