Remove all files dropzoneJs only image upload - javascript

How I can remove images after sendingmultiple without removing other params? I tried this but it does not work:
init: function () {
this.on('sendingmultiple', function(file, xhr, formData){
formData.append('ids', $("#ids").val());
});
},
init: function () {
this.on("completemultiple", function (file) {
this.removeAllFiles();
});
},
I do not want to delete this id, just images

In drop zone above the following function use
function isImage($img){
return (bool)getimagesize($img);
}
if(isImage($_FILES['file']['tmp_name'])){
if(move_uploaded_file($_FILES['file']['tmp_name'],$targetFile))

Related

Dropzone remove all file except first file

Just simple ask, I have code like this on JavaScript on dropzone
addRemoveLinks: true,
maxFiles: 1,
init: function() {
this.on("maxfilesexceeded", function(file) {
swal("Error", "U just can upload 1 file", "warning");
});
}
Well is kind a work the file not upload if I have a file, but that file (not first one) still show even they not uploaded, I need to remove all file (not first one) automatic if they didn't upload or get alert. How can I did that???
You can call the removeFile() method, also if you want the thumbnail to show for a moment with the message you can add a timeout:
Dropzone.options.myAwesomeDropzone = {
maxFiles: 1,
dictMaxFilesExceeded: "U just can upload 1 file",
init: function () {
var myDropzone = this;
this.on("maxfilesexceeded", function(file) {
setTimeout(function() {
myDropzone.removeFile(file);
}, 3000);
});
},
};

DropzoneJS & Laravel - Output form validation errors

I am trying to output form validation errors when you hover over the "X" in the dropped off file in Dropzone.
What I get:
How can I make the object Object output the actual error message from the form validation? I can alert the error message but can't actually show the error message upon hovering over the x.
My js file:
Dropzone.options.fileupload = {
maxFilesize: 20,
init: function () {
thisDropzone = this;
this.on("error", function (file, responseText) {
$.each(responseText, function (index, value) {
alert( value); //this shows the alert of the error message
});
});
}
};
My controller:
$this->validate($request, [
'file' => 'max:20000',
]);
I have fixed my issue.
To anyone who might have the same issue.
I fixed it by simply putting $('.dz-error-message').text(value);
Full code:
Dropzone.options.fileupload = {
maxFilesize: 50,
init: function () {
thisDropzone = this;
this.on("error", function (file, responseText) {
$.each(responseText, function (index, value) {
$('.dz-error-message').text(value);
});
});
}
};
If you want just laravel validation errors use that.
...
init: function () {
thisDropzone = this;
this.on("error", function (file, responseText) {
$.each(responseText, function (index, value) {
if (index === 'errors'){
$('.dz-error-message').text(value.file);
}
});
});
},
...
Or if you just want dropzone.js error outputs change.
if(index === message)

Firing a custom event in ExtJS 5.1

I have been trying to fire a custom event when a file has been successfully uploaded using a modal window. A grid on the main page listens for the event and should reload its store when a file is successfully uploaded. Problem is, the grid never catches this event.
I think I have a fundamental misunderstanding of how custom events work. What steps should I take to get back on track?
SomeCommonUtilityClass.js
upload: function(args) {
Ext.create('Ext.window.Window', {
/* form with some controls */
buttons: [{
text:'Upload',
handler: function() {
var win = this.up('window');
var form = this.up('form').getForm();
form.submit ({
url: myAjaxCall,
success: function() {
/* fire event here */
win.fireEvent('uploadSuccess');
},
failure: function() {
/*...*/
}
});
}
},
/* etc. */
});
}
SomeOtherFileView.js
{
xtype:'grid',
itemId:'uploadedGrid',
listeners: {
uploadSuccess: 'reloadUploadStore'
},
bind: {
store:'{form}'
},
columns:[/*...*/]
}
SomeOtherFileViewController.js
reloadUploadStore: function() {
console.log("My event fired!") // Never gets here.
/* .... */
store.load({
params: ({
a: "a",
b: "b"
});
callback: function() {
/* do more stuff */
}
});
}
SomeCommonUtilityClass
win.fireEvent('uploadSuccess');
Example of custom event and Controller that listen on it:
SomeOtherFileViewController
init: function() {
this.listen({
// We are using Controller event domain here
controller: {
// This selector matches any originating Controller
'*': {
uploadSuccess: 'reloadUploadStore'
}
}
});
},
reloadUploadStore: function() {
//your code
}
or if you want pass a argument:
win.fireEvent('uploadSuccess',extraArgument);
Controller code is the same. Only your function definition changes:
reloadUploadStore: function(yourArgument) {
//Do your stuff with extraArgument
}

Integrating Dropzone.js with angular

I am working from some code that integrated DropboxJS as an angular directive. I cannot get it to work. I've taken his fiddle and updated it with current CDN links. Any idea why the directive code never fires? For ex if I drop an image it will go to /upload instead of /desiredupload and the event doesn't fire.
Fiddle: http://jsfiddle.net/cyberwombat/3tDqZ//1/
angular.module('dropZone', [])
.directive('dropZone', function() {
return function(scope, element, attrs) {
element.dropzone({
url: "/desiredupload",
maxFilesize: 100,
paramName: "uploadfile",
maxThumbnailFilesize: 5,
init: function() {
this.on("addedfile", function(file) {
alert("Added file."); });
}
});
}
});
angular.module('dropZone', [])
.controller('dropZoneCtrl', function() {});
Additionally and unfortunately I cannot replicate in my fiddle - on my local code I get this error: Object [object Object] has no method 'dropzone'
I am loading dropzone, then angular (tried the the other way) then my app, directives, etc.. so I don't think order is an issue. Dropzone successfully detects the form and makes it DnD but my directive element doesn't seem to have dropz
This is how I do it:
.directive('dropZone', function () {
return {
scope: {
action: "#",
autoProcess: "=?",
callBack: "&?",
dataMax: "=?",
mimetypes: "=?",
message: "#?",
},
link: function (scope, element, attrs) {
console.log("Creating dropzone");
// Autoprocess the form
if (scope.autoProcess != null && scope.autoProcess == "false") {
scope.autoProcess = false;
} else {
scope.autoProcess = true;
}
// Max file size
if (scope.dataMax == null) {
scope.dataMax = Dropzone.prototype.defaultOptions.maxFilesize;
} else {
scope.dataMax = parseInt(scope.dataMax);
}
// Message for the uploading
if (scope.message == null) {
scope.message = Dropzone.prototype.defaultOptions.dictDefaultMessage;
}
element.dropzone({
url: scope.action,
maxFilesize: scope.dataMax,
paramName: "file",
acceptedFiles: scope.mimetypes,
maxThumbnailFilesize: scope.dataMax,
dictDefaultMessage: scope.message,
autoProcessQueue: scope.autoProcess,
success: function (file, response) {
if (scope.callBack != null) {
scope.callBack({response: response});
}
}
});
}
}
})
An example usage of this would be:
<div action="/file/upload/" class="dropzone" drop-zone
call-back="myCallBackMethod(response)"
data-max="5"
auto-process="false"
message="Drop file here or click to select"
mimetypes=".doc,.docx,.pages,.pdf,.odt"
id="file-dropzone">
</div>
Any scope variable that has a ? next to it is optional. The only required field is action, which would be the URL to send post to.
$(element).dropzone({
url: "/desiredupload",
maxFilesize: 100,
paramName: "uploadfile",
maxThumbnailFilesize: 5,
init: function() {
this.on("addedfile", function(file) {
alert("Added file."); });
}
});
Wrap element with $(...). In AngularJS it says all DOM elements are JQuery object but I think you might be using a older version of AngularJS.

filter files in Blueimp/ jQuery-File-Upload

I am trying to use Blueimp / jQuery-File-Upload my project and I want to test the file extension because I only want to download photos
someone show me where and how I should configure blueimp / jQuery-File-Upload so I can do this
As stated in the documentation you can simply set the options to a regex for the file type like that:
$('#fileupload').fileupload('option', {
url: '//localhost/',
maxFileSize: 5000000,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
process: [
{
action: 'load',
fileTypes: /^image\/(gif|jpeg|png)$/,
maxFileSize: 20000000 // 20MB
},
{
action: 'resize',
maxWidth: 1440,
maxHeight: 900
},
{
action: 'save'
}
]
});
I found this add method
So, here is my code for .gpx files:
$('#fileupload').fileupload({
// your fileupload options
add:function(e,data){
data.files.map(function(i){
if(i.type!='application/gpx+xml'){
alert('please upload only .gpx files');
}else{
data.submit();
}
}),
process: function(e,data){/* your process actions here */}
});
Your can use the method add for filter files:
var $input = $('#upload_input');
$input.fileupload({
fileInput: $input,
url: 'YOU_URL',
// Other options...
start: function(e, data) {
// Before start upload... Please wait...
},
add: function(e, data) {
types = /(\.|\/)(gif|jpe?g|png)$/i;
file = data.files[0]
if (types.test(file.type) || types.test(file.name)) {
data.submit();
} else {
// alert('Unfortunately, we don’t support that file type. Try again with a PNG, GIF, JPG');
return;
}
},
done: function(e, data) {
// After upload... alert('Done');
},
fail: function(e, data) {
// Error. Please try again later...
}
});

Categories