MainWP Dashboard: Self-hosted WordPress Management for Agencies / 6.2.1

MainWP Dashboard: Self-hosted WordPress Management for Agencies v6.2.1

mainwp / assets / js / dropzone / options.js

options.js in MainWP Dashboard: Self-hosted WordPress Management for Agencies 6.2.1, at assets/js/dropzone/options.js

773 lines 23.2 KB

Raw Download Zip

1	import Dropzone from "./dropzone.js";
2	import defaultPreviewTemplate from "./preview-template.html";
3
4	let defaultOptions = {
5	/**
6	* Has to be specified on elements other than form (or when the form
7	* doesn't have an `action` attribute). You can also
8	* provide a function that will be called with `files` and
9	* must return the url (since `v3.12.0`)
10	*/
11	url: null,
12
13	/**
14	* Can be changed to `"put"` if necessary. You can also provide a function
15	* that will be called with `files` and must return the method (since `v3.12.0`).
16	*/
17	method: "post",
18
19	/**
20	* Will be set on the XHRequest.
21	*/
22	withCredentials: false,
23
24	/**
25	* The timeout for the XHR requests in milliseconds (since `v4.4.0`).
26	* If set to null or 0, no timeout is going to be set.
27	*/
28	timeout: null,
29
30	/**
31	* How many file uploads to process in parallel (See the
32	* Enqueuing file uploads documentation section for more info)
33	*/
34	parallelUploads: 2,
35
36	/**
37	* Whether to send multiple files in one request. If
38	* this it set to true, then the fallback file input element will
39	* have the `multiple` attribute as well. This option will
40	* also trigger additional events (like `processingmultiple`). See the events
41	* documentation section for more information.
42	*/
43	uploadMultiple: false,
44
45	/**
46	* Whether you want files to be uploaded in chunks to your server. This can't be
47	* used in combination with `uploadMultiple`.
48	*
49	* See [chunksUploaded](#config-chunksUploaded) for the callback to finalise an upload.
50	*/
51	chunking: false,
52
53	/**
54	* If `chunking` is enabled, this defines whether every file should be chunked,
55	* even if the file size is below chunkSize. This means, that the additional chunk
56	* form data will be submitted and the `chunksUploaded` callback will be invoked.
57	*/
58	forceChunking: false,
59
60	/**
61	* If `chunking` is `true`, then this defines the chunk size in bytes.
62	*/
63	chunkSize: 2000000,
64
65	/**
66	* If `true`, the individual chunks of a file are being uploaded simultaneously.
67	*/
68	parallelChunkUploads: false,
69
70	/**
71	* Whether a chunk should be retried if it fails.
72	*/
73	retryChunks: false,
74
75	/**
76	* If `retryChunks` is true, how many times should it be retried.
77	*/
78	retryChunksLimit: 3,
79
80	/**
81	* The maximum filesize (in bytes) that is allowed to be uploaded.
82	*/
83	maxFilesize: 256,
84
85	/**
86	* The name of the file param that gets transferred.
87	* NOTE: If you have the option `uploadMultiple` set to `true`, then
88	* Dropzone will append `[]` to the name.
89	*/
90	paramName: "file",
91
92	/**
93	* Whether thumbnails for images should be generated
94	*/
95	createImageThumbnails: true,
96
97	/**
98	* In MB. When the filename exceeds this limit, the thumbnail will not be generated.
99	*/
100	maxThumbnailFilesize: 10,
101
102	/**
103	* If `null`, the ratio of the image will be used to calculate it.
104	*/
105	thumbnailWidth: 120,
106
107	/**
108	* The same as `thumbnailWidth`. If both are null, images will not be resized.
109	*/
110	thumbnailHeight: 120,
111
112	/**
113	* How the images should be scaled down in case both, `thumbnailWidth` and `thumbnailHeight` are provided.
114	* Can be either `contain` or `crop`.
115	*/
116	thumbnailMethod: "crop",
117
118	/**
119	* If set, images will be resized to these dimensions before being uploaded.
120	* If only one, `resizeWidth` or `resizeHeight` is provided, the original aspect
121	* ratio of the file will be preserved.
122	*
123	* The `options.transformFile` function uses these options, so if the `transformFile` function
124	* is overridden, these options don't do anything.
125	*/
126	resizeWidth: null,
127
128	/**
129	* See `resizeWidth`.
130	*/
131	resizeHeight: null,
132
133	/**
134	* The mime type of the resized image (before it gets uploaded to the server).
135	* If `null` the original mime type will be used. To force jpeg, for example, use `image/jpeg`.
136	* See `resizeWidth` for more information.
137	*/
138	resizeMimeType: null,
139
140	/**
141	* The quality of the resized images. See `resizeWidth`.
142	*/
143	resizeQuality: 0.8,
144
145	/**
146	* How the images should be scaled down in case both, `resizeWidth` and `resizeHeight` are provided.
147	* Can be either `contain` or `crop`.
148	*/
149	resizeMethod: "contain",
150
151	/**
152	* The base that is used to calculate the displayed filesize. You can
153	* change this to 1024 if you would rather display kibibytes, mebibytes,
154	* etc... 1024 is technically incorrect, because `1024 bytes` are `1 kibibyte`
155	* not `1 kilobyte`. You can change this to `1024` if you don't care about
156	* validity.
157	*/
158	filesizeBase: 1000,
159
160	/**
161	* If not `null` defines how many files this Dropzone handles. If it exceeds,
162	* the event `maxfilesexceeded` will be called. The dropzone element gets the
163	* class `dz-max-files-reached` accordingly so you can provide visual
164	* feedback.
165	*/
166	maxFiles: null,
167
168	/**
169	* An optional object to send additional headers to the server. Eg:
170	* `{ "My-Awesome-Header": "header value" }`
171	*/
172	headers: null,
173
174	/**
175	* If `true`, the dropzone element itself will be clickable, if `false`
176	* nothing will be clickable.
177	*
178	* You can also pass an HTML element, a CSS selector (for multiple elements)
179	* or an array of those. In that case, all of those elements will trigger an
180	* upload when clicked.
181	*/
182	clickable: true,
183
184	/**
185	* Whether hidden files in directories should be ignored.
186	*/
187	ignoreHiddenFiles: true,
188
189	/**
190	* The default implementation of `accept` checks the file's mime type or
191	* extension against this list. This is a comma separated list of mime
192	* types or file extensions.
193	*
194	* Eg.: `image/*,application/pdf,.psd`
195	*
196	* If the Dropzone is `clickable` this option will also be used as
197	* [`accept`](https://developer.mozilla.org/en-US/docs/HTML/Element/input#attr-accept)
198	* parameter on the hidden file input as well.
199	*/
200	acceptedFiles: null,
201
202	/**
203	* Deprecated!
204	* Use acceptedFiles instead.
205	*/
206	acceptedMimeTypes: null,
207
208	/**
209	* If false, files will be added to the queue but the queue will not be
210	* processed automatically.
211	* This can be useful if you need some additional user input before sending
212	* files (or if you want want all files sent at once).
213	* If you're ready to send the file simply call `myDropzone.processQueue()`.
214	*
215	* See the [enqueuing file uploads](#enqueuing-file-uploads) documentation
216	* section for more information.
217	*/
218	autoProcessQueue: true,
219
220	/**
221	* If false, files added to the dropzone will not be queued by default.
222	* You'll have to call `enqueueFile(file)` manually.
223	*/
224	autoQueue: true,
225
226	/**
227	* If `true`, this will add a link to every file preview to remove or cancel (if
228	* already uploading) the file. The `dictCancelUpload`, `dictCancelUploadConfirmation`
229	* and `dictRemoveFile` options are used for the wording.
230	*/
231	addRemoveLinks: false,
232
233	/**
234	* Defines where to display the file previews – if `null` the
235	* Dropzone element itself is used. Can be a plain `HTMLElement` or a CSS
236	* selector. The element should have the `dropzone-previews` class so
237	* the previews are displayed properly.
238	*/
239	previewsContainer: null,
240
241	/**
242	* Set this to `true` if you don't want previews to be shown.
243	*/
244	disablePreviews: false,
245
246	/**
247	* This is the element the hidden input field (which is used when clicking on the
248	* dropzone to trigger file selection) will be appended to. This might
249	* be important in case you use frameworks to switch the content of your page.
250	*
251	* Can be a selector string, or an element directly.
252	*/
253	hiddenInputContainer: "body",
254
255	/**
256	* If null, no capture type will be specified
257	* If camera, mobile devices will skip the file selection and choose camera
258	* If microphone, mobile devices will skip the file selection and choose the microphone
259	* If camcorder, mobile devices will skip the file selection and choose the camera in video mode
260	* On apple devices multiple must be set to false. AcceptedFiles may need to
261	* be set to an appropriate mime type (e.g. "image/", "audio/", or "video/*").
262	*/
263	capture: null,
264
265	/**
266	* Deprecated. Use `renameFile` instead.
267	*/
268	renameFilename: null,
269
270	/**
271	* A function that is invoked before the file is uploaded to the server and renames the file.
272	* This function gets the `File` as argument and can use the `file.name`. The actual name of the
273	* file that gets used during the upload can be accessed through `file.upload.filename`.
274	*/
275	renameFile: null,
276
277	/**
278	* If `true` the fallback will be forced. This is very useful to test your server
279	* implementations first and make sure that everything works as
280	* expected without dropzone if you experience problems, and to test
281	* how your fallbacks will look.
282	*/
283	forceFallback: false,
284
285	/**
286	* The text used before any files are dropped.
287	*/
288	dictDefaultMessage: "Drop files here to upload",
289
290	/**
291	* The text that replaces the default message text it the browser is not supported.
292	*/
293	dictFallbackMessage:
294	"Your browser does not support drag'n'drop file uploads.",
295
296	/**
297	* The text that will be added before the fallback form.
298	* If you provide a fallback element yourself, or if this option is `null` this will
299	* be ignored.
300	*/
301	dictFallbackText:
302	"Please use the fallback form below to upload your files like in the olden days.",
303
304	/**
305	* If the filesize is too big.
306	* `{{filesize}}` and `{{maxFilesize}}` will be replaced with the respective configuration values.
307	*/
308	dictFileTooBig:
309	"File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.",
310
311	/**
312	* If the file doesn't match the file type.
313	*/
314	dictInvalidFileType: "You can't upload files of this type.",
315
316	/**
317	* If the server response was invalid.
318	* `{{statusCode}}` will be replaced with the servers status code.
319	*/
320	dictResponseError: "Server responded with {{statusCode}} code.",
321
322	/**
323	* If `addRemoveLinks` is true, the text to be used for the cancel upload link.
324	*/
325	dictCancelUpload: "Cancel upload",
326
327	/**
328	* The text that is displayed if an upload was manually canceled
329	*/
330	dictUploadCanceled: "Upload canceled.",
331
332	/**
333	* If `addRemoveLinks` is true, the text to be used for confirmation when cancelling upload.
334	*/
335	dictCancelUploadConfirmation: "Are you sure you want to cancel this upload?",
336
337	/**
338	* If `addRemoveLinks` is true, the text to be used to remove a file.
339	*/
340	dictRemoveFile: "Remove file",
341
342	/**
343	* If this is not null, then the user will be prompted before removing a file.
344	*/
345	dictRemoveFileConfirmation: null,
346
347	/**
348	* Displayed if `maxFiles` is st and exceeded.
349	* The string `{{maxFiles}}` will be replaced by the configuration value.
350	*/
351	dictMaxFilesExceeded: "You can not upload any more files.",
352
353	/**
354	* Allows you to translate the different units. Starting with `tb` for terabytes and going down to
355	* `b` for bytes.
356	*/
357	dictFileSizeUnits: { tb: "TB", gb: "GB", mb: "MB", kb: "KB", b: "b" },
358	/**
359	* Called when dropzone initialized
360	* You can add event listeners here
361	*/
362	init() {},
363
364	/**
365	* Can be an object of additional parameters to transfer to the server, or a `Function`
366	* that gets invoked with the `files`, `xhr` and, if it's a chunked upload, `chunk` arguments. In case
367	* of a function, this needs to return a map.
368	*
369	* The default implementation does nothing for normal uploads, but adds relevant information for
370	* chunked uploads.
371	*
372	* This is the same as adding hidden input fields in the form element.
373	*/
374	params(files, xhr, chunk) {
375	if (chunk) {
376	return {
377	dzuuid: chunk.file.upload.uuid,
378	dzchunkindex: chunk.index,
379	dztotalfilesize: chunk.file.size,
380	dzchunksize: this.options.chunkSize,
381	dztotalchunkcount: chunk.file.upload.totalChunkCount,
382	dzchunkbyteoffset: chunk.index * this.options.chunkSize,
383	};
384	}
385	},
386
387	/**
388	* A function that gets a [file](https://developer.mozilla.org/en-US/docs/DOM/File)
389	* and a `done` function as parameters.
390	*
391	* If the done function is invoked without arguments, the file is "accepted" and will
392	* be processed. If you pass an error message, the file is rejected, and the error
393	* message will be displayed.
394	* This function will not be called if the file is too big or doesn't match the mime types.
395	*/
396	accept(file, done) {
397	return done();
398	},
399
400	/**
401	* The callback that will be invoked when all chunks have been uploaded for a file.
402	* It gets the file for which the chunks have been uploaded as the first parameter,
403	* and the `done` function as second. `done()` needs to be invoked when everything
404	* needed to finish the upload process is done.
405	*/
406	chunksUploaded: function (file, done) {
407	done();
408	},
409
410	/**
411	* Gets called when the browser is not supported.
412	* The default implementation shows the fallback input field and adds
413	* a text.
414	*/
415	fallback() {
416	// This code should pass in IE7... :(
417	let messageElement;
418	this.element.className = `${this.element.className} dz-browser-not-supported`;
419
420	for (let child of this.element.getElementsByTagName("div")) {
421	if (/(^\| )dz-message($\| )/.test(child.className)) {
422	messageElement = child;
423	child.className = "dz-message"; // Removes the 'dz-default' class
424	break;
425	}
426	}
427	if (!messageElement) {
428	messageElement = Dropzone.createElement(
429	'<div class="dz-message"><span></span></div>'
430	);
431	this.element.appendChild(messageElement);
432	}
433
434	let span = messageElement.getElementsByTagName("span")[0];
435	if (span) {
436	if (span.textContent != null) {
437	span.textContent = this.options.dictFallbackMessage;
438	} else if (span.innerText != null) {
439	span.innerText = this.options.dictFallbackMessage;
440	}
441	}
442
443	return this.element.appendChild(this.getFallbackForm());
444	},
445
446	/**
447	* Gets called to calculate the thumbnail dimensions.
448	*
449	* It gets `file`, `width` and `height` (both may be `null`) as parameters and must return an object containing:
450	*
451	* - `srcWidth` & `srcHeight` (required)
452	* - `trgWidth` & `trgHeight` (required)
453	* - `srcX` & `srcY` (optional, default `0`)
454	* - `trgX` & `trgY` (optional, default `0`)
455	*
456	* Those values are going to be used by `ctx.drawImage()`.
457	*/
458	resize(file, width, height, resizeMethod) {
459	let info = {
460	srcX: 0,
461	srcY: 0,
462	srcWidth: file.width,
463	srcHeight: file.height,
464	};
465
466	let srcRatio = file.width / file.height;
467
468	// Automatically calculate dimensions if not specified
469	if (width == null && height == null) {
470	width = info.srcWidth;
471	height = info.srcHeight;
472	} else if (width == null) {
473	width = height * srcRatio;
474	} else if (height == null) {
475	height = width / srcRatio;
476	}
477
478	// Make sure images aren't upscaled
479	width = Math.min(width, info.srcWidth);
480	height = Math.min(height, info.srcHeight);
481
482	let trgRatio = width / height;
483
484	if (info.srcWidth > width \|\| info.srcHeight > height) {
485	// Image is bigger and needs rescaling
486	if (resizeMethod === "crop") {
487	if (srcRatio > trgRatio) {
488	info.srcHeight = file.height;
489	info.srcWidth = info.srcHeight * trgRatio;
490	} else {
491	info.srcWidth = file.width;
492	info.srcHeight = info.srcWidth / trgRatio;
493	}
494	} else if (resizeMethod === "contain") {
495	// Method 'contain'
496	if (srcRatio > trgRatio) {
497	height = width / srcRatio;
498	} else {
499	width = height * srcRatio;
500	}
501	} else {
502	throw new Error(`Unknown resizeMethod '${resizeMethod}'`);
503	}
504	}
505
506	info.srcX = (file.width - info.srcWidth) / 2;
507	info.srcY = (file.height - info.srcHeight) / 2;
508
509	info.trgWidth = width;
510	info.trgHeight = height;
511
512	return info;
513	},
514
515	/**
516	* Can be used to transform the file (for example, resize an image if necessary).
517	*
518	* The default implementation uses `resizeWidth` and `resizeHeight` (if provided) and resizes
519	* images according to those dimensions.
520	*
521	* Gets the `file` as the first parameter, and a `done()` function as the second, that needs
522	* to be invoked with the file when the transformation is done.
523	*/
524	transformFile(file, done) {
525	if (
526	(this.options.resizeWidth \|\| this.options.resizeHeight) &&
527	file.type.match(/image.*/)
528	) {
529	return this.resizeImage(
530	file,
531	this.options.resizeWidth,
532	this.options.resizeHeight,
533	this.options.resizeMethod,
534	done
535	);
536	} else {
537	return done(file);
538	}
539	},
540
541	/**
542	* A string that contains the template used for each dropped
543	* file. Change it to fulfill your needs but make sure to properly
544	* provide all elements.
545	*
546	* If you want to use an actual HTML element instead of providing a String
547	* as a config option, you could create a div with the id `tpl`,
548	* put the template inside it and provide the element like this:
549	*
550	* document
551	* .querySelector('#tpl')
552	* .innerHTML
553	*
554	*/
555	previewTemplate: defaultPreviewTemplate,
556
557	/*
558	Those functions register themselves to the events on init and handle all
559	the user interface specific stuff. Overwriting them won't break the upload
560	but can break the way it's displayed.
561	You can overwrite them if you don't like the default behavior. If you just
562	want to add an additional event handler, register it on the dropzone object
563	and don't overwrite those options.
564	*/
565
566	// Those are self explanatory and simply concern the DragnDrop.
567	drop(e) {
568	return this.element.classList.remove("dz-drag-hover");
569	},
570	dragstart(e) {},
571	dragend(e) {
572	return this.element.classList.remove("dz-drag-hover");
573	},
574	dragenter(e) {
575	return this.element.classList.add("dz-drag-hover");
576	},
577	dragover(e) {
578	return this.element.classList.add("dz-drag-hover");
579	},
580	dragleave(e) {
581	return this.element.classList.remove("dz-drag-hover");
582	},
583
584	paste(e) {},
585
586	// Called whenever there are no files left in the dropzone anymore, and the
587	// dropzone should be displayed as if in the initial state.
588	reset() {
589	return this.element.classList.remove("dz-started");
590	},
591
592	// Called when a file is added to the queue
593	// Receives `file`
594	addedfile(file) {
595	if (this.element === this.previewsContainer) {
596	this.element.classList.add("dz-started");
597	}
598
599	if (this.previewsContainer && !this.options.disablePreviews) {
600	file.previewElement = Dropzone.createElement(
601	this.options.previewTemplate.trim()
602	);
603	file.previewTemplate = file.previewElement; // Backwards compatibility
604
605	this.previewsContainer.appendChild(file.previewElement);
606	for (var node of file.previewElement.querySelectorAll("[data-dz-name]")) {
607	node.textContent = file.name;
608	}
609	for (node of file.previewElement.querySelectorAll("[data-dz-size]")) {
610	node.innerHTML = this.filesize(file.size);
611	}
612
613	if (this.options.addRemoveLinks) {
614	file._removeLink = Dropzone.createElement(
615	`<a class="dz-remove" href="javascript:undefined;" data-dz-remove>${this.options.dictRemoveFile}</a>`
616	);
617	file.previewElement.appendChild(file._removeLink);
618	}
619
620	let removeFileEvent = (e) => {
621	e.preventDefault();
622	e.stopPropagation();
623	if (file.status === Dropzone.UPLOADING) {
624	return Dropzone.confirm(
625	this.options.dictCancelUploadConfirmation,
626	() => this.removeFile(file)
627	);
628	} else {
629	if (this.options.dictRemoveFileConfirmation) {
630	return Dropzone.confirm(
631	this.options.dictRemoveFileConfirmation,
632	() => this.removeFile(file)
633	);
634	} else {
635	return this.removeFile(file);
636	}
637	}
638	};
639
640	for (let removeLink of file.previewElement.querySelectorAll(
641	"[data-dz-remove]"
642	)) {
643	removeLink.addEventListener("click", removeFileEvent);
644	}
645	}
646	},
647
648	// Called whenever a file is removed.
649	removedfile(file) {
650	if (file.previewElement != null && file.previewElement.parentNode != null) {
651	file.previewElement.parentNode.removeChild(file.previewElement);
652	}
653	return this._updateMaxFilesReachedClass();
654	},
655
656	// Called when a thumbnail has been generated
657	// Receives `file` and `dataUrl`
658	thumbnail(file, dataUrl) {
659	if (file.previewElement) {
660	file.previewElement.classList.remove("dz-file-preview");
661	for (let thumbnailElement of file.previewElement.querySelectorAll(
662	"[data-dz-thumbnail]"
663	)) {
664	thumbnailElement.alt = file.name;
665	thumbnailElement.src = dataUrl;
666	}
667
668	return setTimeout(
669	() => file.previewElement.classList.add("dz-image-preview"),
670	1
671	);
672	}
673	},
674
675	// Called whenever an error occurs
676	// Receives `file` and `message`
677	error(file, message) {
678	if (file.previewElement) {
679	file.previewElement.classList.add("dz-error");
680	if (typeof message !== "string" && message.error) {
681	message = message.error;
682	}
683	for (let node of file.previewElement.querySelectorAll(
684	"[data-dz-errormessage]"
685	)) {
686	node.textContent = message;
687	}
688	}
689	},
690
691	errormultiple() {},
692
693	// Called when a file gets processed. Since there is a cue, not all added
694	// files are processed immediately.
695	// Receives `file`
696	processing(file) {
697	if (file.previewElement) {
698	file.previewElement.classList.add("dz-processing");
699	if (file._removeLink) {
700	return (file._removeLink.innerHTML = this.options.dictCancelUpload);
701	}
702	}
703	},
704
705	processingmultiple() {},
706
707	// Called whenever the upload progress gets updated.
708	// Receives `file`, `progress` (percentage 0-100) and `bytesSent`.
709	// To get the total number of bytes of the file, use `file.size`
710	uploadprogress(file, progress, bytesSent) {
711	if (file.previewElement) {
712	for (let node of file.previewElement.querySelectorAll(
713	"[data-dz-uploadprogress]"
714	)) {
715	node.nodeName === "PROGRESS"
716	? (node.value = progress)
717	: (node.style.width = `${progress}%`);
718	}
719	}
720	},
721
722	// Called whenever the total upload progress gets updated.
723	// Called with totalUploadProgress (0-100), totalBytes and totalBytesSent
724	totaluploadprogress() {},
725
726	// Called just before the file is sent. Gets the `xhr` object as second
727	// parameter, so you can modify it (for example to add a CSRF token) and a
728	// `formData` object to add additional information.
729	sending() {},
730
731	sendingmultiple() {},
732
733	// When the complete upload is finished and successful
734	// Receives `file`
735	success(file) {
736	if (file.previewElement) {
737	return file.previewElement.classList.add("dz-success");
738	}
739	},
740
741	successmultiple() {},
742
743	// When the upload is canceled.
744	canceled(file) {
745	return this.emit("error", file, this.options.dictUploadCanceled);
746	},
747
748	canceledmultiple() {},
749
750	// When the upload is finished, either with success or an error.
751	// Receives `file`
752	complete(file) {
753	if (file._removeLink) {
754	file._removeLink.innerHTML = this.options.dictRemoveFile;
755	}
756	if (file.previewElement) {
757	return file.previewElement.classList.add("dz-complete");
758	}
759	},
760
761	completemultiple() {},
762
763	maxfilesexceeded() {},
764
765	maxfilesreached() {},
766
767	queuecomplete() {},
768
769	addedfiles() {},
770	};
771
772	export default defaultOptions;
773