CODEWITHSUNDEEP
javascriptjquerypythonajaxdjango
dylan7
dylan7

Reputation: 813

Fetch Images continuously from Django via Ajax

I am using Django to create a very very simple app that allows a client to post images through normal requests. However, the user who views the actual web page, has Javascript running in it that performs continuous AJAX request to look for the next picture posted by the other client, but view them Locally on the django server. i.e. local client opens up page, js continuously submits ajax posts looking for pic number 1. When the remote client posts pic number 1, local client sees pic number 1 in the web page, then asks the server continuously for pic number 2... and so on.

Here is the view that responds to the local client's ajax:

class ViewPictures(View):

def post(self,request):


    #look for ajax request
    if request.is_ajax():

        req_post = request.POST

        #the pk of the picture the client is looking for
        num_pic = req_post["pk"]




        #get the picture from SQL
        try:

            picture = Picture.objects.get(pk=num_pic)


        except Picture.DoesNotExist:
            data = simplejson.dumps({'picture':0})

            return HttpResponse(data,content_type="application/json")


        #get the local path of the pic

        path = picture.photo.file

        #Serialize pathname
        response_data = simplejson.dumps({'picture':str(path)})

        #response with path name JSON

        return HttpResponse(response_data,content_type="application/json")
    else:
        #else forbidden request
        return HttpResponseForbidden()

Here is the local client's client-side page:

    function get_pic(pic_num){

    //ajax request for pic   
    $.ajax({
        url:'{% url "viewpics"%}',
        method: 'POST',
        async: true,
        data: {'pk':pic_num},   
        success: function(response){

            //if pic not none
            if(response.picture!=0){
                var image = '<img id="image" src='+response.picture+ ' height="42" width="42" />'; 
                $(".image_show").prepend(image);
                pic_num++;
            }
            get_pic(pic_num);

        },
        error: function(jqXHR, textStatus, errorThrown){
            alert(errorThrown);
        }


    });


};
$(document).ready(get_pic(1));
</script>
<head>
    <title>IMAGE VIEWER</title>
    <div class ="image_show">
    </div>

</head>

I read that since the server is on the same machine as the client fetching the pics,it just makes sense to send the path of the picture on the local machine to the client. However, I also read that browsers don't allow local access of files into html pages. I was wondering if there is a method for allowing the client to view the local imgs in their web page, or is it better to serialize the local imgs and send them to the client? Is there a better way to do this, should it be done with both clients being remote?

Upvotes: 0

Views: 798

Answers (1)

Vingtoft
Vingtoft

Reputation: 14606

It is possible to access the local file system through the clients browser. This can be done using html5. Please see the following documentation:

https://developer.mozilla.org/en-US/docs/Web/API/FileReader https://developer.mozilla.org/en/Using_files_from_web_applications

Be aware that this approach is not supported by older browsers.

The most used solution is to upload the image to the server and return the servers image URL. This is probably easier to implement and also supported by old browsers. This is what I would recommend.

Upvotes: 1

Related Questions