Comments (4)
Is anyone working on this?
from octobertricks.com.
I am not.
This could be impemented as a first version using the Responsiv.Uploader plugin. This won't allow screenshots in the content itself but they could be displayed above or below the content.
from octobertricks.com.
Would be great to figure out copy/paste behavior right in the editor, like github. I'll do some looking into it!
UPDATE So a quick search revealed how to capture images from the clipboard with Javascript. There's also talk on Ghost forums about how to handle this.
- What format would be best? blob vs base64?
- Setup events to capture the clipboard content
- Need to check that it is actually an image?
- Use AJAX to send the data to the backend (POST /tricks/upload/policies)
- Place to store the images?
- Handler to inject the MD for displaying the stored image
from octobertricks.com.
Hello there.
I know, this topic is a bit older... but... anyways...
EasyMDE already provides the possibility to upload images since version 2.8.0 (released in 2019). However, I created a quick prototype how it could work and came along with the following solution (The component method, shown below, still misses some validation stuff like filesize, mimetype and so on).
The EasyMDE related JavaScript code (I updated EasyMDE to the latest version)
var easyMDE = new EasyMDE({
showIcons: ['strikethrough', 'code', 'upload-image'],
hideIcons: [],
element: document.querySelector('#trick_content'),
toolbar: [
"bold", "italic", "strikethrough", "heading", "|",
"code", "quote", "unordered-list", "ordered-list","|",
"link", "image", "upload-image","|",
"preview", "side-by-side", "fullscreen","|",
"guide"
],
uploadImage: true,
imageUploadFunction: (file, resolve, reject) => {
jQuery(this).request('onUploadImage', {
data: {
'image': file
},
files: true,
success: function (data) {
if (typeof data === 'object' && (data.status || '') === 'success') {
resolve(data.path);
} else {
reject('An unknown error occured');
}
},
error: function () {
let message = (this.responseJSON || {}).result || 'An unknown error occured';
reject(message);
}
});
},
renderingConfig: {
singleLineBreaks: false,
codeSyntaxHighlighting: true,
},
});
The required method on the TrickForm component:
public function onUploadImage()
{
if (!Input::hasFile('image')) {
throw new AjaxException('The passed form is invalid.');
}
try {
$file = new File();
$file->fromPost(request()->file('image'));
$file->save();
return ['status' => 'success', 'path' => $file->getPath()];
} catch (\Exception $e) {
throw new AjaxException($e->getMessage());
}
}
Anyways, one issue stays: What happens when the user aborts the Trick creation, after uploading x pictures? I've two solution for this scenario.
-
Each file is referenced via the
system_files
db. Theoretically, we could clean unused images by checking thefield
orattachment_id
/attachment_type
columns and remove them respectively. This can either happen manually via the backend or using a cronjob. -
Alternatively, we "skip" the upload path on the EasyMDE function and handle them after the user submits the Trick itself. This should be possible with some JavaScript magic and a simple replacement on the backend side. However, this COULD be a horrible user experience when the user uploads huge or many images (which both could be restricted, of course).
Anyways. Would do you think?
~Sam.
from octobertricks.com.
Related Issues (13)
- Add an overview page for all tricks
- Add RSS Feed HOT 2
- Add support for listing author tricks HOT 2
- Add leader board for authors HOT 3
- Mobile nav z-index is putting mobile nav behind main content HOT 1
- What frontend css framework is used? HOT 1
- Add Tags sidebar HOT 2
- Show trick count for tag and topic lists HOT 1
- Add preview mode in the trick submission form
- Installation issues HOT 3
- Avatars aren't loading (correctly) HOT 2
- In search results pagination skips query HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from octobertricks.com.