[DropZone] Prettier formatting + updated some fields in DropZoneOptions (#39345)

* applied prettier ruleset

* Fixed some linting rules, a lot of work still remains
edited dropzone version and added my name to maintainers

* Updated DropZoneOptions interface to reflect the current docs:
- added function type to url property
- added function type to method property
- replaced thumbnailMethod and resizeMethod to a union type as they can only contain 2 specific strings as options
This commit is contained in:
Arne Deruwe
2019-11-01 07:50:44 -07:00
committed by Jesse Trinity
parent 2561381939
commit aa561f1dfa
2 changed files with 563 additions and 486 deletions
+292 -256
View File
@@ -1,192 +1,191 @@
const dropzoneFromString = new Dropzone(".test");
const dropzoneFromElement = new Dropzone(document.getElementById("test"));
const dropzoneRenameFunction = function (name: string): string {
return name + 'new';
const dropzoneFromString = new Dropzone('.test');
const dropzoneFromElement = new Dropzone(document.getElementById('test'));
const dropzoneRenameFunction = (name: string): string => {
return name + 'new';
};
Dropzone.createElement('<div id="divTest"></div>');
Dropzone.isBrowserSupported();
console.log(Dropzone.instances.length);
const dropzoneWithOptions = new Dropzone(".test", {
url: "/some/url",
method: "post",
withCredentials: false,
parallelUploads: 2,
uploadMultiple: true,
chunking: true,
forceChunking: true,
chunkSize: 4000000,
parallelChunkUploads: true,
retryChunks: true,
retryChunksLimit: 6,
maxFilesize: 1024,
paramName: "file",
createImageThumbnails: true,
maxThumbnailFilesize: 1024,
thumbnailWidth: 120,
thumbnailHeight: 120,
thumbnailMethod: 'crop',
resizeWidth: 1024,
resizeHeight: 1024,
resizeMimeType: 'image.jpeg',
resizeQuality: .8,
resizeMethod: 'contain',
filesizeBase: 1000,
maxFiles: 100,
params: {
additional: "param"
},
headers: {
"Some-Header": "Value"
},
clickable: true,
ignoreHiddenFiles: true,
acceptedFiles: "image/*",
renameFilename: dropzoneRenameFunction,
autoProcessQueue: true,
autoQueue: true,
addRemoveLinks: true,
previewsContainer: "<div></div>",
hiddenInputContainer: document.createElement("input"),
capture: "camera",
const dropzoneWithOptions = new Dropzone('.test', {
url: '/some/url',
method: 'post',
withCredentials: false,
parallelUploads: 2,
uploadMultiple: true,
chunking: true,
forceChunking: true,
chunkSize: 4000000,
parallelChunkUploads: true,
retryChunks: true,
retryChunksLimit: 6,
maxFilesize: 1024,
paramName: 'file',
createImageThumbnails: true,
maxThumbnailFilesize: 1024,
thumbnailWidth: 120,
thumbnailHeight: 120,
thumbnailMethod: 'crop',
resizeWidth: 1024,
resizeHeight: 1024,
resizeMimeType: 'image.jpeg',
resizeQuality: 0.8,
resizeMethod: 'contain',
filesizeBase: 1000,
maxFiles: 100,
params: {
additional: 'param',
},
headers: {
'Some-Header': 'Value',
},
clickable: true,
ignoreHiddenFiles: true,
acceptedFiles: 'image/*',
renameFilename: dropzoneRenameFunction,
autoProcessQueue: true,
autoQueue: true,
addRemoveLinks: true,
previewsContainer: '<div></div>',
hiddenInputContainer: document.createElement('input'),
capture: 'camera',
dictDefaultMessage: "",
dictFallbackMessage: "",
dictFallbackText: "",
dictFileTooBig: "",
dictInvalidFileType: "",
dictResponseError: "",
dictCancelUpload: "",
dictCancelUploadConfirmation: "",
dictRemoveFile: "",
dictRemoveFileConfirmation: "",
dictMaxFilesExceeded: "",
dictFileSizeUnits: { tb: "", gb: "", mb: "", kb: "", b: "" },
dictUploadCanceled: "",
dictDefaultMessage: '',
dictFallbackMessage: '',
dictFallbackText: '',
dictFileTooBig: '',
dictInvalidFileType: '',
dictResponseError: '',
dictCancelUpload: '',
dictCancelUploadConfirmation: '',
dictRemoveFile: '',
dictRemoveFileConfirmation: '',
dictMaxFilesExceeded: '',
dictFileSizeUnits: { tb: '', gb: '', mb: '', kb: '', b: '' },
dictUploadCanceled: '',
accept: (file: Dropzone.DropzoneFile, done: (error?: string | Error) => void) => {
if (file.accepted) {
file.previewElement.classList.add("accepted");
file.previewTemplate.classList.add("accepted");
file.previewsContainer.classList.add("accepted");
done();
}
else {
done(new Error(file.status));
}
},
chunksUploaded: (file: Dropzone.DropzoneFile, done: (error?: string | Error) => void) => {
if (file.accepted) {
file.previewElement.classList.add("accepted");
file.previewTemplate.classList.add("accepted");
file.previewsContainer.classList.add("accepted");
done();
}
else {
done(new Error(file.status));
}
},
init: () => console.log("Initialized"),
forceFallback: false,
fallback: () => console.log("Fallback"),
resize: (file: Dropzone.DropzoneFile, width: 120, height: 120, resizeMethod: 'contain') => ({
srcX: 0,
srcY: 0,
trgX: 10,
trgY: 10,
srcWidth: 100,
srcHeight: 100,
trgWidth: 50,
trgHeight: 50,
}),
accept: (file: Dropzone.DropzoneFile, done: (error?: string | Error) => void) => {
if (file.accepted) {
file.previewElement.classList.add('accepted');
file.previewTemplate.classList.add('accepted');
file.previewsContainer.classList.add('accepted');
done();
} else {
done(new Error(file.status));
}
},
chunksUploaded: (file: Dropzone.DropzoneFile, done: (error?: string | Error) => void) => {
if (file.accepted) {
file.previewElement.classList.add('accepted');
file.previewTemplate.classList.add('accepted');
file.previewsContainer.classList.add('accepted');
done();
} else {
done(new Error(file.status));
}
},
init: () => console.log('Initialized'),
forceFallback: false,
fallback: () => console.log('Fallback'),
resize: (file: Dropzone.DropzoneFile, width: 120, height: 120, resizeMethod: 'contain') => ({
srcX: 0,
srcY: 0,
trgX: 10,
trgY: 10,
srcWidth: 100,
srcHeight: 100,
trgWidth: 50,
trgHeight: 50,
}),
drop: (e: DragEvent) => console.log("Drop"),
dragstart: (e: DragEvent) => console.log("Dragstart"),
dragend: (e: DragEvent) => console.log("Dragend"),
dragenter: (e: DragEvent) => console.log("Dragenter"),
dragover: (e: DragEvent) => console.log("Dragover"),
dragleave: (e: DragEvent) => console.log("Dragleave"),
paste: (e: DragEvent) => console.log("Paste"),
drop: (e: DragEvent) => console.log('Drop'),
dragstart: (e: DragEvent) => console.log('Dragstart'),
dragend: (e: DragEvent) => console.log('Dragend'),
dragenter: (e: DragEvent) => console.log('Dragenter'),
dragover: (e: DragEvent) => console.log('Dragover'),
dragleave: (e: DragEvent) => console.log('Dragleave'),
paste: (e: DragEvent) => console.log('Paste'),
reset: () => console.log("Reset"),
reset: () => console.log('Reset'),
addedfile: (file: Dropzone.DropzoneFile) => console.log("Addedfile"),
addedfiles: (files: Dropzone.DropzoneFile[]) => console.log("Addedfiles"),
removedfile: (file: Dropzone.DropzoneFile) => console.log("Removedfile"),
thumbnail: (file: Dropzone.DropzoneFile, dataUrl: string) => console.log("Thumbnail"),
addedfile: (file: Dropzone.DropzoneFile) => console.log('Addedfile'),
addedfiles: (files: Dropzone.DropzoneFile[]) => console.log('Addedfiles'),
removedfile: (file: Dropzone.DropzoneFile) => console.log('Removedfile'),
thumbnail: (file: Dropzone.DropzoneFile, dataUrl: string) => console.log('Thumbnail'),
error: (file: Dropzone.DropzoneFile, message: string | Error) => console.log("Error"),
errormultiple: (files: Dropzone.DropzoneFile[], message: string | Error) => console.log("Errormultiple"),
error: (file: Dropzone.DropzoneFile, message: string | Error) => console.log('Error'),
errormultiple: (files: Dropzone.DropzoneFile[], message: string | Error) => console.log('Errormultiple'),
processing: (file: Dropzone.DropzoneFile) => console.log("Processing"),
processingmultiple: (files: Dropzone.DropzoneFile[]) => console.log("Processingmultiple"),
processing: (file: Dropzone.DropzoneFile) => console.log('Processing'),
processingmultiple: (files: Dropzone.DropzoneFile[]) => console.log('Processingmultiple'),
uploadprogress: (file: Dropzone.DropzoneFile, progress: number, bytesSent: number) => console.log("Uploadprogress"),
totaluploadprogress: (totalProgress: number, totalBytes: number, totalBytesSent: number) => console.log("Totaluploadprogress"),
uploadprogress: (file: Dropzone.DropzoneFile, progress: number, bytesSent: number) => console.log('Uploadprogress'),
totaluploadprogress: (totalProgress: number, totalBytes: number, totalBytesSent: number) =>
console.log('Totaluploadprogress'),
sending: (file: Dropzone.DropzoneFile, xhr: XMLHttpRequest, formData: {}) => console.log("Sending"),
sendingmultiple: (files: Dropzone.DropzoneFile[], xhr: XMLHttpRequest, formData: {}) => console.log("Sendingmultiple"),
sending: (file: Dropzone.DropzoneFile, xhr: XMLHttpRequest, formData: {}) => console.log('Sending'),
sendingmultiple: (files: Dropzone.DropzoneFile[], xhr: XMLHttpRequest, formData: {}) =>
console.log('Sendingmultiple'),
success: (file: Dropzone.DropzoneFile) => console.log("Success"),
successmultiple: (files: Dropzone.DropzoneFile[]) => console.log("Successmultiple"),
success: (file: Dropzone.DropzoneFile) => console.log('Success'),
successmultiple: (files: Dropzone.DropzoneFile[]) => console.log('Successmultiple'),
canceled: (file: Dropzone.DropzoneFile) => console.log("Canceled"),
canceledmultiple: (file: Dropzone.DropzoneFile[]) => console.log("Canceledmultiple"),
canceled: (file: Dropzone.DropzoneFile) => console.log('Canceled'),
canceledmultiple: (file: Dropzone.DropzoneFile[]) => console.log('Canceledmultiple'),
complete: (file: Dropzone.DropzoneFile) => console.log("Complete"),
completemultiple: (file: Dropzone.DropzoneFile[]) => console.log("Completemultiple"),
complete: (file: Dropzone.DropzoneFile) => console.log('Complete'),
completemultiple: (file: Dropzone.DropzoneFile[]) => console.log('Completemultiple'),
maxfilesexceeded: (file: Dropzone.DropzoneFile) => console.log("Maxfilesexceeded"),
maxfilesreached: (files: Dropzone.DropzoneFile[]) => console.log("Maxfilesreached"),
queuecomplete: () => console.log("Queuecomplete"),
maxfilesexceeded: (file: Dropzone.DropzoneFile) => console.log('Maxfilesexceeded'),
maxfilesreached: (files: Dropzone.DropzoneFile[]) => console.log('Maxfilesreached'),
queuecomplete: () => console.log('Queuecomplete'),
transformFile: (file, done) => done(file),
transformFile: (file, done) => done(file),
previewTemplate: "<div></div>",
previewTemplate: '<div></div>',
});
var dropzoneWithOptionsVariations: Dropzone;
dropzoneWithOptionsVariations = new Dropzone(".test", {
clickable: ".test"
dropzoneWithOptionsVariations = new Dropzone('.test', {
clickable: '.test',
});
dropzoneWithOptionsVariations = new Dropzone(".test", {
clickable: document.getElementById("test")
dropzoneWithOptionsVariations = new Dropzone('.test', {
clickable: document.getElementById('test'),
});
dropzoneWithOptionsVariations = new Dropzone(".test", {
clickable: [".test", ".test"]
dropzoneWithOptionsVariations = new Dropzone('.test', {
clickable: ['.test', '.test'],
});
dropzoneWithOptionsVariations = new Dropzone(".test", {
clickable: [document.getElementById("test"), document.getElementById("test")]
dropzoneWithOptionsVariations = new Dropzone('.test', {
clickable: [document.getElementById('test'), document.getElementById('test')],
});
dropzoneWithOptionsVariations = new Dropzone(".test", {
clickable: ["test", document.getElementById("test")]
dropzoneWithOptionsVariations = new Dropzone('.test', {
clickable: ['test', document.getElementById('test')],
});
dropzoneWithOptionsVariations = new Dropzone(".test", {
success: (file: Dropzone.DropzoneFile, response: Object) => console.log(file, response)
dropzoneWithOptionsVariations = new Dropzone('.test', {
success: (file: Dropzone.DropzoneFile, response: object) => console.log(file, response),
});
dropzoneWithOptionsVariations = new Dropzone(".test", {
success: (file: Dropzone.DropzoneFile, response: string) => console.log(file, response)
dropzoneWithOptionsVariations = new Dropzone('.test', {
success: (file: Dropzone.DropzoneFile, response: string) => console.log(file, response),
});
const dropzone = new Dropzone(".test");
const dropzone = new Dropzone('.test');
dropzone.enable();
dropzone.disable();
dropzone.files.forEach(f => {
if (f.xhr) {
console.log(f.xhr.readyState)
}
if (f.accepted) {
f.previewElement.classList.add("accepted");
f.previewTemplate.classList.add("accepted");
f.previewsContainer.classList.add("accepted");
}
else {
console.log(f.status.toUpperCase());
}
if (f.xhr) {
console.log(f.xhr.readyState);
}
if (f.accepted) {
f.previewElement.classList.add('accepted');
f.previewTemplate.classList.add('accepted');
f.previewsContainer.classList.add('accepted');
} else {
console.log(f.status.toUpperCase());
}
});
const firstFile = dropzone.files[0];
@@ -200,22 +199,58 @@ dropzone.cancelUpload(firstFile);
dropzone.createThumbnail(firstFile);
dropzone.createThumbnail(firstFile, dropzone.defaultOptions.resizeWidth);
dropzone.createThumbnail(firstFile, dropzone.defaultOptions.resizeWidth, dropzone.defaultOptions.resizeHeight);
dropzone.createThumbnail(firstFile, dropzone.defaultOptions.resizeWidth, dropzone.defaultOptions.resizeHeight, dropzone.defaultOptions.resizeMethod);
dropzone.createThumbnail(firstFile, dropzone.defaultOptions.resizeWidth, dropzone.defaultOptions.resizeHeight, dropzone.defaultOptions.resizeMethod, true);
dropzone.createThumbnail(firstFile, dropzone.defaultOptions.resizeWidth, dropzone.defaultOptions.resizeHeight, dropzone.defaultOptions.resizeMethod, true, () => {
console.log("createThumbnail")
});
dropzone.createThumbnail(
firstFile,
dropzone.defaultOptions.resizeWidth,
dropzone.defaultOptions.resizeHeight,
dropzone.defaultOptions.resizeMethod,
);
dropzone.createThumbnail(
firstFile,
dropzone.defaultOptions.resizeWidth,
dropzone.defaultOptions.resizeHeight,
dropzone.defaultOptions.resizeMethod,
true,
);
dropzone.createThumbnail(
firstFile,
dropzone.defaultOptions.resizeWidth,
dropzone.defaultOptions.resizeHeight,
dropzone.defaultOptions.resizeMethod,
true,
() => {
console.log('createThumbnail');
},
);
dropzone.createThumbnailFromUrl(firstFile);
dropzone.createThumbnailFromUrl(firstFile, dropzone.defaultOptions.resizeWidth);
dropzone.createThumbnailFromUrl(firstFile, dropzone.defaultOptions.resizeWidth, dropzone.defaultOptions.resizeHeight);
dropzone.createThumbnailFromUrl(firstFile, dropzone.defaultOptions.resizeWidth, dropzone.defaultOptions.resizeHeight, dropzone.defaultOptions.resizeMethod);
dropzone.createThumbnailFromUrl(firstFile, dropzone.defaultOptions.resizeWidth, dropzone.defaultOptions.resizeHeight, dropzone.defaultOptions.resizeMethod, true);
dropzone.createThumbnailFromUrl(firstFile, dropzone.defaultOptions.resizeWidth, dropzone.defaultOptions.resizeHeight, dropzone.defaultOptions.resizeMethod, true, () => {
console.log("createThumbnailFromUrl")
});
dropzone.createThumbnailFromUrl(
firstFile,
dropzone.defaultOptions.resizeWidth,
dropzone.defaultOptions.resizeHeight,
dropzone.defaultOptions.resizeMethod,
);
dropzone.createThumbnailFromUrl(
firstFile,
dropzone.defaultOptions.resizeWidth,
dropzone.defaultOptions.resizeHeight,
dropzone.defaultOptions.resizeMethod,
true,
);
dropzone.createThumbnailFromUrl(
firstFile,
dropzone.defaultOptions.resizeWidth,
dropzone.defaultOptions.resizeHeight,
dropzone.defaultOptions.resizeMethod,
true,
() => {
console.log('createThumbnailFromUrl');
},
);
dropzone.accept(firstFile, (e: string | Error) => {
console.log(e);
console.log(e);
});
const acceptedFiles = dropzone.getAcceptedFiles();
@@ -246,103 +281,104 @@ dropzone.resizeImage(firstFile);
dropzone.resizeImage(firstFile, 120);
dropzone.resizeImage(firstFile, 120, 120);
dropzone.resizeImage(firstFile, 120, 120, 'contain');
dropzone.resizeImage(firstFile, 120, 120, 'contain', function () { });
dropzone.resizeImage(firstFile, 120, 120, 'contain', () => {});
document.createElement("div").dropzone;
document.createElement('div').dropzone;
dropzone
.on("drop", () => {
console.count('drop');
})
.on("dragstart", () => {
console.count('dragstart');
})
.on("dragend", () => {
console.count('dragend');
})
.on("dragenter", () => {
console.count('dragenter');
})
.on("dragover", () => {
console.count('dragover');
})
.on("dragleave", () => {
console.count('dragleave');
})
.on("paste", () => {
console.count('paste');
})
.on("reset", () => {
console.count('reset');
})
.on("addedfile", () => {
console.count('addedfile');
})
.on("addedfiles", () => {
console.count('addedfiles');
})
.on("removedfile", () => {
console.count('removedfile');
})
.on("thumbnail", () => {
console.count('thumbnail');
})
.on("error", () => {
console.count('error');
})
.on("errormultiple", () => {
console.count('errormultiple');
})
.on("processing", () => {
console.count('processing');
})
.on("processingmultiple", () => {
console.count('processingmultiple');
})
.on("uploadprogress", () => {
console.count('uploadprogress');
})
.on("totaluploadprogress", () => {
console.count('totaluploadprogress');
})
.on("sending", () => {
console.count('sending');
})
.on("sendingmultiple", () => {
console.count('sendingmultiple');
})
.on("success", () => {
console.count('success');
})
.on("successmultiple", () => {
console.count('successmultiple');
})
.on("canceled", () => {
console.count('canceled');
})
.on("canceledmultiple", () => {
console.count('canceledmultiple');
})
.on("complete", () => {
console.count('complete');
})
.on("completemultiple", () => {
console.count('completemultiple');
})
.on("maxfilesexceeded", () => {
console.count('maxfilesexceeded');
})
.on("maxfilesreached", () => {
console.count('maxfilesreached');
})
.on("queuecomplete", () => {
console.count('queuecomplete');
});
.on('drop', () => {
console.count('drop');
})
.on('dragstart', () => {
console.count('dragstart');
})
.on('dragend', () => {
console.count('dragend');
})
.on('dragenter', () => {
console.count('dragenter');
})
.on('dragover', () => {
console.count('dragover');
})
.on('dragleave', () => {
console.count('dragleave');
})
.on('paste', () => {
console.count('paste');
})
.on('reset', () => {
console.count('reset');
})
.on('addedfile', () => {
console.count('addedfile');
})
.on('addedfiles', () => {
console.count('addedfiles');
})
.on('removedfile', () => {
console.count('removedfile');
})
.on('thumbnail', () => {
console.count('thumbnail');
})
.on('error', () => {
console.count('error');
})
.on('errormultiple', () => {
console.count('errormultiple');
})
.on('processing', () => {
console.count('processing');
})
.on('processingmultiple', () => {
console.count('processingmultiple');
})
.on('uploadprogress', () => {
console.count('uploadprogress');
})
.on('totaluploadprogress', () => {
console.count('totaluploadprogress');
})
.on('sending', () => {
console.count('sending');
})
.on('sendingmultiple', () => {
console.count('sendingmultiple');
})
.on('success', () => {
console.count('success');
})
.on('successmultiple', () => {
console.count('successmultiple');
})
.on('canceled', () => {
console.count('canceled');
})
.on('canceledmultiple', () => {
console.count('canceledmultiple');
})
.on('complete', () => {
console.count('complete');
})
.on('completemultiple', () => {
console.count('completemultiple');
})
.on('maxfilesexceeded', () => {
console.count('maxfilesexceeded');
})
.on('maxfilesreached', () => {
console.count('maxfilesreached');
})
.on('queuecomplete', () => {
console.count('queuecomplete');
});
dropzone.off("drop", () => {
console.count('drop');
})
.off("dragstart")
.off();
dropzone
.off('drop', () => {
console.count('drop');
})
.off('dragstart')
.off();
dropzone.destroy();
+271 -230
View File
@@ -1,4 +1,4 @@
// Type definitions for Dropzone 5.0.0
// Type definitions for Dropzone 5.5.0
// Project: http://www.dropzonejs.com/
// Definitions by: Natan Vivo <https://github.com/nvivo>
// Andy Hawkins <https://github.com/a904guy/,http://a904guy.com/,http://www.bmbsqd.com>
@@ -8,320 +8,361 @@
// Ted Bicknell <https://github.com/tedbcsgpro>
// Daniel Waxweiler <https://github.com/dwaxweiler>
// PikachuEXE <https://github.com/PikachuEXE>
// Arne Deruwe <https://github.com/arnederuwe>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.3
/// <reference types="jquery"/>
declare namespace Dropzone {
export interface DropzoneResizeInfo {
srcX?: number;
srcY?: number;
trgX?: number;
trgY?: number;
srcWidth?: number;
srcHeight?: number;
trgWidth?: number;
trgHeight?: number;
}
export interface DropzoneResizeInfo {
srcX?: number;
srcY?: number;
trgX?: number;
trgY?: number;
srcWidth?: number;
srcHeight?: number;
trgWidth?: number;
trgHeight?: number;
}
export interface DropzoneFile extends File {
previewElement: HTMLElement;
previewTemplate: HTMLElement;
previewsContainer: HTMLElement;
status: string;
accepted: boolean;
xhr?: XMLHttpRequest;
}
export interface DropzoneDictFileSizeUnits {
tb?: string;
gb?: string;
mb?: string;
kb?: string;
b?: string;
}
export interface DropzoneFile extends File {
previewElement: HTMLElement;
previewTemplate: HTMLElement;
previewsContainer: HTMLElement;
status: string;
accepted: boolean;
xhr?: XMLHttpRequest;
}
export interface DropzoneOptions {
url?: string;
method?: string;
withCredentials?: boolean;
timeout?: number;
parallelUploads?: number;
uploadMultiple?: boolean;
chunking?: boolean;
forceChunking?: boolean;
chunkSize?: number;
parallelChunkUploads?: boolean;
retryChunks?: boolean;
retryChunksLimit?: number;
maxFilesize?: number;
paramName?: string;
createImageThumbnails?: boolean;
maxThumbnailFilesize?: number;
thumbnailWidth?: number;
thumbnailHeight?: number;
thumbnailMethod?: string;
resizeWidth?: number;
resizeHeight?: number;
resizeMimeType?: string;
resizeQuality?: number;
resizeMethod?: string;
filesizeBase?: number;
maxFiles?: number;
params?: {};
headers?: {};
clickable?: boolean | string | HTMLElement | (string | HTMLElement)[];
ignoreHiddenFiles?: boolean;
acceptedFiles?: string;
renameFilename?(name: string): string;
autoProcessQueue?: boolean;
autoQueue?: boolean;
addRemoveLinks?: boolean;
previewsContainer?: boolean | string | HTMLElement;
hiddenInputContainer?: HTMLElement;
capture?: string;
export interface DropzoneDictFileSizeUnits {
tb?: string;
gb?: string;
mb?: string;
kb?: string;
b?: string;
}
dictDefaultMessage?: string;
dictFallbackMessage?: string;
dictFallbackText?: string;
dictFileTooBig?: string;
dictInvalidFileType?: string;
dictResponseError?: string;
dictCancelUpload?: string;
dictCancelUploadConfirmation?: string;
dictRemoveFile?: string;
dictRemoveFileConfirmation?: string;
dictMaxFilesExceeded?: string;
dictFileSizeUnits?: DropzoneDictFileSizeUnits;
dictUploadCanceled?: string;
export interface DropzoneOptions {
url?: ((files: ReadonlyArray<DropzoneFile>) => string) | string;
method?: ((files: ReadonlyArray<DropzoneFile>) => string) | string;
withCredentials?: boolean;
timeout?: number;
parallelUploads?: number;
uploadMultiple?: boolean;
chunking?: boolean;
forceChunking?: boolean;
chunkSize?: number;
parallelChunkUploads?: boolean;
retryChunks?: boolean;
retryChunksLimit?: number;
maxFilesize?: number;
paramName?: string;
createImageThumbnails?: boolean;
maxThumbnailFilesize?: number;
thumbnailWidth?: number;
thumbnailHeight?: number;
thumbnailMethod?: 'contain' | 'crop';
resizeWidth?: number;
resizeHeight?: number;
resizeMimeType?: string;
resizeQuality?: number;
resizeMethod?: 'contain' | 'crop';
filesizeBase?: number;
maxFiles?: number;
params?: {};
headers?: {};
clickable?: boolean | string | HTMLElement | (string | HTMLElement)[];
ignoreHiddenFiles?: boolean;
acceptedFiles?: string;
renameFilename?(name: string): string;
autoProcessQueue?: boolean;
autoQueue?: boolean;
addRemoveLinks?: boolean;
previewsContainer?: boolean | string | HTMLElement;
hiddenInputContainer?: HTMLElement;
capture?: string;
accept?(file: DropzoneFile, done: (error?: string | Error) => void): void;
chunksUploaded?(file: DropzoneFile, done: (error?: string | Error) => void): void;
init?(this : Dropzone): void;
forceFallback?: boolean;
fallback?(): void;
resize?(file: DropzoneFile, width?: number, height?: number, resizeMethod?: string): DropzoneResizeInfo;
dictDefaultMessage?: string;
dictFallbackMessage?: string;
dictFallbackText?: string;
dictFileTooBig?: string;
dictInvalidFileType?: string;
dictResponseError?: string;
dictCancelUpload?: string;
dictCancelUploadConfirmation?: string;
dictRemoveFile?: string;
dictRemoveFileConfirmation?: string;
dictMaxFilesExceeded?: string;
dictFileSizeUnits?: DropzoneDictFileSizeUnits;
dictUploadCanceled?: string;
drop?(e: DragEvent): void;
dragstart?(e: DragEvent): void;
dragend?(e: DragEvent): void;
dragenter?(e: DragEvent): void;
dragover?(e: DragEvent): void;
dragleave?(e: DragEvent): void;
paste?(e: DragEvent): void;
accept?(file: DropzoneFile, done: (error?: string | Error) => void): void;
chunksUploaded?(file: DropzoneFile, done: (error?: string | Error) => void): void;
init?(this: Dropzone): void;
forceFallback?: boolean;
fallback?(): void;
resize?(file: DropzoneFile, width?: number, height?: number, resizeMethod?: string): DropzoneResizeInfo;
reset?(): void;
drop?(e: DragEvent): void;
dragstart?(e: DragEvent): void;
dragend?(e: DragEvent): void;
dragenter?(e: DragEvent): void;
dragover?(e: DragEvent): void;
dragleave?(e: DragEvent): void;
paste?(e: DragEvent): void;
addedfile?(file: DropzoneFile): void;
addedfiles?(files: DropzoneFile[]): void;
removedfile?(file: DropzoneFile): void;
thumbnail?(file: DropzoneFile, dataUrl: string): void;
reset?(): void;
error?(file: DropzoneFile, message: string | Error, xhr: XMLHttpRequest): void;
errormultiple?(files: DropzoneFile[], message: string | Error, xhr: XMLHttpRequest): void;
addedfile?(file: DropzoneFile): void;
addedfiles?(files: DropzoneFile[]): void;
removedfile?(file: DropzoneFile): void;
thumbnail?(file: DropzoneFile, dataUrl: string): void;
processing?(file: DropzoneFile): void;
processingmultiple?(files: DropzoneFile[]): void;
error?(file: DropzoneFile, message: string | Error, xhr: XMLHttpRequest): void;
errormultiple?(files: DropzoneFile[], message: string | Error, xhr: XMLHttpRequest): void;
uploadprogress?(file: DropzoneFile, progress: number, bytesSent: number): void;
totaluploadprogress?(totalProgress: number, totalBytes: number, totalBytesSent: number): void;
processing?(file: DropzoneFile): void;
processingmultiple?(files: DropzoneFile[]): void;
sending?(file: DropzoneFile, xhr: XMLHttpRequest, formData: FormData): void;
sendingmultiple?(files: DropzoneFile[], xhr: XMLHttpRequest, formData: FormData): void;
uploadprogress?(file: DropzoneFile, progress: number, bytesSent: number): void;
totaluploadprogress?(totalProgress: number, totalBytes: number, totalBytesSent: number): void;
success?(file: DropzoneFile, response: Object | string): void;
successmultiple?(files: DropzoneFile[], responseText: string): void;
sending?(file: DropzoneFile, xhr: XMLHttpRequest, formData: FormData): void;
sendingmultiple?(files: DropzoneFile[], xhr: XMLHttpRequest, formData: FormData): void;
canceled?(file: DropzoneFile): void;
canceledmultiple?(file: DropzoneFile[]): void;
success?(file: DropzoneFile, response: Object | string): void;
successmultiple?(files: DropzoneFile[], responseText: string): void;
complete?(file: DropzoneFile): void;
completemultiple?(file: DropzoneFile[]): void;
canceled?(file: DropzoneFile): void;
canceledmultiple?(file: DropzoneFile[]): void;
maxfilesexceeded?(file: DropzoneFile): void;
maxfilesreached?(files: DropzoneFile[]): void;
queuecomplete?(): void;
complete?(file: DropzoneFile): void;
completemultiple?(file: DropzoneFile[]): void;
transformFile?(file: DropzoneFile, done: (file: string | Blob) => void): void;
maxfilesexceeded?(file: DropzoneFile): void;
maxfilesreached?(files: DropzoneFile[]): void;
queuecomplete?(): void;
previewTemplate?: string;
}
transformFile?(file: DropzoneFile, done: (file: string | Blob) => void): void;
previewTemplate?: string;
}
}
declare class Dropzone {
constructor(container: string | HTMLElement, options?: Dropzone.DropzoneOptions);
constructor(container: string | HTMLElement, options?: Dropzone.DropzoneOptions);
static autoDiscover: boolean;
static options: any;
static confirm: (question: string, accepted: () => void, rejected?: () => void) => void;
static createElement(string: string): HTMLElement;
static isBrowserSupported(): boolean;
static instances: Dropzone[];
static autoDiscover: boolean;
static options: any;
static confirm: (question: string, accepted: () => void, rejected?: () => void) => void;
static createElement(string: string): HTMLElement;
static isBrowserSupported(): boolean;
static instances: Dropzone[];
static ADDED: string;
static QUEUED: string;
static ACCEPTED: string;
static UPLOADING: string;
static PROCESSING: string;
static CANCELED: string;
static ERROR: string;
static SUCCESS: string;
static ADDED: string;
static QUEUED: string;
static ACCEPTED: string;
static UPLOADING: string;
static PROCESSING: string;
static CANCELED: string;
static ERROR: string;
static SUCCESS: string;
files: Dropzone.DropzoneFile[];
defaultOptions: Dropzone.DropzoneOptions;
files: Dropzone.DropzoneFile[];
defaultOptions: Dropzone.DropzoneOptions;
enable(): void;
enable(): void;
disable(): void;
disable(): void;
destroy(): Dropzone;
destroy(): Dropzone;
addFile(file: Dropzone.DropzoneFile): void;
addFile(file: Dropzone.DropzoneFile): void;
removeFile(file: Dropzone.DropzoneFile): void;
removeFile(file: Dropzone.DropzoneFile): void;
removeAllFiles(cancelIfNecessary?: boolean): void;
removeAllFiles(cancelIfNecessary?: boolean): void;
resizeImage(file: Dropzone.DropzoneFile, width?: number, height?: number, resizeMethod?: string, callback?: (...args: any[]) => void): void;
resizeImage(
file: Dropzone.DropzoneFile,
width?: number,
height?: number,
resizeMethod?: string,
callback?: (...args: any[]) => void,
): void;
processQueue(): void;
processQueue(): void;
cancelUpload(file: Dropzone.DropzoneFile): void;
cancelUpload(file: Dropzone.DropzoneFile): void;
createThumbnail(file: Dropzone.DropzoneFile, width?: number, height?: number, resizeMethod?: string, fixOrientation?: boolean, callback?: (...args: any[]) => void): any;
createThumbnail(
file: Dropzone.DropzoneFile,
width?: number,
height?: number,
resizeMethod?: string,
fixOrientation?: boolean,
callback?: (...args: any[]) => void,
): any;
createThumbnailFromUrl(file: Dropzone.DropzoneFile, width?: number, height?: number, resizeMethod?: string, fixOrientation?: boolean, callback?: (...args: any[]) => void, crossOrigin?: string): any;
createThumbnailFromUrl(
file: Dropzone.DropzoneFile,
width?: number,
height?: number,
resizeMethod?: string,
fixOrientation?: boolean,
callback?: (...args: any[]) => void,
crossOrigin?: string,
): any;
processFiles(files: Dropzone.DropzoneFile[]): void;
processFiles(files: Dropzone.DropzoneFile[]): void;
processFile(file: Dropzone.DropzoneFile): void;
processFile(file: Dropzone.DropzoneFile): void;
uploadFile(file: Dropzone.DropzoneFile): void;
uploadFile(file: Dropzone.DropzoneFile): void;
uploadFiles(files: Dropzone.DropzoneFile[]): void;
uploadFiles(files: Dropzone.DropzoneFile[]): void;
getAcceptedFiles(): Dropzone.DropzoneFile[];
getAcceptedFiles(): Dropzone.DropzoneFile[];
getActiveFiles(): Dropzone.DropzoneFile[];
getActiveFiles(): Dropzone.DropzoneFile[];
getAddedFiles(): Dropzone.DropzoneFile[];
getAddedFiles(): Dropzone.DropzoneFile[];
getRejectedFiles(): Dropzone.DropzoneFile[];
getRejectedFiles(): Dropzone.DropzoneFile[];
getQueuedFiles(): Dropzone.DropzoneFile[];
getQueuedFiles(): Dropzone.DropzoneFile[];
getUploadingFiles(): Dropzone.DropzoneFile[];
getUploadingFiles(): Dropzone.DropzoneFile[];
accept(file: Dropzone.DropzoneFile, done: (error?: string | Error) => void): void;
accept(file: Dropzone.DropzoneFile, done: (error?: string | Error) => void): void;
getFilesWithStatus(status: string): Dropzone.DropzoneFile[];
getFilesWithStatus(status: string): Dropzone.DropzoneFile[];
enqueueFile(file: Dropzone.DropzoneFile): void;
enqueueFile(file: Dropzone.DropzoneFile): void;
enqueueFiles(file: Dropzone.DropzoneFile[]): void;
enqueueFiles(file: Dropzone.DropzoneFile[]): void;
createThumbnail(file: Dropzone.DropzoneFile, callback?: (...args: any[]) => void): any;
createThumbnail(file: Dropzone.DropzoneFile, callback?: (...args: any[]) => void): any;
createThumbnailFromUrl(file: Dropzone.DropzoneFile, url: string, callback?: (...args: any[]) => void): any;
createThumbnailFromUrl(file: Dropzone.DropzoneFile, url: string, callback?: (...args: any[]) => void): any;
on(eventName: string, callback: (...args: any[]) => void): Dropzone;
on(eventName: string, callback: (...args: any[]) => void): Dropzone;
off(): Dropzone;
off(eventName: string, callback?: (...args: any[]) => void): Dropzone;
off(): Dropzone;
off(eventName: string, callback?: (...args: any[]) => void): Dropzone;
emit(eventName: string, ...args: any[]): Dropzone;
emit(eventName: string, ...args: any[]): Dropzone;
on(eventName: "drop", callback: (e: DragEvent) => any): Dropzone;
on(eventName: "dragstart", callback: (e: DragEvent) => any): Dropzone;
on(eventName: "dragend", callback: (e: DragEvent) => any): Dropzone;
on(eventName: "dragenter", callback: (e: DragEvent) => any): Dropzone;
on(eventName: "dragover", callback: (e: DragEvent) => any): Dropzone;
on(eventName: "dragleave", callback: (e: DragEvent) => any): Dropzone;
on(eventName: "paste", callback: (e: DragEvent) => any): Dropzone;
on(eventName: 'drop', callback: (e: DragEvent) => any): Dropzone;
on(eventName: 'dragstart', callback: (e: DragEvent) => any): Dropzone;
on(eventName: 'dragend', callback: (e: DragEvent) => any): Dropzone;
on(eventName: 'dragenter', callback: (e: DragEvent) => any): Dropzone;
on(eventName: 'dragover', callback: (e: DragEvent) => any): Dropzone;
on(eventName: 'dragleave', callback: (e: DragEvent) => any): Dropzone;
on(eventName: 'paste', callback: (e: DragEvent) => any): Dropzone;
on(eventName: "reset"): Dropzone;
on(eventName: 'reset'): Dropzone;
on(eventName: "addedfile", callback: (file: Dropzone.DropzoneFile) => any): Dropzone;
on(eventName: "addedfiles", callback: (files: Dropzone.DropzoneFile[]) => any): Dropzone;
on(eventName: "removedfile", callback: (file: Dropzone.DropzoneFile) => any): Dropzone;
on(eventName: "thumbnail", callback: (file: Dropzone.DropzoneFile, dataUrl: string) => any): Dropzone;
on(eventName: 'addedfile', callback: (file: Dropzone.DropzoneFile) => any): Dropzone;
on(eventName: 'addedfiles', callback: (files: Dropzone.DropzoneFile[]) => any): Dropzone;
on(eventName: 'removedfile', callback: (file: Dropzone.DropzoneFile) => any): Dropzone;
on(eventName: 'thumbnail', callback: (file: Dropzone.DropzoneFile, dataUrl: string) => any): Dropzone;
on(eventName: "error", callback: (file: Dropzone.DropzoneFile, message: string | Error) => any): Dropzone;
on(eventName: "errormultiple", callback: (files: Dropzone.DropzoneFile[], message: string | Error) => any): Dropzone;
on(eventName: 'error', callback: (file: Dropzone.DropzoneFile, message: string | Error) => any): Dropzone;
on(
eventName: 'errormultiple',
callback: (files: Dropzone.DropzoneFile[], message: string | Error) => any,
): Dropzone;
on(eventName: "processing", callback: (file: Dropzone.DropzoneFile) => any): Dropzone;
on(eventName: "processingmultiple", callback: (files: Dropzone.DropzoneFile[]) => any): Dropzone;
on(eventName: 'processing', callback: (file: Dropzone.DropzoneFile) => any): Dropzone;
on(eventName: 'processingmultiple', callback: (files: Dropzone.DropzoneFile[]) => any): Dropzone;
on(eventName: "uploadprogress", callback: (file: Dropzone.DropzoneFile, progress: number, bytesSent: number) => any): Dropzone;
on(eventName: "totaluploadprogress", callback: (totalProgress: number, totalBytes: number, totalBytesSent: number) => any): Dropzone;
on(
eventName: 'uploadprogress',
callback: (file: Dropzone.DropzoneFile, progress: number, bytesSent: number) => any,
): Dropzone;
on(
eventName: 'totaluploadprogress',
callback: (totalProgress: number, totalBytes: number, totalBytesSent: number) => any,
): Dropzone;
on(eventName: "sending", callback: (file: Dropzone.DropzoneFile, xhr: XMLHttpRequest, formData: FormData) => any): Dropzone;
on(eventName: "sendingmultiple", callback: (files: Dropzone.DropzoneFile[], xhr: XMLHttpRequest, formData: FormData) => any): Dropzone;
on(
eventName: 'sending',
callback: (file: Dropzone.DropzoneFile, xhr: XMLHttpRequest, formData: FormData) => any,
): Dropzone;
on(
eventName: 'sendingmultiple',
callback: (files: Dropzone.DropzoneFile[], xhr: XMLHttpRequest, formData: FormData) => any,
): Dropzone;
on(eventName: "success", callback: (file: Dropzone.DropzoneFile) => any): Dropzone;
on(eventName: "successmultiple", callback: (files: Dropzone.DropzoneFile[]) => any): Dropzone;
on(eventName: 'success', callback: (file: Dropzone.DropzoneFile) => any): Dropzone;
on(eventName: 'successmultiple', callback: (files: Dropzone.DropzoneFile[]) => any): Dropzone;
on(eventName: "canceled", callback: (file: Dropzone.DropzoneFile) => any): Dropzone;
on(eventName: "canceledmultiple", callback: (file: Dropzone.DropzoneFile[]) => any): Dropzone;
on(eventName: 'canceled', callback: (file: Dropzone.DropzoneFile) => any): Dropzone;
on(eventName: 'canceledmultiple', callback: (file: Dropzone.DropzoneFile[]) => any): Dropzone;
on(eventName: "complete", callback: (file: Dropzone.DropzoneFile) => any): Dropzone;
on(eventName: "completemultiple", callback: (file: Dropzone.DropzoneFile[]) => any): Dropzone;
on(eventName: 'complete', callback: (file: Dropzone.DropzoneFile) => any): Dropzone;
on(eventName: 'completemultiple', callback: (file: Dropzone.DropzoneFile[]) => any): Dropzone;
on(eventName: "maxfilesexceeded", callback: (file: Dropzone.DropzoneFile) => any): Dropzone;
on(eventName: "maxfilesreached", callback: (files: Dropzone.DropzoneFile[]) => any): Dropzone;
on(eventName: "queuecomplete"): Dropzone;
on(eventName: 'maxfilesexceeded', callback: (file: Dropzone.DropzoneFile) => any): Dropzone;
on(eventName: 'maxfilesreached', callback: (files: Dropzone.DropzoneFile[]) => any): Dropzone;
on(eventName: 'queuecomplete'): Dropzone;
emit(eventName: "drop", e: DragEvent): Dropzone;
emit(eventName: "dragstart", e: DragEvent): Dropzone;
emit(eventName: "dragend", e: DragEvent): Dropzone;
emit(eventName: "dragenter", e: DragEvent): Dropzone;
emit(eventName: "dragover", e: DragEvent): Dropzone;
emit(eventName: "dragleave", e: DragEvent): Dropzone;
emit(eventName: "paste", e: DragEvent): Dropzone;
emit(eventName: 'drop', e: DragEvent): Dropzone;
emit(eventName: 'dragstart', e: DragEvent): Dropzone;
emit(eventName: 'dragend', e: DragEvent): Dropzone;
emit(eventName: 'dragenter', e: DragEvent): Dropzone;
emit(eventName: 'dragover', e: DragEvent): Dropzone;
emit(eventName: 'dragleave', e: DragEvent): Dropzone;
emit(eventName: 'paste', e: DragEvent): Dropzone;
emit(eventName: "reset"): Dropzone;
emit(eventName: 'reset'): Dropzone;
emit(eventName: "addedfile", file: Dropzone.DropzoneFile): Dropzone;
emit(eventName: "addedfiles", files: Dropzone.DropzoneFile[]): Dropzone;
emit(eventName: "removedfile", file: Dropzone.DropzoneFile): Dropzone;
emit(eventName: "thumbnail", file: Dropzone.DropzoneFile, dataUrl: string): Dropzone;
emit(eventName: 'addedfile', file: Dropzone.DropzoneFile): Dropzone;
emit(eventName: 'addedfiles', files: Dropzone.DropzoneFile[]): Dropzone;
emit(eventName: 'removedfile', file: Dropzone.DropzoneFile): Dropzone;
emit(eventName: 'thumbnail', file: Dropzone.DropzoneFile, dataUrl: string): Dropzone;
emit(eventName: "error", file: Dropzone.DropzoneFile, message: string | Error): Dropzone;
emit(eventName: "errormultiple", files: Dropzone.DropzoneFile[], message: string | Error): Dropzone;
emit(eventName: 'error', file: Dropzone.DropzoneFile, message: string | Error): Dropzone;
emit(eventName: 'errormultiple', files: Dropzone.DropzoneFile[], message: string | Error): Dropzone;
emit(eventName: "processing", file: Dropzone.DropzoneFile): Dropzone;
emit(eventName: "processingmultiple", files: Dropzone.DropzoneFile[]): Dropzone;
emit(eventName: 'processing', file: Dropzone.DropzoneFile): Dropzone;
emit(eventName: 'processingmultiple', files: Dropzone.DropzoneFile[]): Dropzone;
emit(eventName: "uploadprogress", file: Dropzone.DropzoneFile, progress: number, bytesSent: number): Dropzone;
emit(eventName: "totaluploadprogress", totalProgress: number, totalBytes: number, totalBytesSent: number): Dropzone;
emit(eventName: 'uploadprogress', file: Dropzone.DropzoneFile, progress: number, bytesSent: number): Dropzone;
emit(eventName: 'totaluploadprogress', totalProgress: number, totalBytes: number, totalBytesSent: number): Dropzone;
emit(eventName: "sending", file: Dropzone.DropzoneFile, xhr: XMLHttpRequest, formData: FormData): Dropzone;
emit(eventName: "sendingmultiple", files: Dropzone.DropzoneFile[], xhr: XMLHttpRequest, formData: FormData): Dropzone;
emit(eventName: 'sending', file: Dropzone.DropzoneFile, xhr: XMLHttpRequest, formData: FormData): Dropzone;
emit(
eventName: 'sendingmultiple',
files: Dropzone.DropzoneFile[],
xhr: XMLHttpRequest,
formData: FormData,
): Dropzone;
emit(eventName: "success", file: Dropzone.DropzoneFile): Dropzone;
emit(eventName: "successmultiple", files: Dropzone.DropzoneFile[]): Dropzone;
emit(eventName: 'success', file: Dropzone.DropzoneFile): Dropzone;
emit(eventName: 'successmultiple', files: Dropzone.DropzoneFile[]): Dropzone;
emit(eventName: "canceled", file: Dropzone.DropzoneFile): Dropzone;
emit(eventName: "canceledmultiple", file: Dropzone.DropzoneFile[]): Dropzone;
emit(eventName: 'canceled', file: Dropzone.DropzoneFile): Dropzone;
emit(eventName: 'canceledmultiple', file: Dropzone.DropzoneFile[]): Dropzone;
emit(eventName: "complete", file: Dropzone.DropzoneFile): Dropzone;
emit(eventName: "completemultiple", file: Dropzone.DropzoneFile[]): Dropzone;
emit(eventName: "maxfilesexceeded", file: Dropzone.DropzoneFile): Dropzone;
emit(eventName: "maxfilesreached", files: Dropzone.DropzoneFile[]): Dropzone;
emit(eventName: "queuecomplete"): Dropzone;
emit(eventName: 'complete', file: Dropzone.DropzoneFile): Dropzone;
emit(eventName: 'completemultiple', file: Dropzone.DropzoneFile[]): Dropzone;
emit(eventName: 'maxfilesexceeded', file: Dropzone.DropzoneFile): Dropzone;
emit(eventName: 'maxfilesreached', files: Dropzone.DropzoneFile[]): Dropzone;
emit(eventName: 'queuecomplete'): Dropzone;
}
declare global {
interface JQuery {
dropzone(options: Dropzone.DropzoneOptions): Dropzone;
}
interface JQuery {
dropzone(options: Dropzone.DropzoneOptions): Dropzone;
}
interface HTMLElement {
dropzone: Dropzone;
}
interface HTMLElement {
dropzone: Dropzone;
}
}
export = Dropzone;