I found the following javascript example for uploading multiple files in one session:
Upload multiple files with a single file element
My question is that in my APEX 3.2 page, I currently have a region that looks like this:
And I want to take out the default 'File Browse' and put in the multiple file upload portion in it's place.
Is there a way to put a region within a region? If not, how can I add an HTML item within a region?
Here is the code that I have in the second screen shot (html region):
<form enctype="multipart/form-data" action="your_script_here.script" method = "post">
<input id="my_file_element" type="file" name="file_1" >
<input type="submit">
Files:
<div id="files_list"></div>
<script>
var multi_selector = new MultiSelector( document.getElementById( 'files_list' ), 3 );
multi_selector.addElement( document.getElementById( 'my_file_element' ) );
</script>
</form>
You can create a "Display as Text" item and set your HTML code as the source. Make sure that the item is not set to escape HTML, otherwise you will just see the HTML and not the controls.
The result comes out like this (I have a text item "Request Title" followed by the display item based on your HTML:
Related
I have ckeditor 4 with image upload on my website. Everything works great the only issue is that it visually looks very bad. Is it possible to style or change the UI for the image upload as I expect users will have a hard time understanding it. I just want a simple upload button nothing fancy
Update:
I discovered the easy image plugin and it does exactly what i need, just a simple image upload button. The issue is it requires a cloud service subscription so it wont work for me.
You can add style and customize the input, one way could be:
{%if field.name == 'picture' %}
<label for ="id_picture" id="icon_upload" class="fa fa-camera"></label>
<input type="file" name="picture" id="id_picture" accept="image/*"style="display: none;" >
{% endif %}
the field name usually is take of the field name model,, but it can change depending on how the form is passed to a template.
https://docs.djangoproject.com/en/3.2/ref/forms/fields/
I used this to remove all the dialog tabs and just kept the image upload tab
CKEDITOR_CONFIGS = {
'default': {
'removeDialogTabs': 'image:advanced;image:Link;image:info',
}
In Coldfusion, using cffile upload, when a file is selected with the browse button the name of the selected file shows next to the button. So far, so good. When I submit the file for upload, the text changes back to "no file selected". This is doubtless because we are submitting a form.
However, I'm submitting the form to the same page, and would like to see the name of the file selected instead of "no file selected" which is likely to confuse the user.
The code:
<form
enctype="multipart/form-data"
method ="post"
name ="attupload"
action ="">
<cfoutput>
<table style = "margin-left: 40%">
<tr><td>
<input name="theupload"
type="file"
style = "font-family: comic sans ms;
color: ##679C9C">
</td></tr>
</table>
<div style = "width:20%; margin:5% auto 5% 45%">
<input name = "submit"
type = "submit"
class = "submitbut"
style = "font-size: 16px"
value = "Upload File">
</div>
</cfoutput>
</form>
The words 'no file selected' seem to be part of the input name = 'upload' field, but ColdFusion evidently takes control of it, and I cannot insert anything else.
Does anyone know how I can control the 'no file selected' note, so that I can put the name of the selected file back in that spot? I have tried with javascript, but it is simply ignored.
Once a file has been selected, you can access its properties via JavaScript with the File API. You can't affect the value displayed next to the default <input type="file"> field with JavaScript.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
You should also avoid submitting forms to the same page. You should follow the process:
Form page
HTTP POST to form processing page.
after form processing, <cflocation> (301 redirect) back to a list page or the form page.
When you post to the same page, the user can hit reload and be prompted to resubmit form data. This can be problematic in many situations. As an alternate, you can post the form data using Ajax or better, via Fetch. This avoids a re-post on page reload and redirecting away from the current screen.
Also, you should avoid naming an <input type="submit"> "submit". It can conflict with the JavaScript function submit() should you need to use it.
<input name = "submit"
type = "submit"
class = "submitbut"
style = "font-size: 16px"
value = "Upload File">
I was looking at http://archive.tinymce.com/wiki.php/Configuration3x:editor_selector
Is there a way to select a textbox only if it is under a <form> with a specific id?
For example:
<form id="edit_page">
<textarea></textarea>
<form>
I know I can add a class to the text area to get it to work, but I'm hoping for this solution for my use case. As I'm using Active_admin and I don't want to have to redefine all the default forms for it.
If you are okay with using the tinyMCE jquery plugin, you can select the elements using the jquery selector($) and then call the tinymce function over that.
Codepen example is here.
JS Part:
$(function() {
$('#edit_page2 textarea').tinymce({
script_url : 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.4/tinymce.min.js',
theme : "modern",
mode : "textareas"
});
});
HTML Part :
<form id="edit_page1">
<textarea></textarea>
</form>
<form id="edit_page2">
<textarea></textarea>
</form>
<form id="edit_page3">
<textarea></textarea>
</form>
This will select based on the parent's id. You can use any type of css selector.
You will need to include jquery and tinyMce's jquery file
//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.4/jquery.tinymce.min.js
I am using Django and Bootrap 2.32. I want to include this wysiwyg-bootrap-themed text editor: http://mindmup.github.io/bootstrap-wysiwyg/. The usage of this editor is fairly simple, including
$('#editor').wysiwyg();
in the JS-declaration will render each
<div class=editor></div>
into a beatiful wysiwyg text-editor.
Now the problem: I want to include this editor into one of my django form field. I have the single form:
class Article_Form(ModelForm):
Article_text = CharField(widget=Textarea(attrs = {'id' : 'editor'}))
class Meta:
model= Article
, whereas the Article model includes one simple CharField . Is there any chance, to get the editor work inside the Article_text form-field? With the above-mentioned widget, the created textarea cannot be controlled by the wysiwyg-editor-control buttons. Wrapping the form-template-tag like this
<div id="editor">
{{ Article_Form.Article_text }}
</div>
doesn't work either. The problem thus is that Django creates a textarea, wheras the editor would need a <div> to render correctly. Do you guys have any idea how to get this to work (without refering to django-wysiwyg).
Thanks!
I don't know enough about Django but I wrote the editor you're referring to, so here's a suggestion. Assuming the other answer on this page is correct and you can't generate a div directly, you can generate a text area using whatever Django templates you would normally do, then assign two events:
1) page onload event that would copy the textarea contents into the div, something like
$('#editor').html($('#textarea').val())
2) form onsubmit event that would reverse copy the current div contents into the textarea before it gets submitted
$('#textarea').val($('#editor').html())
Take a look at this.
Summernote is a simple WYSIWYG editor based on Twitter's Bootstrap.
django-summernote plugin allows you to embed Summernote into your Django admin page very handy.
https://github.com/lqez/django-summernote
Are you sure that this "plugin" doesn't work with textarea?
{{ Article_Form.Article_text }}
will be rendered to something like:
<textarea cols="40" id="id_Article_text" name="Article_text" rows="10"></textarea>
So there is a chance that you can initialize the wysiwyg editor like:
$('#id_Article_text').wysiwyg();
However after checking the plugin, I doubt that would be possible since it is using contenteditable="true" attribute of HTML5 and probably the plugin works with div only.
So there is no way you can make it work natively with Django form. The solution should be display other fields of your form manually, hide the one with textarea and display the editor instead:
<form action="" method="POST">
{{ Article_Form.field1 }}
{{ Article_Form.field2 }}
<div class=editor></div>
{% csrf_token %}
<input type="submit" value="Submit" id="submit-btn" />
</form>
Then you can use JS to submit your form:
$('#submit-btn').click(function (e) {
e.preventDefault();
$.ajax({
// do your magic here.
// note that you can get the content of the editor with: $('#editor').cleanHtml();
})
});
This way is hackish I agree so I don't recommend you go for it, just find other plugin then. Also please read PEP 8 carefully.
Hope it helps.
Take a look at this repo: https://github.com/rochapps/django-secure-input
I think it solves most of your problems.
I have the following HTML page which works perfectly fine as a HTML page; however when I try put it into APEX by entering the code into a Region it just goes all wrong.
When the submit button is pressed, it takes the user to a new page with the IFRAME on rather than just refreshing the page as it does in a HTML page. The other issue is the aesthetics, it looks perfect in Firefox but in IE the IFRAME is half way down the page. When investigating in Firebug I see no attributes which would cause this.
Is there a method of embedding a HTML page into an APEX form page?
<!DOCTYPE html>
<html>
<body>
<head>
</head>
<form action="http://ukserver/orderlist.asp" target="orderResults">
Enter Order Number: <input id="ord" type="text" name="ord" maxlength="50" size="20"/>
<input type="submit" value="Submit"/>
</form>
<iframe id="orderResults" name="orderResults" src="blank.html" width="100%" height="50%">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
This is the page in FireFox which as you can see looks ok.
This is the page in IE which is incorrect
Update:
The HTML page seems to work perfectly in the HTML header of the APEX page but its above my tabs and region which isnt the place where i want it. I tried to find an order (1112) and it returned the following 'File not found' which is correct.
Hi Tony, I created another IFRAME and i guess I'm half way there. I now just have to get the HTML form working, please see below:
It sounds like you have a PDF file in a folder on a server somewhere for each order. If the names of the files are predictable given the order number then you should be able to generate a link something like this:
1) Create an item to accept the order number e.g. P12_ORDER_NUMBER.
2) Create a button to submit the page
3) Create a report that displays when P12_ORDER_NUMBER is not null and selects:
select '//server/path/fileprefix' || :P12_ORDER_NUMBER || '.pdf' as url
from dual;
4) Convert the report column into a link via the column attributes so that clicking on it launches the file.