I am trying to upload multiple files using Django. Using following code select multiple files in html form.
index.html
IMAGE Files:<input type="file" name="image" multiple /><br/>
Views.py
image=request.FILES.get('image')
models.py
image=models.ImageField(upload_to=get_upload_pathimage)
Now I get only last file (if I select 3 files then get 3rd file). How to get all images ?
My solution for getting multiple files from html and upload that files in django
index.html
<div id="fine-uploader-manual-trigger">
<input class="custom-file" type="file" name="imgname" id="productImgUpload" accept=".xlsx,.xls,image/*,.doc,audio/*,.docx,video/*,.ppt,.pptx,.txt,.pdf" multiple>
</div>
views.py
filelist = request.FILES.getlist('imgname')
for i in range(len(filepath)):
filename = filelist[i]
request.FILES is a MultiValueDict and doing get will return only the last value as you noted. If you want all of the values you should use images = request.FILES.getlist('image').
i just try for getting multiple images from static folder to html page using for loop in Django.
{% for i in lst %}
<td style="margin-left: 10px;">
<img src="{% static '/images2/' %}{{i}}.png" style="width: 300px; height: 200px;">
{% endfor %}
Related
I would like to embed a pptx that is uploaded into a folder in OneDrive within a iframe tag in a Django template. I have the urls stored in a model and saved into the SQLite database. In this sense, in the views.py file, I have the following code:
context = {
'selectedunit': selectedunit,
'url_to_be_inserted': MyModel.objects.filter(unit=selectedunit)
}
return render(request, 'web.html', context)
The code for web.html is very easy:
{% extends 'base.html' %}
{% load static %}
{% block content %}
<div class="container col-lg-8">
<div class="center">
<iframe class="center" src={{ url_to_be_inserted.url }} width="100%" height="300%" frameborder="0"/>
</div>
</div>
{% endblock %}
The result is the snapshot below:
While, I would like to embed the ppt into the web site. If I directly insert the URL, instead of using the context variable, it works. That is to say:
<iframe class="center" src="https://..." width="100%" height="300%" frameborder="0"/>
In this case, the result is as follows (ppt embedded into the Web site):
The reason why doing in this sense is because, depending on the selectedunit variable, I would like to address a different pptx with a different URL and I would like to dynamically change the pointer (as you see above by filtering the model).
How could I solve it?
Many thanks in advance
Hey almighty Stackoverflow,
i'm pretty new to Django and i'm required to write an HTML-Email Template, which includes Social-Media Icons that are also Hyperlinks. It all works fine in Preview, but when send by Email only the "Broken-Image"-icons appear.
The Images are located in the static file of the Django Module and also in the static.dist directory of the main application. A few weeks ago, it worked, but after some pause and new testing yesterday, the images are broken.
{% static 'ner_mail/YouTube.png' as yt_icon %}
{% with 'target="blank" href="https://www.youtube.com/URL"'|safe as a_attr %}
{% blocktrans %}
<a {{ a_attr }} > <img src="{{ yt_icon }}" alt="" style="alignment: left;vertical-align:middle; width: 30px; padding-right: 5px" ></a>
<a {{ a_attr }}> Social Media {% endblocktrans %}
{% endwith %}</li>
Can somebody maybe help me? Thank you in advance for any help!
Best regards,
The static template tag gives a relative url, hence when you send that in an email, the user's browser assumes it to be relative from the current website the user is on (gmail.com if suppose the user opened their email there). Hence you want to render an absolute url. To do this you can use request.scheme [Django docs] and request.get_host [Django docs]:
<img src="{{ request.scheme }}://{{ request.get_host }}{{ yt_icon }}" ...>
I'm trying to dynamically display Images in Django. this is my details page
{% extends 'base.html' %}
{% load staticfiles %}
{% block header %}
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('{% static 'blog/img/about-bg.jpg' %}')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="page-heading">
<h1>{{ post.title }}</h1>
<hr class="small">
<span class="subheading">blog detail</span>
</div>
</div>
</div>
</div>
</header>
{% endblock %}
{% block content %}
<h1>{{ post.title }}</h1>
<h4>{{ post.body }}</h4>
{% lorem 5 p random %}
<hr>
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = '//eights.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the
comments powered by Disqus.
</noscript>
<script id="dsq-count-scr" src="//eights.disqus.com/count.js" async></script>
{% endblock %}
So far I tried storing these approaches. I tried storing this in the database
{% static 'blog/img/about-bg.jpg' %}
and called it like this
style="background-image: url('{{ post.title }}')"
that didn't work. Then I tried storing it in the database like this
'blog/img/about-bg.jpg'
and calling it like this
style="background-image: url('{% static '{{ post.title }}' %}')
then I ried storing it like this in the database
static/blog/img/about-bg.jpg
and calling it like this
style="background-image: url('{{ post.title }}')"
I've also tried defining it in the views.py
pic = "path/pic.img"
context = {
"pic": pic
context and calling it
{{pic }}
none of these methods work. It's a little different from Laravel. In laravel
path/{{ post->title }}
would have worked. How can I do this in Django? any and all suggestions are welcome. To be clear I want all my articles to display an image on the index page, then when I click one of them, I am taken to the details page that image for that particular article is displayed
I've figured it out. It's supposed to be stored as
/static/blog/img/about-bg.jpg
not
static/blog/img/about-bg.jpg
the forward slash makes it work. in Laravel this does not matter
From you question I understand that by dynamically you mean that you want to upload an image to your site. So it's not just a static image that is always the same like a logo of your page or something.
You have to do this:
In models.py
from django.contrib.sites.models import Site
def generate_filename(filename): #it adds the image in a folder with the current year
ext = filename.split('.')[-1]
year = datetime.datetime.now().year
return str(year) + '/' + str(int(time())) + '.' + ext
class PageWithImage(models.Model):
image = models.ImageField(upload_to=generate_filename, blank=True, null=True)
site = models.ForeignKey(Site, blank=True, null=True)#this if you want the image linked with your site
Then in setting.py you have to add:
import os
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
MEDIA_ROOT = os.path.join(BASE_DIR, 'img')
MEDIA_URL = '/img/'
Then in the template:
<img itemprop="image" src="http://{{ object.site }}{{ object.image.url }}">
And don't forget to add the image field to admin.py
For adding images dynamically to your webpage using Django :
As we mostly use Jinja for templates,
<img src="{%static 'images/beach.svg' %}" alt="A beach image">
We give this kind of commands to access static image files. But for dynamic, we have to change the 'beach.svg' to something like {{dest2.img}} in the above HTML image tag, if my "views.py" function is like :
def index(request):
dest2 = Destination() // Imported class 'Destination()' from models.py .
dest2.name = 'Beach'
dest2.img = 'beach.svg' // The image name we need.
dest2.desc = 'Some beach description'
dest2.price = 2000
return render(request, 'index.html', {'dest2' : dest2}) // Passing the object value to html page.
If we logically think, the code should be like :
<img src="{%static 'images/{{dest2.img}}' %}" alt="A beach image"> // we cannot do this here!!!
We cannot use a Jinja code inside another Jinja code. So we add :
{% static 'images' as base_url %}
at the top of our HTML page. 'images' is the default folder for images and we are calling it as 'base_url' in this HTML page. So we have to use 'base_url' as path and 'dest2.img' as the file name. so the image source will be like :
<img src="{{base_url}}/{{dest2.img}}" alt="A beach image">
So finally we're done making the dynamic images in Django.!!!😋
First, you cannot use {% static 'blablabla' %} in CSS files.
Second, use this code:
style="background: url(/static/blog/img/about-bg.jpg) no-repeat"
Third, if you will be working with images from models in the future then your code should be:
style="background: url(/{{ your_object.your_img_field }}) no-repeat"
I'm currently attempting to embed a user-submitted YouTube link via a Django form within a Twitter Bootstrap layout.
The space for the video is appearing and the source code reflects the correct information and link, but neither the video nor the player appears. I'm also using the "flex-video" class from this link for a responsive layout http://poslavsky.com/blog/2012/04/01/responsive-video-in-twitter-bootstrap/ but it doesn't work when that class is changed to another name such as "video" either.
This is the code:
<div class="row">
<div class="span12">
<span>{{story.author}}</span><br>
<span>{{story.zip_code}}</span><br>
<span>{{story.date}}</span><br>
<p>{{story.copy}}</p>
<div class="image">
{% if story.pic %}
<img src="{{ story.pic.url }}" alt="some_image_alt_text" />
{% endif %}
</div>
<div class="flex-video">
{% if story.video %}
<p> <iframe width="460" height="250" src="{{ story.video}}" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</p>
{% endif %}
</div>
</div>
Any insight greatly appreciated.
I guess {{story.video}} gives Youtube video Url something similar to this http://youtube.com/watch?v=ASO_ypdnsQ which is direct youtube url, and not embed url.
Embed URL for same video is different than direct url, like this http://youtube.com/embed/....
I created a custom template tag, here is how.
import urlparse
...
#register.inclusion_tag('video_embed.html', takes_context=True)
def youtube_embed(context, url):
url_data = urlparse.urlparse(url)
query = urlparse.parse_qs(url_data.query)
video_id = query["v"][0]
context['embed_url'] = ('http://youtube.com/embed/%s' % video_id)
return context
Then, in templates just load the tag, and pass the youtube url. It will give embed url from normal url.
I am trying to use Django to upload images to a directory on disk. For some reason I'm can't get this to work properly. I get redirected to the submit-success.html page with no errors, however the file doesn't get uploaded. I've provided some code below. Any help would be greatly appreciated. Thanks in advance.
NB:
I'm working on the development server,
I'm using django 1.3,
I'm using sqlite3
This is my form in upload.html
<form enctype="multipart/form-data" action="{% url upload_success %}" method="post">
{% csrf_token %}
<table>{{ form }} </table>
<input type="submit" value="Submit image">
</form>
Here is a link to some code I have written:
https://gist.github.com/1468190
Your handle_uploaded_image method seems faulty. For example, with these lines:
photo_dir = '%s/uploaded_photos/Not_Published/%Y/%m/%d' % settings.MEDIA_ROOT
photo_destination = open(photo_dir, 'wb+')
You're attempting to open a file in "YYYY/MM" with the name of "DD". If you already have "DD" as a directory, this will not work, and if you don't your image is going to be saved as "DD" not as "image.jpg" or whatever. So your image may very well be getting saved, but you're not recognizing it.