Update profile picture through clicking on picture itself Django - javascript

I'm trying to find some info online on how to update my user's profile picture on the profile page in the same way that social media applications do it, i.e. by clicking on the profile picture itself and getting asked for the file upload straight away. However, all I'm finding online is options to create a form to do that job, but then it's going to be an upload button that does the job, which is not the same.
How do I get the image to be clickable, opening a file upload after I click it that would then update my model ImageField?

Related

How to use Javascript to create custom download process and open file in Chrome?

i am developing a website, in our website we have a Video player, and a Download button. When user click to it, it will download the video to user machine.
Usually this can be done if user right click and choose Save Video as. Then a native browser dialog open, where user can choose destination and file name, then click save. After that in the bottom of the browser there will be a widget to show progress, and user can click to open after it finishes downloading
Now my question is it possible if we create a similiar functional widget but in the website. So basically after user clicking Download. This modal will appear in the bottom left of the page
Then after downloading is finished, it will change to
So to sum up the requirement for this
1/ Trigger download automatically by JS without right click and choose Save video as
2/ Showing a custom progress of downloading
3/ When downloading is finished, there is a custom button, where user can click to Open
4/ [Optional] Hide the native progress/click to open widget of the browser
So these requirement i still not sure which one is possible and which one is not, so hopefully if someone can give me a direction, thanks

Dynamic og:image for Facebook share button

Similar to this medium article where a custom og:image, og:title, and og:description are displayed for different articles, when the facebook share button is clicked a popup opens to let the user type a message and below is the image/title/description grabbed from meta tags (og:image, og:title, etc)
When the user clicks on the facebook share button I then dynamically change the meta tags to customized images/descriptions using javascript like so
document.head.querySelector("[property='og:image']").setAttribute("content", image_url)
the problem is that the image isn't appearing at all when the fb share button is clicked - when I enter the url into Sharing debugger it works, but on the actual website it doesn't
Not certain what your aim is but you won't be able to set the og:image using Javascript because facebook is getting the image url etc. from the HTML returned by the url when its own server requests that url. It's not getting that data from the client.

Profile Picture Upload using Facebook Graph API

Is there any way in which I can initiate a profile picture upload on Facebook using their Javascript Graph API. I have looked in many places for an answer and the closest I had got was to how to set a facebook profile picture using the graph api. But the "makeprofile=1" does not seem to be working.
&makeprofile=1 seems to be deprecated.
Use the mobile link URL instead: http://m.facebook.com/photo.php?fbid=[photo-id]&prof
You'll get a screen with your picture and a button asking the user to confirm that he wants to use it as profile picture.
Source: https://stackoverflow.com/a/37480622

PhoneGap Images Update issues

I am working on a project using Phonegap, i am creating profile page but the issue is that when user uploads new profile picture, picture successfully uploaded to the server, but it does not show updated picture in the profile, instead it shows the previous image, i know it is using the image from cache that was already there. So how can i avoid using the image from cache, i want new image from the server.
i used following code in ajax call but it is not working.
cache:false,

Uploading an image to twitter from website?

I want a user to be able to tweet images that are on my site.
First I checked out Cards but the docs say:
For photos and animated GIFs, upload the media directly with the Tweet or consider using the Twitter API to upload media.
So I check out the docs and there are ways to do this.
I can't figure out if you are able to upload images from your site using the API, but having them posted by a user's twitter account, won't all of the tweets come from whatever account I set in the script?
Is it possible to let a user upload an image from my site or will I have to use cards?

Categories

Resources