autonomous.contact/public/tabs/essays/new_essay.html

<style>
	.new-essay-container input[type="file"] {
		display: none;
		visibility: hidden;
		opacity: 0;
	}

	.new-essay-container .essay-title-limit-counter,
	.new-essay-container .essay-limit-counter {
		font-size: smaller;
		margin-left: 0.5rem;
	}

	.new-essay-container .file-attach-label {
		display: block;
		text-align: right;
		margin-top: -2.5rem;
		padding: 0.5rem;
	}

	.new-essay-container .file-attach-label .icon {
		display: inline-block;
	}
</style>
<div class="new-essay-container" data-requires-permission="topics.essays.create">
	<label>
		<input type="checkbox" collapse-toggle />
		<i class="icon plus" style="display: inline-block; margin-right: 0.5rem"></i>
		<span>New Essay</span>
	</label>
	<form
		data-smart="true"
		method="POST"
		class="essay-creation-form collapsible"
		url="/api/topics/${ document.body.dataset.topic }/events"
		style="
			margin-top: 1rem
			width: 100%;
			transition: all 0.5s;
		"
		on_reply="async (event) => { await document.getElementById( 'essays-list' ).__render(event); document.getElementById(event.id)?.classList.remove('sending'); }"
		on_parsed="async (event) => { await document.getElementById( 'essays-list' ).__render(event); document.getElementById(event.id)?.classList.add('sending'); }"
	>
		<input type="hidden" name="type" value="essay" />

		<input
			type="hidden"
			name="id"
			generator="(_input, form) => 'TEMP-' + form.__submitted_at.toISOString()"
			reset-on-submit
		/>
		<input
			type="hidden"
			name="meta.temp_id"
			generator="(_input, form) => 'TEMP-' + form.__submitted_at.toISOString()"
			reset-on-submit
		/>

		<input
			type="hidden"
			name="creator_id"
			generator="() => { return APP.user?.id; }"
		/>

		<input
			type="hidden"
			name="timestamps.created"
			generator="(_input, form) => form.__submitted_at.toISOString()"
			reset-on-submit
		/>
		<input
			type="hidden"
			name="timestamps.updated"
			generator="(_input, form) => form.__submitted_at.toISOString()"
			reset-on-submit
		/>

		<input
			type="hidden"
			name="parent_id"
			generator="(_input, form) => { const parent_essay = form.closest( '.essay-container' ); return parent_essay?.dataset?.essay_id; }"
		/>

		<textarea
			type="text"
			name="data.title"
			value=""
			maxlength="128"
			rows="2"
			placeholder="Essay title..."
			reset-on-submit
		></textarea>
		<div class="essay-title-limit-counter" data-limit-counter-for="data.title">0 / 128</div>

		<textarea
			type="text"
			name="data.essay"
			value=""
			maxlength="65536"
			rows="16"
			placeholder="		Compose your thoughts here."
			reset-on-submit
		></textarea>
		<div class="essay-limit-counter" data-limit-counter-for="data.essay">0 / 65536</div>

		<label class="file-attach-label">
			<input
				aria-label="Upload and share file"
				type="file"
				multiple
				data-smartforms-save-to-home="true"
				name="data.media"
				reset-on-submit
			/>
			<div class="icon attachment"></div>
		</label>
		<input type="submit" value="Publish It!" />
	</form>
</div>