DefinitelyTyped/types/dropzone/dropzone-tests.ts

const dropzoneFromString = new Dropzone(".test");
const dropzoneFromElement = new Dropzone(document.getElementById("test"));
const dropzoneRenameFunction = function (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",

	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,
	}),

	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"),

	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"),

	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"),

	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"),

	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"),

	maxfilesexceeded: (file: Dropzone.DropzoneFile) => console.log("Maxfilesexceeded"),
	maxfilesreached: (files: Dropzone.DropzoneFile[]) => console.log("Maxfilesreached"),
	queuecomplete: () => console.log("Queuecomplete"),

	transformFile: (file, done) => done(file),

	previewTemplate: "<div></div>",
});

var dropzoneWithOptionsVariations: Dropzone;
dropzoneWithOptionsVariations = new Dropzone(".test", {
	clickable: ".test"
});
dropzoneWithOptionsVariations = new Dropzone(".test", {
	clickable: document.getElementById("test")
});
dropzoneWithOptionsVariations = new Dropzone(".test", {
	clickable: [".test", ".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", {
	success: (file: Dropzone.DropzoneFile, response: Object) => console.log(file, response)
});
dropzoneWithOptionsVariations = new Dropzone(".test", {
	success: (file: Dropzone.DropzoneFile, response: string) => console.log(file, response)
});

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());
	}
});

const firstFile = dropzone.files[0];
dropzone.removeFile(firstFile);
dropzone.addFile(firstFile);
dropzone.enqueueFile(firstFile);
dropzone.processFile(firstFile);
dropzone.uploadFile(firstFile);
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.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.accept(firstFile, (e: string | Error) => {
	console.log(e);
});

const acceptedFiles = dropzone.getAcceptedFiles();
dropzone.processFiles(acceptedFiles);

const addedFiles = dropzone.getAddedFiles();
dropzone.processFiles(addedFiles);

const rejectedFiles = dropzone.getRejectedFiles();
dropzone.enqueueFiles(rejectedFiles);

const queuedFiles = dropzone.getQueuedFiles();
dropzone.processFiles(queuedFiles);

const uploadingFiles = dropzone.getUploadingFiles();
dropzone.processFiles(uploadingFiles);

const activeFiles = dropzone.getActiveFiles();
dropzone.processFiles(activeFiles);

const getFileWithStatusAdded = dropzone.getFilesWithStatus(Dropzone.ADDED);
dropzone.processFiles(getFileWithStatusAdded);

dropzone.processQueue();
dropzone.removeAllFiles(true);

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 () { });

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');
	});

dropzone.off("drop", () => {
	console.count('drop');
})
	.off("dragstart")
	.off();

dropzone.destroy();