I have implemented dropzone in my website like
myDropzone = new Dropzone("#myDropzone", {
url:"$uploadUrl",
timeout:0,
acceptedFiles: ".jpeg,.jpg,.png,.webp",
dictDefaultMessage:"Drag & Drop or Select Photos",
addRemoveLinks:true,
renameFile:function (file) {return new Date().getTime() + '_' + file.name;},
clickable:true,
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
});
Above is the code.And it is working fine in chrome and all. But in some devices for example Samsung s9 default browser i cant select files, meaning there is no file chooser coming when clicking the dropzone.
i am using dropzone 5.7.0
Related
My app generates a custom product page on a Shopify store. I use Vue3 for the frontend. There are other apps running js on the page, e.g. live chat, push notification pop-up, GDPR cookie bar, etc. They are injected by the platform and I can't remove them. (Btw, these js are minified and hard to read)
My app has an add bundle to cart button on the floating footer to send a POST request to my server with Fetch API. But it's blocked by these irrelevant apps. I think these apps are monitoring if a POST / GET request is sent. They assume they are working on standard product pages but not custom one like mine.
I tried to implement a block list with yett. But this passive way is not good enough. It's just a fix after the issue happens. Any way I can protect my fetch request without interfering by other js scripts?
let request = new Request('/create_new_product/', {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
});
let vm1 = this;
fetch(request)
.then(response => response.json())
.then(data => {
console.log('Success creating variant:', data);
console.log('variant_id:', data.variant_id);
// stopped here by other apps :-(
if (data.variant_id) {
vm1.addNewVariantToCart(this.variants, data.variant_id);
vm1.$emit('clearall');
setTimeout(function(){ vm1.isLoading = false; }, 2000);
}
else if (data.Error) {
alert(data.Error);
vm1.isLoading = false;
}
})
.catch((error) => {
console.error('Error:', error);
vm1.isLoading = false;
});
We are using Cordova 3.4.0 to develop an app. Everything works fine on Android and iOS and also if we launch our app in a desktop browser. But we are stuck with really strange issue on Windows Phone 8.1.
Here is a simplified code example to test.
index.html in the application root:
<!DOCTYPE html>
<html>
<head>
<title>Mobile sandbox</title>
<meta charset="UTF-8">
<script type="text/javascript" src="libs/jquery/jquery.min.js"></script>
</head>
<body>
<div id="redbox" style="width:100px;height:100px;background-color:red;">
</div>
<div id="greenbox" style="width:100px;height:100px;background-color:green;">
</div>
<script>
$(function () {
alert("Requesting data for redbox...");
$.ajax("test/redText.html")
.done(function (text) {
alert("Filling redbox with contents " + text);
$("#redbox").html(text);
})
.fail(function () {
alert("Error in redbox");
})
.always(function () {
alert("Complete redbox");
});
alert("Requesting data for greenbox...");
$.ajax("test/greenText.html")
.done(function (text) {
alert("Filling greenbox with contents " + text);
$("#greenbox").html(text);
})
.fail(function () {
alert("Error in greenbox");
})
.always(function () {
alert("Complete greenbox");
});
});
</script>
</body>
</html>
test/greenText.html:
<span>GREEN</span>
test/redText.html:
<span>RED</span>
The only dependency to run this test is jQuery which we have put in libs/jquery/ folder.
Now, if we run this code in every desktop browser and in iOS and Android, no matter if from local folder (with browser flags for local AJAX) or from server, we get the right sequence of alerts and AJAX loads correct data in appropriate boxes:
Requesting data for redbox...
Requesting data for greenbox...
Filling redbox with contents <span>RED</span>
Complete redbox
Filling greenbox with contents <span>GREEN</span>
Complete greenbox
We get the same result if we run the index.html on Windows Phone through its Internet Explorer.
But when we deploy the same code to Windows Phone as Cordova app, strange thing happens. The redbox request never receives any data, nor any errors. The greenbox request receives data of redbox, and thus we have empty red box and green box with text "RED" in it.
Here is the sequence of alerts:
Requesting data for redbox...
Requesting data for greenbox...
Filling greenbox with contents <span>RED</span>
Complete greenbox
What's going on there, why one AJAX request does not return and the other receives wrong response? How do we fix it?
EDIT 1:
Our nest step will be to find out if it's Cordova specific issue (I see there is some XHRHelper object in the Corodva WP8 template) or it's Microsoft's phone:WebBrowser fault.
EDIT 2:
It seems, WebBrowser itself does not support AJAX requests to local files (I got "Access denied") and that's why Cordova invented XHRHelper class. But I found a related bugreport which they closed as "Cannot reproduce":
https://issues.apache.org/jira/browse/CB-4873
Is there any Cordova developer here who could suggest a fix for XHRHelper, so it supports multiple sequential AJAX requests?
Again, I cannot reproduce your results. I quickly put together a version which I will post to the JIRA issue: https://issues.apache.org/jira/browse/CB-4873
Requesting data for redbox...
Requesting data for greenbox...
Filling redbox with contents
<span>REd</span>
Complete redbox
Filling greenbox with contents
<span>GREEN</span>
Complete greenbox
I modified your source a little just to make sure there were no issues with alert interfering ...
var eventLog = [];
var oneDone = false;
$(function () {
eventLog.push("Requesting data for redbox...");
$.ajax("redText.html")
.done(function (text) {
eventLog.push("Filling redbox with contents " + text);
$("#redbox").html(text);
})
.fail(function (e) {
eventLog.push("Error in redbox" + JSON.stringify(e));
})
.always(function () {
eventLog.push("Complete redbox");
if (oneDone) {
console.log(eventLog.join("\n"));
alert(eventLog.join("\n"));
}
else {
oneDone = true;
}
});
eventLog.push("Requesting data for greenbox...");
$.ajax("greenText.html")
.done(function (text) {
eventLog.push("Filling greenbox with contents " + text);
$("#greenbox").html(text);
})
.fail(function () {
eventLog.push("Error in greenbox");
})
.always(function () {
eventLog.push("Complete greenbox");
if (oneDone) {
console.log(eventLog.join("\n"));
alert(eventLog.join("\n"));
}
else {
oneDone = true;
}
});
});
Hi I am using fineuploader 3.3.0 version.
I am facing problem with fineuploader in IE9. as fine uploader does not support sizeLimit in ie9.
I am checking the file size at server side with simple contentlength check if (this.Request.Files[0].ContentLength > 5242880).
but it took 1-2 mins to get this response. Also the 1.4 MB file is taking too long to upload.
Can some one please let me know what is causing it, following is the fineuploader code I am using:-
$('#restricted-fine-uploader').fineUploader({
request: {
endpoint: '/apm/api/job/UploadDocument/?category=' + JobDocuments.category + '&mode=' + JobDocuments.forceupload + '&jobid=' + job_manager_details.jobId
},
autoUpload: true,
text: {
uploadButton: 'Upload File'
},
multiple: false,
validation: {
allowedExtensions: ['doc', 'docx', 'xls', 'xlsx', 'pdf'],
sizeLimit: 5242880,
itemLimit: 1
},
showMessage: function (message) {
// Using Twitter Bootstrap's classes and jQuery selector and method
$('#restricted-fine-uploader').append('<div class="alert alert-error">' + message + '</div>');
}
}).bind('submit', function (event, id, fileName) {
$('#displaymessage').hide();
$('li. qq-upload-fail').hide();
job_manager_details.isuploading = 1;
// fileCount++;
}).bind('complete', function (event, id, fileName, responseJSON) {
$('li. qq-upload-fail').hide();
$('#displaymessage').hide();
job_manager_details.isuploading = 0;
if (responseJSON.success) {
// fileCount--;
ShowJobDocuments();
// if (fileCount == 0 && !$('div.alert-error').html()) {
$('#jobDocumentDialog').dialog("close");
// }
}
})
I just had the same issue and found one more clue.
The VM is incredibly slow (WinXP/IE8) while the network was a NAT'd but it became very fast as soon as it was switched to being bridged.
The speed of the upload should not be influenced by Fine Uploader in any noticeable way. All Fine Uploader does for non File API browsers, such as IE9 and older, is submit a <form> containing the file and related parameters. If you are noticing slow upload times, most likely something in your environment is the cause of the issue. You haven't provided any additional information about your environment, so I can't offer any advice on that front.
As you may already know, file size checking is not possible client-side in IE9 and earlier due to lack of File API support.
I'm doing direct upload to S3 using html form and ajax. It's working good, files get uploaded. My problem is that progress events arrive too quickly. Like all of them up to 99.9% are fired immediately at the start of the upload.
var fd = new FormData();
// put data from the form to FormData object
$.each( $('#upload-form').serializeArray(), function(i, field) {
fd.append(field.name, field.value);
});
// add selected filename to the form data
var file = document.getElementById('path-to-file').files[0];
fd.append("file", file);
var xhr = getXmlHttpRequest(); // cross-browser implementation
xhr.upload.addEventListener("progress", function(e) {
console.log(e.loaded + "/" + e.total);
});
xhr.open('POST', 'http://mybucket.s3.amazonaws.com/', true);
xhr.send(fd);
also tried this way
xhr.upload.onprogress = function(evt)
{
if (evt.lengthComputable)
{
console.log(e.loaded + "/" + e.total);
}
};
Browser log looks like this:
[22:54:47.245] POST http://mybucket.s3.amazonaws.com/
[22:54:47.287] 359865/5680475
[22:54:47.330] 1408441/5680475
[22:54:47.408] 2751929/5680475
[22:54:47.449] 3964345/5680475
[22:54:47.509] 5668281/5680475
and then nothing for the time it actually takes to upload a 5M file.
If browser info is relevant, I have Firefox 20.0.1
the following code works on firefox,chrome and IE9 on my PC.
But the callback function doesn't return when I run it in WP7 device using phonegap.
function downloadXML(
$.ajax({
async: true,
cache: false,
type: 'GET',
dataType: "xml",
crossDomain: true,
url: yql_url('http://some-cross-domain-url'),
error:function(xhr, status, errorThrown){
navigator.notification.alert(errorThrown+'\n'+status+'\n'+xhr.statusText);
},
success: function (xml) {
navigator.notification.alert("successful");
}
});
}
yql_url = function(source_url) {
return "http://query.yahooapis.com/v1/public/yql?q=select * from xml where url=\"" + source_url + "\"";
}
Does anyone point out what EXTRA has to be done to make it run on WP7 ? THX
OR let me re-frame the question,
Can someone give me a code snippet which works on WP7 with phonegap that can fetch XML from a cross domain URL.
I have been trying a lot to make it run on WP7 without any success :(
You need to set the following to true:
$.support.cors
and
$.mobile.allowCrossDomainPages
Check the jQuery Mobile Docs
Seems to be similar to Phonegap for Windows Phone jQuery ajax callback not executed
Try the following: comment everything in phonegap-1.3.0.js starting from line 3551 to the end of the file
//(function(win,doc){
//
// doc.addEventListener("DOMContentLoaded",function()
// {
// ......
// if(!docDomain || docDomain.length == 0)
// {
// //console.log("adding our own Local XHR shim ");
// var aliasXHR = win.XMLHttpRequest;
//
// win.XMLHttpRequest = function(){};
//
// var UNSENT = 0;
// ......
//
//
//})(window,document);
PS. For XSS on WP7 you also need the following flag for jQuery $.support.cors = true;
EDIT
PhoneGap 1.4.0rc1 is commited
https://github.com/purplecabbage/callback-windows-phone
Changes include fixes for XHR to local files, + fixes to allow jQM single/multipage apps function correctly.