I'm currently writing an HTML5 WYSIWYG using Google Closure Library and I'm providing users to just drag and drop the image file to contenteditable field with text to add an image.
So I have two ways to store these images:
1. Retrieve the data URL from dropped file, create an IMG tag, set the retrieved data URL as value of attribute SRC of this image and insert this IMG tag into editor's field. When user will submit the form I'll just save all retrieved HTML in my MySQL database and will able render his text with images later.
2. Upload the dropped image to my server and save it as regular file.
Then the server will answer like:
"image saved, its URL is http://example.com/images/uploaded-image.png".
After that I will perform the steps similar to my item 1 (create an IMG tag with attribute src="http://example.com/images/uploaded-image.png" and insert it into editable field).
The first way will load database more because it requires to store an image dataUrl in database field together with text. But it makes image adding more easy and fast, so it improves the user's experience.
The second way will load database less because the images will stored separately (in the file system), but this way requires more requests to the server and some processor time on each image adding into text within the WYSIWYG. Also it will not show an immediate result to user so the user will need to wait when his image will uploaded, what will make user's experience worse.
I need the help to understand which way is more preferable in my case considering all pros and cons.
Another way is to store not only images but complete HTML with images in one file. And use the database for storing a link to the HTML file. Then setup Nginx and get the best performance. IMHO if your application is WYSIWYG then the content should be loaded and laid out completely in the browser before editing.
Related
This question is not about particular database engine, it's about actual content.
For example, frontend uses some kind of WYSIWYG editor (CKEditor, for example). It's easy to store everything what user types in editor, but this can potentially break design (unclosed tag) or add security issue ( tag). Also, there can be images and we can not simply store it in the same field.
We can circumvent most design/security issues using markdown, but how to store files/images alongside with text?
Should I create another table?
posts
id
text
post_images
post_id
image_id
image_path
And inside post text have something like this
Hello, this is [image_id=22][/images/dgdgsdg.jpg] my image
Or there are other proven solutions?
All big social networks allow some kind of formatting with attached files, but how store it without headache?
We can circumvent most design/security issues using markdown
That is not true. Markdown can contain inline-HTML and you still need to validate/clean the generated HTML. Use the sanitizer-functions of your web framework.
Usually you'd just store the images on your server, the HTML (or markdown) contains the image path. You could also change the filename to a hash of the entire file. Again, usually there are plugins that handle this sort of thing for you (e.g. paperclip for Ruby on Rails).
This question is perhaps too philosophical for SO but I wanted to give it a try.
We are using a tool called Google-Tag-Manager to track website events. GTM listens for clicks and you can filter based on e.g. element class or id.
Consider this scenario. We have several pdfs on particular page and wnat to know how popular they are. The pdfs can either be downloaded or viewed online. The pdfs each have a name. So I need to get the following data:
whether downloaded pdf or viewed online
the name of the pdf
For name we can presumably use name or title attribute. But whether viewed online or downloaded is more custom.
I am currently going to ask our developers to edit the html in such a way that I can configure GTM to listen for these clicks and pass the data back into our web reporting tool.
I can tell them to add a class to all of them e.g. class='pdf_clicks". What would a conventional means of adding the other two data points? A custom attribute? I know I can use title for name. What about whehter or not was viewed online or downloaded? Is there a generic meta data type attribute for this?
Working on a ASP.Net MVC project, I've got a page that allows users to upload their own picture. On the database, it is stored a file path, such as C:\zm\zemanel.jpg
After some research, it seems that browsers can't access the local machine and for that reason, if I have this:
<img src="C:\zm\zemanel.jpg"/>
The image isn't displayed. Note that it is still in development, the path leads to my machine (localhost).
What is the best solution for the user to select an image, have its path stored in the database, and the image to be displayed?
Can the image be included in the project dynamically? Say for example, in the Images folder?
Because images stored in a project folder are displayed normally.
I'm assuming you want to keep that image for future use (saving projects, etc). So sorry if it's overly complex for what you are asking.
I would think that the easiest way to handle this is to just use an input tag. With that tag you can use certain attributes to select a type of file to show in the client dialog, example[Example]:
//accept tag may not work with older versions of IE
//This shows how to open a client side dialog which defaults to an 'image' filetype.
<input type="file" accept="image/*"></input>
As mentioned by others, you would then upload the file, manipulate it (create a thumbnail or whatnot) then insert the image to the page using either a page refresh or javascript to call an ajax request and insert the image.
Any functionality beyond that you'll probably need a Java applet or custom control, which to me seems like overkill.
Try
<img src="file://c:\zm\zemanel.jpg" />
I have a file having some URLs per line. I need to extract the "keywords" present in the tags i.e. if there is meta tag for "keywords" then i want to get "content" value for it. Example: if the web-page has this meta-tag then for that URL i want "wikipedia,encyclopedia" to be extracted.
One approach is to download the web-page using "wget" and then parse it using some standard HTML parser.
I was wondering is there any better way to do this without downloading the entire web-page.
What you described is the simplest solution to implement.
If you worried about the network traffic generated you could write a small program that only reads the header. As soon as you read the <body..> tag you can finish downloading.
Update: You have to set a very small receive buffer for you socket otherwise the kernel will probably still download the whole page. Verify your solution with tcpdump.
I am trying to create a "smart" web browser to load local images. Basically it works as a GUI for an application. I am using QTWebKit to power the browser, the problem is that the images of a given page can be found in different places, some are local files, others are in different resource files.
For example:
an HTML node to load image x.jpg can look like <img src="x.jpg"> and for image y.gif on the same page it can be <img src="y.gif">, now x.jpg is a local file that can be either in the root directory or in some other place. y.gif on the other hand can be in a resource file.
I want the web browser first to set the paths to all possible sources and once the page has been loaded or preferably while the page is loading searches for the images and loads them from their original path.
I considered the option of reading the HTML data first, parse it and search for the resources one by one, then edit the html to include the full path of the image but that would take a long time than what I want and it isn't practical.
Can any one put me on the right direction or does any one have any ideas on how such a design can be implemented.
EDIT: I have manage to delegate the requests by overriding the QNetwrokAccessManager and QNetwrokReply and been able to get the path to the image. The only problem is loading the image into view. I am currently using QHttp to handle the incoming requests but so far I haven't been able to load the image.
been trying to use QHttp's Get() function and passing the path to the jpg image as (file:///path/to/image) and also tried using the local path but nothing is working.
Take a look at How to tell QWebPage not to load specific type of resources?
You need the same approach but instead of dropping request by constructing QNetworkRequest with empty QUrl you need to pass url to the file on the disk.