https://dillyofapickle.com/view/js/dropzone-factory.js?v=2026.05

1// SPDX-FileCopyrightText: 2010-2024 the Friendica project
2//
3// SPDX-License-Identifier: AGPL-3.0-or-later
4
5Dropzone.autoDiscover = false;
6var DzFactory = function (max_imagesize) {
7	this.createDropzone = function(dropSelector, textareaElementId) {
8		return new Dropzone(dropSelector, {
9			paramName: 'userfile', // The name that will be used to transfer the file
10			maxFilesize: max_imagesize, // MB
11			url: '/media/photo/upload?album=',
12			acceptedFiles: 'image/*,video/*,audio/*,application/*',
13			clickable: true,
14			dictDefaultMessage: dzStrings.dictDefaultMessage,
15			dictFallbackMessage: dzStrings.dictFallbackMessage,
16			dictFallbackText: dzStrings.dictFallbackText,
17			dictFileTooBig: dzStrings.dictFileTooBig,
18			dictInvalidFileType: dzStrings.dictInvalidFileType,
19			dictResponseError: dzStrings.dictResponseError,
20			dictCancelUpload: dzStrings.dictCancelUpload,
21			dictUploadCanceled: dzStrings.dictUploadCanceled,
22			dictCancelUploadConfirmation: dzStrings.dictCancelUploadConfirmation,
23			dictRemoveFile: dzStrings.dictRemoveFile,
24			dictMaxFilesExceeded: dzStrings.dictMaxFilesExceeded,
25			accept: function(file, done) {
26					const targetTextarea = document.getElementById(textareaElementId);
27					if (targetTextarea.setRangeText) {
28						targetTextarea.setRangeText("\n[!upload-" + file.name + "]\n", targetTextarea.selectionStart, targetTextarea.selectionEnd, "end");
29					}
30				done();
31			},
32			init: function() {
33				this.on("processing", function(file) {
34					switch(file.type) {
35						case String(file.type.match(/image\/.*/)):
36							this.options.url = "/media/photo/upload?album=";
37							break;
38						default:
39							this.options.url = "/media/attachment/upload?response=json";
40					}
41				});
42				this.on('success', function(file, serverResponse) {
43					const targetTextarea = document.getElementById(textareaElementId);
44					if (targetTextarea.setRangeText) {
45						//if setRangeText function is supported by current browser
46						let u = "[!upload-" + file.name + "]";
47						let srp = serverResponse;
48						if (typeof serverResponse === 'object' &&
49						serverResponse.constructor === Object) {
50							if (serverResponse.ok) {
51								srp = "[attachment]" +
52									window.location.protocol +
53									"//" +
54									window.location.host +
55									"/attach/" +
56									serverResponse.id +
57									"[/attachment]";
58							} else {
59								srp = "Upload failed";
60							}
61						}
62						let c = targetTextarea.selectionStart;
63						if (c > targetTextarea.value.indexOf(u)) {
64							c = c + serverResponse.length - u.length;
65						}
66						targetTextarea.setRangeText(srp, targetTextarea.value.indexOf(u), targetTextarea.value.indexOf(u) + u.length);
67						targetTextarea.selectionStart = c;
68						targetTextarea.selectionEnd = c;
69					} else {
70						targetTextarea.focus();
71						document.execCommand('insertText', false /*no UI*/, serverResponse);
72					}
73				});
74				this.on('complete', function(file) {
75					const dz = this;
76					// Remove just uploaded file from dropzone, makes interface more clear.
77					// Image can be seen in posting-preview
78					// We need preview to get optical feedback about upload-progress.
79					// you see success, when the bb-code link for image is inserted
80					setTimeout(function(){
81						dz.removeFile(file);
82					},5000);
83				});
84			},
85			paste: function(event){
86				const items = (event.clipboardData || event.originalEvent.clipboardData).items;
87				items.forEach((item) => {
88					if (item.kind === 'file') {
89						// adds the file to your dropzone instance
90						dz.addFile(item.getAsFile());
91					}
92				})
93			},
94		});
95	};
96
97	this.copyPaste = function(event, dz) {
98		const items = (event.clipboardData || event.originalEvent.clipboardData).items;
99		items.forEach((item) => {
100			if (item.kind === 'file') {
101				// adds the file to your dropzone instance
102				dz.addFile(item.getAsFile());
103			}
104		})
105	};
106
107	this.setupDropzone = function(dropSelector, textareaElementId) {
108		const self = this;
109		var dropzone = this.createDropzone(dropSelector, textareaElementId);
110		$(dropSelector).on('paste', function(event) {
111			self.copyPaste(event, dropzone);
112		})
113	};
114}
115