Develop Reference

Dropzone send empty

I have a dropzone setup with the following script:
<script>
Dropzone.options.myDropzone = {
url: 'assets/PHP/createNieuws.php',
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 1,
maxFiles: 1,
maxFilesize: 1,
acceptedFiles: 'image/*',
addRemoveLinks: true,
createImageThumbnails: true,
init: function () {
dzClosure = this; // Makes sure that 'this' is understood inside the functions below.
this.on("success", function (file, responseText) {
console.log(responseText);
});
// for Dropzone to process the queue (instead of default form behavior):
document.getElementById("submit").addEventListener("click", function (e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
if (dzClosure.getQueuedFiles().length > 0) {
dzClosure.processQueue();
} else {
dzClosure.uploadFiles([{ name: 'nofiles' }]); //send empty
}
});
//send all the form data along with the files:
this.on("sendingmultiple", function (data, xhr, formData) {
formData.append("titel", jQuery("#titel").val());
formData.append("artikel", jQuery("#artikel").val());
});
}
}
</script>
And i also have a file named default.png on my server. I would like dropzone to refer to default.png if no image is detected. As you can see i've tryed this solution already to no succes: https://stackoverflow.com/a/41044001/6396380
This returns the following error in my chrome console:
dropzone.js:1497 Uncaught TypeError: Cannot read property 'filename' of undefined
My dropzone version is 5.1.0 .
Any idea's on how to fix this?

This happens because the new version assumes that there is a file.upload object with filename. Changing your mock file to
{ name: 'nofiles', upload: { filename: 'nofiles' } }
should do the trick.
You should also upgrade to 5.1.1 because it solves a bug related to this.

For people having errors on firefox due to append method while using uploadFiles function but still wants to get that phat xhr request submitted with everything handled for you I suggest instead of using
dropzone.uploadFile({
name: 'nofiles',
upload: {
filename: 'nofiles'
}
})
to use
dropzone._uploadData(
[
{
upload: {
filename: ''
}
}
],
[
{
filename: '',
name: '',
data: new Blob()
}
]
);

Image File Download issue in ionic for iOS platform

I am trying to download some image files and store it for offline accessibility purpose of the app using Ionic framework. I have used two Cordova plugins named "Cordova-plugin-file" and "Cordova-plugin-file transfer". My code works on Android but faces a strange issue in iOS platform.
Error in Success callbackId: FileTransfer552364304 : TypeError: null
is not an object (evaluating 'result.lengthComputable'),
callbackFromNativecordova.js
Sometimes the code works, sometimes it throws me this error. Also I cannot access the error from my javascript code. Can anyone help? The code snippet is given below:
downloadImage: function(url, fileName) {
var deferred = $q.defer();
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs) {
fs.root.getDirectory(
LOCAL_STORAGE_KEYS.app, {
create: true
},
function(dirEntry) {
// console.log(arguments);
dirEntry.getFile(
fileName, {
create: true,
exclusive: false
},
function(fe) {
console.log(arguments);
var p = fe.toURL();
console.log("In service the url path:", p);
fe.remove();
var ft = new FileTransfer();
console.log('File Transfer instance:',ft);
ft.download(
encodeURI(url),
p,
function(entry) {
console.log('In service the entry callback:',entry);
if (entry && entry.toURL) {
deferred.resolve(entry.toURL());
} else {
deferred.resolve();
}
},
function(err) {
console.log('Getting rejected:',err);
deferred.reject(err);
},
false,
null
);
},
function() {
deferred.reject(new Error('get file failed'));
}
);
}
);
},
function() {
deferred.reject(new Error('get directory failed'));
});
return deferred.promise;
}

Chrome Apps : How to save blob content to fileSystem in the background?

