Display uploaded file

[Jaimee S]

Hello all,

I've been trying relentlessly to display a photo that is connected to a user. I've tried the download function a thousand ways and am slowly running out of Google search terms. Here is what I've tried:

<db.py>
auth.settings.extra_fields[auth.settings.table_user_name]=
[Field('picture','upload')] #success, no hiccups
</db.py>

<default.py>
def get_file():
row = db(db.auth_user.id==request.args(0)).select().first()
return locals() #success, no hiccups

row =db(db.auth_user.id)...

def download()
return response.download(request,db)
</default.py>

<get_file.html>
<img src="{{=URL('download',args=db.auth_user.picture)}}/>
#displays broken image

#other failed methods
{{for b in row:}}<img...args=b.picture>{{pass}}

{{for...args=b...}}

#also used for loop to print out username. That worked, but when I tried image it displayed a link. When I added img tags before the link I got a broken link

<h2>{{=row.picture}}</h2>

<h2>{{row.picture}}</h2>

<h2>{{db.auth_user.picture}}</>
#same thing with equal sign before db
</get_file.html>

Everything has failed me or caused me a ticket thus far. I'm out of creative ideas and am looking for another thousand ideas to try before I have to start translating my searches to Italian and Spanish.

Thanks for reading! Awaiting your response.

[Anthony]

On Saturday, October 15, 2016 at 3:20:41 AM UTC-4, Jaimee S wrote:

<get_file.html>

<img src="{{=URL('download',args=db.auth_user.picture)}}/>

db.auth_user.picture is a Field object -- you need that actual value of the "picture" field from a particular user record.
 

#displays broken image

#other failed methods
{{for b in row:}}<img...args=b.picture>{{pass}}

Hard to say what's wrong here, as we don't know what "b" is. Also, what's in the "..." may be important -- "args" should be an argument of the URL function, not an attribute of the img tag -- but we can't tell how you have used it here.
 

#also used for loop to print out username. That worked, but when I tried image it displayed a link. When I added img tags before the link I got a broken link

<h2>{{=row.picture}}</h2>

row.picture is just the DAL-generated filename of the picture -- just inserting that in the view won't create an image tag for the picture.
 

<h2>{{row.picture}}</h2>

Without a preceding "=", nothing will be inserted in the view.
 

<h2>{{db.auth_user.picture}}</>

Again, no "=", and db.auth_user.picture is a Field object.

Assuming you want to display all users:

users = db(db.auth_user).select()  # pass this to the view

In the view:

{{for user in users:}}
<img src="{{=URL('default', 'download', args=user.picture)}}">
{{pass}}

Before proceeding, it might help if you spend some time going through the documentation. In particular, have a look at http://web2py.com/books/default/chapter/29/03/overview#An-image-blog.

Anthony

[Jaimee S]

Thanks for replying,

I should probably clarify more. The dots are just my shorthand way of indicating that the code is the same in that spot and the only thing that changed was what I typed out the following time.

The b in the for loop is just a variable that indicates the same value as your "user"
Typed out it would be:
{{for b in row:}}<img src="{{URL('default','download',args=b.picture)}}"

I'm aware of the documented way,but it wasn't working for me so I tried various things in vain of course.

I'll definitely erase what I have tried so far and try what you suggested though. Be back shortly!

[Anthony]

{{for b in row:}}<img src="{{URL('default','download',args=b.picture)}}"

Not sure what your real code looks like, but above should be "{{=URL(...)}}" (you are missing the "="). Also missing the closing of the img tag.

Anthony

[Jaimee S]

Your code worked! Thanks a lot. How do I make the image smaller?

[Jaimee S]

I didn't figure exactly what I wanted, but I just added a require in the model that limits the width and height

[Anthony]

On Tuesday, October 18, 2016 at 3:56:34 AM UTC-4, Jaimee S wrote:

I didn't figure exactly what I wanted, but I just added a require in the model that limits the width and height

Only do that if you want to reject uploads of larger images. If you just want to set a maximum size for an image display in the web page, you can use CSS:

http://jsfiddle.net/antb03/zdg5fpfb/

Note, if the uploaded images are much larger than the size you ultimately want to display, you could (a) reject uploads of larger images (as you are doing now with your validator) or (b) implement an image resizing process on the server (a bit more complicated).

Anthony
 

[Jaimee S]

Sweet, noted.

I'm on my laptop now trying the jsfiddle code. Nothing is happening. I suspect it may be the link I created. What do you think?

Link in html:
<link href="{{=URL('static', 'css/style.css')}}" rel="stylesheet" type="text/css"/>

I created a static named style.css an it appears at the bottom of the static file.

Css:

.container{
display:flex;
justify-content:center;
flex-wrap:wrap;
align-items:center;
}
img{
width:100%;
max-width:200px;
}

Let me know if there's anything else you need!

[Anthony]

I'm on my laptop now trying the jsfiddle code. Nothing is happening. I suspect it may be the link I created. What do you think?

Link in html:
<link href="{{=URL('static', 'css/style.css')}}" rel="stylesheet" type="text/css"/>

I created a static named style.css an it appears at the bottom of the static file.

Css:

.container{
display:flex;
justify-content:center;
flex-wrap:wrap;
align-items:center;
}

Hard to say. Make sure the file is in /static/css/. Maybe use the browser developer tools to (a) check that the CSS file is being loaded, and (b) check the styles that have been applied to the img elements. For testing, you can always use an inline style.

Note, you should probably put those styles on a class rather than directly on the img tag, as you probably don't want the same max width on all images everywhere in the app.

Anthony

[Jaimee S]

roger that i'll try all that and let you know what the problem was when i find it 

[Jaimee S]

The css file was not in 'css/style.css' It was in 'style.css'.
That fixed the problem and now my flexbox works too. Again, many thanks!

[Mirek Zvolský]

Upload size:

In Javascript it is possible read the height/width/size of the image and if they are to large, then you can resize them.

No special library is needed. This can be done using html5 canvas.

Here is my code.

The first line of code is from work with js cropper https://fengyuanchen.github.io/cropperjs/, where user can crop part of the image.

However without a cropper or any existing canvas (i.e. cropperCanvas in following code)) I think you can make a additional hidden element and fill it with the image using html5 FileReader. From such element attributes you can know width/height/size and you can decide, if you call the javascript resize (i.e. next code) or if you upload the file as is.

var cropperCanvas = this.cropper.getCroppedCanvas();
var tmpCanvas = document.createElement('canvas');
tmpCanvas.width = 540;  // target width
tmpCanvas.height = cropperCanvas.height * tmpCanvas.width / cropperCanvas.width; // same ratio
var ctx = tmpCanvas.getContext("2d");
ctx.drawImage(cropperCanvas, 0, 0, cropperCanvas.width, cropperCanvas.height, 0, 0, tmpCanvas.width, tmpCanvas.height);
hiddenInputEl.value = tmpCanvas.toDataURL();  // input type="hidden" for final upload to the server

I have implemented this in CherryPy so I have no idea about Web2py specific problems.

I think you need read Web2py book how to add the additional hidden element/canvas (in the template? before the template by manipulating the SQLFORM?)

Then in JavaScript you need some input element event (blur?) to fill the canvas with html5 FileReader.

As last thing you need read a Web2py book about hidden elements - how to add the hiddenInputEl to form data (because I think hidden elements are excluded from the validation/saving by default).