DropzoneJs - Manually setting error message? - javascript

I am using dropzonejs/react-dropzone and I noticed a bug in FF that if you drag a folder in the file type is blank.
In FF (file type is blank when you drag in a folder that contains images)
In Chrome
I believe because of this when I have in my code
this.djsConfig = {
acceptedFiles : 'image/jpeg,image/png,image/gif',
};
that since the type: "" (when it should actually be image/jpeg) it gets rejected in Firefox.
I don't know if the creator will ever fix it, so I need to do a work around. So I figured that I can do this
handleFileAdded(file) {
if(isFirefox){
const extension = this.getExtension(file.name);
if(!acceptedFiles.split(",").includes(extension)){
}
}
}
I just dont' know how to manually set the file in an error state with message "filetype is not accepted"

Related

Custom clipboardData datatype across browsers

We're trying to allow our users to copy-paste data between two systems. From a webpage to an Electron app.
The user will click a button on which we trigger a copy event with the help of copy-to-clipboard.
import copy from "copy-to-clipboard";
const copyHandler = (evt) => {
evt.preventDefault();
evt.clipboardData.setData("text/plain", url);
evt.clipboardData.setData("mumbo/jumbo", JSON.stringify({
foo: "bar"
}));
}
document.addEventListener("copy", copyHandler);
copy();
document.removeEventListener("copy", copyHandler);
In the Electron app we listen to the paste event:
onPaste = (evt) => {
if(evt.clipboardData.getData("mumbo/jumbo")) {
// Handle custom data-type
} else if(evt.clipboardData.getData("text/html")) {
// Handle html
} else {
// Handle plain text
}
}
When the user uses our webpage in Chrome everything works. We can read the data for the custom data-type. But when the user visits the webpage in Firefox evt.clipboardData.getData("mumbo/jumbo") will return undefined. The data we set for text/plain and text/html will still be available.
If we paste the data back to Firefox evt.clipboardData.getData("mumbo/jumbo") will properly return the data we set.
I've tried finding information about if this is even supposed to work, but can't find anything. Is custom clipboardData data types supported between browsers at all, and I'm doing something wrong? Or was it never going to work?
Doing the same thing with application/json data type also does not work between Firefox and Electron. The only data types we've been able to get to work is text/plain and text/html, but both are already used for other purposes.
In the end I went through all data types listed in clipboard W3C Working Draft. At this point I can only get text/plain and text/html to work when copy-pasting between Firefox and Chrome.
I ended up using text/html to pass the data:
const copyHandler = (evt) => {
evt.preventDefault();
evt.clipboardData.setData("text/plain", url);
evt.clipboardData.setData("text/html", `<div id="${btoa("mumbo/jumbo")}" data-foo="${bar}"></div>`);
}
I Base64 encode the ID with btoa() to try to minimise conflicts with regular HTML pastes.

Forced to use define('CONCATENATE_SCRIPTS', false); all of a sudden

