✅ Added support for custom upload plugins
Chevereto v4.2.0 enhances the existing
Developers can now easily interact with the Chevereto uploader through a popup, which facilitates a configurable uploading experience. Once the upload is complete, the uploader sends a message back to the application window. The following code snippet demonstrates the basic setup:
The workflow is straightforward: by opening a popup to the
For a clearer understanding, check out this video that explains the process in detail:
Chevereto v4.2.0 enhances the existing
PUP.js (popup upload plugin) by introducing a universally compatible implementation that can seamlessly integrate with any website. Unlike the previous stuff, this new approach allows developers to create fully customized upload experiences with reduced maintenance overhead, eliminating the need for PUP.js altogether.Developers can now easily interact with the Chevereto uploader through a popup, which facilitates a configurable uploading experience. Once the upload is complete, the uploader sends a message back to the application window. The following code snippet demonstrates the basic setup:
HTML:
<html>
<head>
<title>postMessage example</title>
<style>
input {
display: block;
width: 100%;
}
</style>
</head>
<body>
<h1>postMessage example</h1>
<p>Chevereto uploader supports `window.opener` event. It detects when loaded via popup window, and when completing an upload process it will automatically send the contents of a target upload result textarea back to the opener (your website), where you can intercept the message and act accordingly.</p>
<p>Enter the `/upload` URL endpoint, the autoInsert target and click submit:</p>
<div>
<label for="url">Url</label>
<input type="text" id="url" placeholder="https://demo.chevereto.com/upload">
</div>
<div>
<label for ="autoInsert">autoInsert</label>
<select type="text" id="autoInsert">
<option value="0">FALSE</option>
<option value="viewer-links">viewer-links</option>
<option value="direct-links">direct-links</option>
<option value="frame-links">frame-links</option>
<option value="thumb-links">thumb-links</option>
<option value="medium-links">medium-links</option>
<option value="delete-links">delete-links</option>
<option value="html-embed">html-embed</option>
<option value="full-html-embed">full-html-embed</option>
<option value="medium-html-embed">medium-html-embed</option>
<option value="thumb-html-embed">thumb-html-embed</option>
<option value="markdown-embed">markdown-embed</option>
<option value="full-markdown-embed">full-markdown-embed</option>
<option value="medium-markdown-embed">medium-markdown-embed</option>
<option value="thumb-markdown-embed">thumb-markdown-embed</option>
<option value="bbcode-embed">bbcode-embed</option>
<option value="full-bbcode-embed">full-bbcode-embed</option>
<option value="medium-bbcode-embed">medium-bbcode-embed"> </option></option>
<option value="thumb-bbcode-embed">thumb-bbcode-embed</option>
</select>
</div>
<div>
<label for ="autoClose">autoClose</label>
<select type="text" id="autoClose">
<option value="0">FALSE</option>
<option value="1">TRUE</option>
</select>
</div>
<p>
<button type="submit">Submit</button>
</p>
<p>
<label>Messages sent by popup window:</label>
<textarea name="result" style="width: 100%; height: 200px;"></textarea>
</p>
</body>
</html>
<script>
var popup;
var url = 'https://demo.chevereto.com/upload';
var settings = {
autoInsert: false, // false | target select box id
autoClose: false, // true, false
};
window.addEventListener('message', function(event) {
// Chevereto request sending the initial settings
if (event.data.requestAction
&& event.data.requestAction === 'postSettings'
) {
popup.window.postMessage(
{
id: event.data.id,
settings: settings
},
url
);
return;
}
// Chevereto request sending the upload result
var textarea = document.querySelector('textarea[name=result]');
textarea.value = textarea.value + event.data.message + "\n";
});
document.querySelector('button[type=submit]').addEventListener('click', function() {
url = document.querySelector('#url').value;
settings.autoInsert = document.querySelector('#autoInsert').value;
settings.autoClose = document.querySelector('#autoClose').value;
popup = window.open(url, 'my-popup', 'width=960,height=992');
popup.focus();
});
</script>The workflow is straightforward: by opening a popup to the
/upload endpoint, Chevereto automatically detects this action and requests the integration settings (such as autoInsert and autoClose). Users can then upload their files as usual, and upon completion, they can choose the codes to insert into their application.For a clearer understanding, check out this video that explains the process in detail:
