Forums

Looking to capture a photo - need advice

Please forgive relative noob question if this is obvious to all but me....

  • Looking at making a fairly simple FLASK web app that can enroll a user object with a name, email address, and a photo. Idea would be to use a mobile device (iPhone, iPad, Android, etc) to complete the enrollment through Chrome or Safari. After enrollment, a user can submit their email address and the app will display the photo. There is a bit more to it - I want to do some stuff to the photo, but that is the gist of the app.

  • What I'm looking for is advice on how to capture the photo - what
    extensions exist, etc. If FLASK is the wrong route, or this is a
    dead end idea...helpful to know as well.

Thanks in advance!

Flask would work well for that, yes. For the image upload, you could just do a simple <input type="file" />. If you look at the code for this Stack Overflow answer you can see super-simple example of how to upload a file using Flask -- the Flask app in question expects a text file, so it will return an error if you try to upload a photo, but the technique would be the same for an image. And when I visit the example site on my phone, the page (while not attractively formatted) offers me the option to take a photo when I click on the "upload" button, which I imagine would work well in your use case.

Giles - thanks for the quick reply. I'll give it a go and see where it takes me.

Great -- good luck!

Time to ask another noob question.

I got the file upload running and on mobile devices, I have the option to take a photo so all is good there.

But I'm banging my head trying to make the file upload look prettier than the default "Browse.." button. My futile attempts at using bootstrap's btn classes display the input field nicely, but the file select function is lost.

<div class="form-group">
    <div class="input-group input-file" name="photo">
        <input type="text" class="form-control" placeholder='Choose a file...' />           
        <span class="input-group-btn">
            <button class="btn btn-default btn-choose" type="button">Choose</button>
        </span>
    </div>
</div>

Looks pretty...but doesn't let me select a file anymore. I'm sure I'm missing something simple... thx in advance

Styling upload forms is not a simple exercise. Have a google around to find a guide that works for your situation. Be careful that you choose one that covers the browsers you care about at least.