I came into work on Monday with an email stating the visual editor on one of the Wordpress sites we manage/maintain wasn't working.
Sure enough, I was able to replicate the issue and found there were a ton of Javascript errors in the console.
I searched the first error and found several posts on Wordpress's forum that people needed to add the following to their wp-config.php file to fix the issue.
define('CONCATENATE_SCRIPTS', false );
However, nowhere on the entire internet is there an explanation as to why this all of a sudden needs to be added.
Because of that, I started to dig into the problem to see if I could find out what the heck is going on.
I clicked around the Wordpress admin area and noticed the issue was always coming back with this line of code.
Uncaught SyntaxError: missing ) after argument list
load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,underscore,thickbox,shortcode,media-up…:227
Line 227 of
https://DOMAIN_NAME/wp-admin/load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,underscore,thickbox,shortcode,media-upload&ver=4.3.1
is as follows
if(!params['modal']){jQuery(document).bind('keydown.thickbox',function(e){if(e.which==27){tb_remove();return false;}});}}catch(e){}}
This happens when I am on the following pages within the Wordpress admin area.
// Dashboard
/wp-admin/index.php
// Plugins page
/wp-admin/plugins.php
// Edit user page
/wp-admin/user-edit.php?user_id=###
// Edit post page
/wp-admin/post.php?post=###&action=edit
On each of those pages, the load-script.php source is different, so I am providing that info below.
// Dashboard
/wp-admin/index.php
https://DOMAIN_NAME/wp-admin/load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,underscore,thickbox,shortcode,media-upload&ver=4.3.1
// Plugins page
/wp-admin/plugins.php
https://DOMAIN_NAME/wp-admin/load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,underscore,wp-util,wp-a11y,updates,thickbox,shortcode,media-upload&ver=4.3.1
// Edit user page
/wp-admin/user-edit.php?user_id=###
https://DOMAIN_NAME/wp-admin/load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,zxcvbn-async,underscore,thickbox,shortcode,media-upload&ver=4.3.1
// Edit post page
/wp-admin/post.php?post=###&action=edit
https://DOMAIN_NAME/wp-admin/load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,thickbox,shortcod&load%5B%5D=e,plupload,jquery-ui-position,jquery-ui-datepicker,jquery-ui-menu,jquery-ui-autocomplete,jquery-ui-resizable,jquery-ui-draggable&load%5B%5D=,jquery-ui-button,jquery-ui-dialog,media-upload&ver=4.3.1
I then got to a page in the admin area where the Javascript error DID NOT present itself!
// The page that lists all of the pages on the site
/wp-admin/edit.php?post_type=page
On this page, the load-script.php source is as follows
// The page that lists all of the pages on the site
/wp-admin/edit.php?post_type=page
https://DOMAIN_NAME/wp-admin/load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,thickbox,underscore,shortcode,media-upload&ver=4.3.1
I then went to that file directly is a browser and searched specifically for the following string since that is the string that all of the other pages were throwing an error on.
if(!params['modal']){jQuery(document).bind('keydown.thickbox',function(e){if(e.which==27){tb_remove();return false;}});}}catch(e){}}
To my surprise, that line of code IS NOT minified, whereas, the code IS minified in all of the other instances when the Javascript error occurs.
if(!params['modal']){
jQuery(document).bind('keydown.thickbox', function(e){
if ( e.which == 27 ){ // close
tb_remove();
return false;
}
});
}
} catch(e) {
//nothing here
}
}
Nothing on the server was changed/updated nor was Wordpress, the theme, or plugins updated.
I also went as far as disabling ALL plugins along with activated the default Twenty Fifteen theme, but the issue still exists.
There are even Wordpress sites on THE SAME server as this site that is having problems, and those other sites DO NOT have this problem.
At the end of that day, I don't really know if the detailed information I provided above helps anyone help me figure out what the heck is going on and why define('CONCATENATE_SCRIPTS', false ); all of a sudden needs to be added to the wp-config.php file to make the Javascript errors go away so the visual editor works again.
If anything, this is the most details I have seen anyone provide in regards to those that have needed to add define('CONCATENATE_SCRIPTS', false ); to their wp-config.php file to get the errors to go away.
You have a syntax error in the JS code:
It is not clear what this code is trying to achieve but there is clear syntax error:
Try changing:
if(!params['modal']){
jQuery(document).bind('keydown.thickbox', function(e){
if ( e.which == 27 ){ // close
tb_remove();
return false;
}
});
}
} catch(e) {
//nothing here
}
}
To:
if(!params['modal']){
jQuery(document).bind('keydown.thickbox', function(e){
if ( e.which == 27 ){ // close
tb_remove();
return false;
}
});
}
Looks like this code loaded from the file registered as "shortcode"
Also you can try using wp_dequeue_script function to remove conflicting scripts or move them up and down the queue
wp_dequeue_script("shortcode");
wp_enqueue_script("shortcode","script_url",array('jquery','lastScript'));

Read files from SD Card with mosync/phonegap on Android with pure Javascript