In Chrome Apps, I'm downloading a blob content from a server using JavaScript XHR (Angular $http GET in particular, with response type 'blob')
How should I save this to chrome application's file system?
Currently using an Angular wrapper on HTML5 filesystem API
https://github.com/maciel310/angular-filesystem
I do not want to show user a popup (hence I can't use chrome.fileSystem. chooseEntry )
The chrome.fileSystem.requestFileSystem API is only supported by Kiosk-only apps.
Hence I'm using HTML5 FileSystem API instead of chrome's.
I'm using following code to make XHR to fetch blob.
$http({
url: SERVER_URL+"/someVideo.mp4",
method: "GET",
responseType: "blob"
}).then(function(response) {
console.log(response);
fileSystem.writeBlob(response.name, response).then(function() {
console.log("file saved");
}, function(err) {
console.log(err);
});
}, function (response) {
});
This is my writeBlob method
writeBlob: function(fileName, blob, append) {
append = (typeof append == 'undefined' ? false : append);
var def = $q.defer();
fsDefer.promise.then(function(fs) {
fs.root.getFile(fileName, {create: true}, function(fileEntry) {
fileEntry.createWriter(function(fileWriter) {
if(append) {
fileWriter.seek(fileWriter.length);
}
var truncated = false;
fileWriter.onwriteend = function(e) {
//truncate all data after current position
if (!truncated) {
truncated = true;
this.truncate(this.position);
return;
}
safeResolve(def, "");
};
fileWriter.onerror = function(e) {
safeReject(def, {text: 'Write failed', obj: e});
};
fileWriter.write(blob);
}, function(e) {
safeReject(def, {text: "Error creating file", obj: e});
});
}, function(e) {
safeReject(def, {text: "Error getting file", obj: e});
});
}, function(err) {
def.reject(err);
});
return def.promise;
},
This shows SECURITY_ERR as It was determined that certain files are unsafe for access within a Web application, or that too many calls are being made on file resources.
What's the solution for this?
I've tried using --allow-file-access-from-files flag while launching app. It doesn't help.

Chrome Application's sandbox storage doesn't allow files to be stored in root directory (i.e. / )
Modify the code to save it in a specific sub-directory under it.
For example -
fileSystem.writeBlob("/new"+response.name, response).then(function() {
console.log("file saved");
}, function(err) {
console.log(err);
});
This would successfully save the file under /new/ directory.

To expand on this, here is a full example app on how to download a file and save the blob and display it back to the user.
https://github.com/PierBover/chrome-os-app-download-example

can't get Meteor slingshot to work

I am trying to get slingshot to work but having a hard time, I am attaching here the code I have.
The error I get n the console is:
"Exception in delivering result of invoking 'slingshot/uploadRequest': TypeError: Cannot read property 'response' of undefined"
client
Template.hello.events({
'change .uploadFile': function(event, template) {
event.preventDefault();
var uploader = new Slingshot.Upload("myFileUploads");
uploader.send(document.getElementById('uploadFile').files[0], function (error, downloadUrl) {
if (error) {
// Log service detailed response
console.error('Error uploading', uploader.xhr.response);
alert (error);
}
else{
console.log("Worked!");
}
});
}
});
lib
Slingshot.fileRestrictions("myFileUploads", {
allowedFileTypes: ["image/png", "image/jpeg", "image/gif"],
maxSize: null // 10 MB (use null for unlimited)
});
server
Slingshot.fileRestrictions("myFileUploads", {
allowedFileTypes: ["image/png", "image/jpeg", "image/gif"],
maxSize: null,
});
Slingshot.createDirective("myFileUploads", Slingshot.S3Storage, {
AWSAccessKeyId: "my-AWSAccessKeyId",
AWSSecretAccessKey: "my-AWSSecretAccessKey",
bucket: "slingshot-trial-2",
acl: "public-read",
authorize: function () {
//Deny uploads if user is not logged in.
},
key: function (file) {
//Store file into a directory by the user's username.
return file.name;
}
});

I saw the same issue and it was due to xhr being null - try removing the console error line that references it and I'm assuming you'll start seeing the alert with the actual error message:
console.error('Error uploading', uploader.xhr.response);
I ended up putting in a check for xhr before referencing it and then logging it if it existed.

Multipart issues with chunking

I am trying to setup a test implementation of FineUploader, but I am running into a problem with chunking. I have debug set to true, and everything seems to be going great until the very end of the process where I get the following errors:
"[Fine Uploader 5.0.2] All chunks have been uploaded for 0 - finalizing...." custom.fineuploader-5.0.2.js:207
"[Fine Uploader 5.0.2] Submitting All Chunks Done request for 0" custom.fineuploader-5.0.2.js:207
"[Fine Uploader 5.0.2] Sending POST request for 0" custom.fineuploader-5.0.2.js:207
"[Fine Uploader 5.0.2] Received response status 200 with body: {"error":"Server error. Not a multipart request. Please set forceMultipart to default value (true).","uploadName":null,"template":"undefined","category":"undefined"}" custom.fineuploader-5.0.2.js:207
"[Fine Uploader 5.0.2] Finalize successful for 0"
The bottom error says "Server error. Not a multipart request. Please set forceMultipart to default value (true).", but as far as I can tell my code it setup that way already. Here is what I have in the code for it:
var uploadHandler = $('#fine-uploader').fineUploader({
debug: true,
request: {
endpoint: 'server/endpoint.php',
forceMultipart: true,
params: // send the values to backend file (endpoint.php)
{
template:function() {
return $("#price_template_id").val();
},
category:function(){
return $("#category_id").val();
}
}
},
validation: { // validation for the images uploaded
allowedExtensions: ['jpeg', 'jpg'],
sizeLimit: 20971520 // 20 MB = 20 * 1024 * 1024 bytes 20971520
},
editFilename: {
enabled: true
},
display: { //display image on upload
fileSizeOnSubmit: true
},
resume: { //enable resume on upload
enabled: true
},
retry: { //enable retry on upload
enableAuto: true
},
forceMultipart: {
enabled: true
},
chunking: { //enable chunking on upload
concurrent: {
enabled: true
},
enabled: true,
partSize: 200000, //200KB per chunk
success: {
endpoint: 'server/endpoint.php'
}
},
template: "qq-template",
autoUpload: true,
showMessage: function(message) { //show message if any error occur during uplaod process
alert(message);
}
})
You can see/test the implementation here: http://web3.instaproofs.com/temp/fineuploaderv3/
Any ideas on what I am doing wrong with this?
Thanks!

Your server is not properly handling the "all chunks done" POST request. This is not a multipart encoded request. It is sent by Fine Uploader after the last chunk has successfully been uploaded to the server. This POST contains a URL-encoded message-body with information about the completed chunked file. Your server should combine all chunks associated with the file and then respond appropriately. More info at http://docs.fineuploader.com/branch/master/features/concurrent-chunking.html#server-side-implications.