I know this question was asked many times before but I cannot figure it out anyhow.
I'm able to write a text file to a directory on the sdcard (android 4), but no way to read it back again, using this code:
function get_file () {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, getFilesystem, fail);
}
function getFilesystem(fs) {
alert("getFilesystem -> backup.txt"); // OK !
// alert("filesystem.name: "+fileSystem.name); // = persistent
// alert("filesystem.root.name: "+fileSystem.root.name); // = long number
//
fs.root.getFile("../../../../../../sdcard/test/backup.txt", {create: false, exclusive: false},
function(fileEntry) {
alert(fileEntry.fullPath); // shows that my path is appended to "data/.."
fileEntry.file(function(file) {
var reader = new FileReader();
reader.onloadend = function(evt) {
alert(+evt.target.result); // NOT SHOWING !
};
reader.readAsText(file);
}, fail);
}, fail);
}
I wrote the file using the writer function into the directory sdcard/test using this sequence of ../ - this is an ugly code but working !
But fs.root.getFile does not work in the same way - the fullPath information it returns shows that my path given is APPENDED to "/data/data/com.appname/files" but does not replace it !
The onloadend function obviously isn't working since i never got the alert message, neither did I get an error message.
Change of path to "file:///sdcard/test" or "sdcard/test" has no effect either.
Any help is highly appreciated - thank you in advance !
Chris
Please refer PHONEGAP DOCUMENT
From this you will get working example of getting file from sdcard.
And if you have problem in downloading a file please refer LINK
I think in Place of "/sdcard/backup.txt" try to use only "backup.txt".
It seems to work fine.
PhoneGap takes care of the details of the path ,also works with directories.
So finally I could figure it out:
To access the directory (on Android 4.0, Samsung Note 8) I had to go up literally all directories from /data/data/com.app-name/files/apps/(random no.)/ back to the sdcard by choosing:
fs.root.getFile("../../../../../../sdcard/test/backup.txt", ...
in mosync Reload client.
"Compiling" the app with mosync apk would require only 4 times "../" because the file hierarchy there is lower than in the Reload Client. In any case have to check in file explorer (root access required).
Different from that is when you compile in the cloud with phonegap - then indeed the root path is sdcard ! You then cannot go to the data directory as far as I could find out.
This path works with write and read in mosync - my mistake was that I had line break character "\n" inside the text file. In this case I could write it, but the reader stops without error message.
Hope that will help someone else as well !
Chris

Chrome back button terminates upload stream unexpectedly

I'm providing users form-based file uploads (one at a time) with ajax updates/progress bars. I want to give them a heads up if they navigate away that any current upload will be canceled. The following code achieves that goal except in Chrome (v.18). If you click the back button in Chrome the file upload stream is immediately terminated, throwing a org.apache.commons.fileupload.FileUploadBase$IOFileUploadException: Processing of multipart/form-data request failed. Stream ended unexpectedly from the commons.fileupload library.
I couldn't find any information specific to this issue, but does anyone have any idea if this is something I'm just going to have to live with for now? Thanks.
Edit: I should add that Chrome does still shows the "Leave page" dialog, but at that point the upload is already stopped so the answer won't affect it at all. Clicking a link in Chrome does not stop the upload, and behaves as expected.
window.onbeforeunload =
function(event) {
if (upload_in_progress) {
var msg = "You are uploading a file." +
"If you leave this page the upload " +
"will be cancelled.\n\nLeave page?";
var event = event || window.event;
if (event) { event.returnValue = msg; }
return msg;
}
};
In Chrome and Safari functions attached to beforeunload event must always return string value (message displayed to user).

ExtJS Items still appearing despite code being removed

I'm having an issue where I have deleted code that called an ajax request & displayed a message box in a grid but it is still showing in the browser.
Someone else tried it and it's showing the change for them.
I am using Eclipse & cleaned, rebuilt, removed/readded & restarted my project. I have also cleared all cache/browser hsitory from my browser & tried removing & readding the file to project. None of which have resolved the issue.
The function is being called from an image hyperlink which is being displayed in the grid. That code has not changed, only the underlying function.
This is the actual code in the file:
function getReport(type, date){
alert(type);
alert(date);
}
This is the code shown in Firebug:
function getReport(type, date){
alert(type);
alert(date);
Ext.Ajax.request({
url: 'cxf/rest/ws/getX',
method: 'POST',
timeout:180000,
params: {Type: type, Date: date},
success: function(){
var grid = Ext.getCmp('oGrid');
grid.getStore().reload();
},
failure: function(){
alert('Unable to retrieve the report. Please contact the System Administrator');
}
});
}
Any ideas why this is happening? I have the same setup as the other person who tried it & this is the first time any JS changes have not appeared.
Did you clear your cache? Is there a proxy cache in play?
Open up firebug and see where the code is on the js files. Add break points and see what is called. Track down the problem.
Use fiddler to see the http requests if needed.
In Firebug, open the Firebug menu (top left, picture of a fiery bug) and select "Deactivate Firebug for this site". This is different in some special way from just closing Firebug, which I see you've already done.

Categories